希伯来语 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 定位在右侧，当连接到 shin 时将 10px 定位在右侧。当您将 qamats 包装在跨度中时，浏览器不知道它附加到哪个辅音，因此不知道将其向右移动多远。所以它只是放弃，根本不向右移动。因此，为什么，当您将元音等包裹在一个跨度中时，位置就会混乱。

只要每个辅音与任何附加的元音/变音符号位于同一跨度内，您就可以对不同的字母进行不同的着色，而不会弄乱定位。您还可以使用 ::first-letter CSS 选择器为第一个字母（包括其元音）着色。

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

我尝试使用 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>

Answer 2

示例在不同的浏览器中以不同的方式显示，这取决于包括所使用的字体在内的许多因素。例如，在我在 Win 7 上进行的测试中，Firefox 显示了一个带有全黑 dagesh 的赌注，而 Chrome 和 IE 显示了一个带有严重或非常严重移位的红色 dagesh 的黑色赌注。

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

这意味着你需要某种技巧。

一个相对简单的技巧是让内容同时具有基本字符（在本例中为 bet）以及基本字符和变音符号（这里是 dagesh）的组合，在它们上设置不同的颜色，然后将它们叠加，以便基本字符是最上面的。主要的反对意见是合乎逻辑的：然后文档包含无缘无故出现的基本字符（视觉渲染除外）。假设这是可以接受的，下面是如何做到的：

[代码于 2020 年 12 月 16 日编辑，使两个内部元素都绝对定位。]

<style>
.colcomb { position: relative }
.colcomb .base, .colcomb .combined  { position: absolute; left: 0; top: 0;  }
.colcomb .base { z-index: 200; }
.colcomb .combined { z-index: 100; }
.colcomb .combined { color: red; }
</style>
<div style = "font-size: 500%">
<span class="colcomb">
     <span class="base">&#1489;</span>
     <span class="combined">&#1489;&#1468;</span>
</span>
</div>

Answer 3

这将起作用：

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

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

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

http://i.imgur.com/smkx3MN.png - 我的屏幕截图