希伯来语 Niqqud 的 HTML CSS 样式

Question

我想在 html 中设置与字母不同的 niqqud 字符样式。假设我希望希伯来字母 Bet 为黑色，而 Dagesh 为绿色。

html+css怎么实现？

这不完成任务:

<div style = "font-size: 500%">
    <span style = "color: black">&#1489;</span><span style = "color: red">&#1468;</span>
</div>

它的结果是:http://jsfiddle.net/nv7ja459(链接字体更大:http://jsfiddle.net/nv7ja459/1/)

所以 dagesh 不再在信中。

截图链接 https://drive.google.com/file/d/0B4SYIrNV4hXYZ0ZyWXZnZWg4OGc/view?usp=sharing

Answer 1

这里的主要问题是，当您将 dagesh、niqqud 或其他变音符号包裹在一个跨度中(以设置样式)时，浏览器不再知道它附加到哪个辅音。

因此，它无法正确定位。例如，vav 比 shin 窄得多。假设浏览器将 qamats 连接到 vav 时向右移动 5px，连接到小腿时向右移动 10px。当您将 qamats 包裹在一个跨度中时，浏览器不知道它附加到哪个辅音，因此不知道将它向右移动多远。所以它只是放弃，根本不向右移动。因此，为什么当您将元音等包裹在一个跨度中时，位置就乱七八糟了。

只要每个辅音与任何附加的元音/变音符号在同一范围内，您就可以为不同的字母涂上不同的颜色而不会弄乱位置。您还可以使用 ::first-letter CSS 选择器为第一个字母(包括其元音)设置不同的颜色。

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

我尝试使用 SVG，看看它们是否提供了更好的解决方案。但是 SVG 也有同样的问题。

PS 你能发现 shalom 中故意的拼写错误吗？ :D(也就是我懒得修)

.example-one {
  font-size: 100px;
}
.example-one .one {
  color: red;
}
.example-one .two {
  color: green;
}
.example-one .three {
  color: pink;
}
.example-one .four {
  color: blue;
}

.example-two {
  font-size: 100px;
}
.example-two::first-letter {
  color: orange;
}

.example-three-a, .example-three-b {
  font-size: 100px;
  position: absolute;
  right: 0;
}

.example-three-a {
  color: red;
  z-index: 1;
}
.example-three-b {
  color: green;
}

<div class="example-one" dir="rtl">
<span class="one">שָׁ</span><span class="two">ל</span><span class="three">וּ</span><span class="four">ם</span>
</div>

<div class="example-two" dir="rtl">שָׁלוּם</div>

<div class="example-three-a" dir="rtl">שלום</div>
<div class="example-three-b" dir="rtl">שָׁלוּם</div>