希伯来文Niqqud的HTML CSS样式

我想在html中使用不同于字母的niqqd字符样式。 假设我想让希伯来文字母打赌为黑色，而达吉斯字母打赌为绿色

如何在html+css中实现这一点

这不能完成任务：

בּ

这将起作用：

<font color='green' size='12'>&#1468;</font><font color='black' size='12'>&#1489;</font>

和#1468ב

在chrome和firefox上测试过，如果它是红色的，你想要点而不是绿色，只需将绿色改为红色即可

字体大小为12只是为了使其可见，您也可以将其删除

---

-屏幕截图，了解它对我的外观

该示例在不同的浏览器中以不同的方式显示，具体取决于包括使用的字体在内的许多内容。例如，在我对Win7的测试中，Firefox显示了一个全黑色的dagesh，而Chrome和IE显示了一个黑色的dagesh，红色dagesh被严重或非常严重地替换

你的方法没有理由不起作用。也没有任何规范要求它工作。浏览器（和其他渲染软件）可以使用单个预合成的图示符显示组合，在这种情况下，图示符显然是一种颜色。它们还可以分别显示基本字符和变音符号；这可能会产生所需的渲染效果，但定位变音符号是一个真正的挑战，浏览器通常会失败

这意味着你需要某种技巧

一个相对简单的技巧是让内容既有基本字符（本例中为下注），又有基本字符和变音符号（此处为dagesh）的组合，在其上设置不同的颜色，并将其叠加，使基本字符位于最上面。主要的反对意见是合乎逻辑的：文档中包含的基本字符会毫无理由地出现（视觉渲染除外）。假设这是可以接受的，下面是如何做到这一点：

[代码于2020年12月16日编辑，使两个内部元件完全定位。]

.colcomb{position:relative}
.colcomb.base、.colcomb.combined{position:absolute；left:0；top:0；}
.colcomb.base{z-index:200；}
.colcomb.组合{z-索引：100；}
.colcomb.composed{color:red；}
ב
בּ

这里的主要问题是，当您将dagesh、niqqud或其他变音符号包装在一个跨距中（以设置其样式）时，浏览器不再知道它所附加的辅音

因此，它无法正确定位。例如，vav比shin窄得多。比如说，当连接到vav时，浏览器将qamats 5px定位到右侧，当连接到胫骨时，将10px定位到右侧。当您在跨距中包裹qamats时，浏览器不知道它附加到哪个辅音，因此不知道向右移动多远。所以它就放弃了，根本就不向右移动。因此，为什么，当你把元音等放在一个音程中时，位置就乱了

只要每个辅音与任何附加元音/变音在同一音长内，就可以在不弄乱位置的情况下为不同的字母涂上不同的颜色。您还可以使用

：：first letter

CSS选择器为第一个字母（包括其元音）添加不同的颜色

最后，当辅音及其附加的变音符号需要不同的颜色时，您可以使用Jukka答案中讨论的分层方法。我在代码片段中添加了一个更全面的示例

我尝试与SVG合作，看看他们是否提供了更好的解决方案。但是SVG也面临着同样的问题

PS：你能找出shalom中故意的拼写错误吗D（也就是说我懒得修理它）

。示例一{
字体大小：100px；
}
例一{
颜色：红色；
}
.例一.例二{
颜色：绿色；
}
.例一.例三{
颜色：粉红色；
}
.例一.例四{
颜色：蓝色；
}
.例二{
字体大小：100px；
}
例二：第一个字母{
颜色：橙色；
}
.例三a.例三b{
字体大小：100px；
位置：绝对位置；
右：0；
}
.例3-a{
颜色：红色；
z指数：1；
}
.例3-b{
颜色：绿色；
}

שָׁלוּם
שָׁלוּם
שלום
שָׁלוּם

您使用的浏览器是什么？在Chrome39中看起来不错。在Firefox34中不工作，因为我使用的是Chrome39。dagesh不在字母范围内，我不知道如何使它在字母范围内，并且有不同的样式我还添加了一个更大的字体链接，以使它更清晰。你可以发布一张图片，说明它应该是什么样子，以及它看起来不正确，所以我们都知道需要和不正确的情况是什么？因为在Chrome39中，对我来说，就像你所希望的那样，它看起来是在赌注之内。不幸的是，在我的电脑上，dagesh仍然在字母之外。所以我有一个很大的感觉，这实际上取决于安装的操作系统/字体。在这种情况下，您可以使用css定位来重新定位它，但这样做很可能会在其他计算机/屏幕尺寸上搞砸它！如果呈现是同步错误的，CSS定位会有所帮助，但是如果根据操作系统/浏览器/字体/任何东西的不同而有所不同，它将是一个混乱的局面……这就是：好把戏！当然，它是反语义的，但它确实有效，除非我们找到更符合逻辑的解决方案：它很棒！谢谢：）是的，我可以看到“shaloom”而不是“shalom”：