Question

我想在html中设置niqqud字符的方式与字母不同。假设我希望希伯来字母投注黑色，而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

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

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

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

一个相对简单的技巧是让内容既包含基本字符（在本例中为赌注），也包含基本字符和变音符号（此处为dagesh）的组合，在其上设置不同的颜色，并将它们叠加在一起基本角色是最顶层的。主要异议是合乎逻辑的：然后文档包含无理由出现的基本字符（视觉呈现除外）。假设这是可以接受的，可以这样做：

<style>
.colcomb { position: relative }
.colcomb  .base { position: absolute; left: 0; top: 0; 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 2

这里的主要问题是，当您将dagesh，niqqud或其他变音符号包装成一个跨度（以对其进行样式设置）时，浏览器不再知道它附加到哪个辅音上。

因此，它无法正确定位。例如，vav比shin窄得多。假设浏览器在附加到vav时将qamats定位在右侧5px，而在附加到shin时将其定位在右侧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>

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 - 截图查看我的样子

希伯来语Niqqud的HTML CSS样式

3 个答案: