希伯来语Niqqud的HTML CSS样式

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

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

\n\n

因此，它无法正确定位。例如，vav 比 shin 窄得多。假设浏览器在附加到 vav 时将 qamats 定位到右侧 5px，在附加到 shin 时将 qamats 定位到右侧 10px。当您将 qamat 包裹在跨度中时，浏览器不知道它附加到哪个辅音，因此不知道将其向右移动多远。所以它只是放弃并且根本不将其移动到右侧。因此，为什么当你将元音等包裹在一个跨度中时，位置会变得混乱。

\n\n

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

\n\n

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

\n\n

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

\n\n

PS 你能发现“shalom”中故意的拼写错误吗？：D（又名我懒得修复它）

\n\n

\r\n

\r\n

.example-one {\r\n  font-size: 100px;\r\n}\r\n.example-one .one {\r\n  color: red;\r\n}\r\n.example-one .two {\r\n  color: green;\r\n}\r\n.example-one .three {\r\n  color: pink;\r\n}\r\n.example-one .four {\r\n  color: blue;\r\n}\r\n\r\n.example-two {\r\n  font-size: 100px;\r\n}\r\n.example-two::first-letter {\r\n  color: orange;\r\n}\r\n\r\n.example-three-a, .example-three-b {\r\n  font-size: 100px;\r\n  position: absolute;\r\n  right: 0;\r\n}\r\n\r\n.example-three-a {\r\n  color: red;\r\n  z-index: 1;\r\n}\r\n.example-three-b {\r\n  color: green;\r\n}

\r\n

<div class="example-one" dir="rtl">\r\n<span class="one">\xd7\xa9\xd7\x81\xd6\xb8</span><span class="two">\xd7\x9c</span><span class="three">\xd7\x95\xd6\xbc</span><span class="four">\xd7\x9d</span>\r\n</div>\r\n\r\n<div class="example-two" dir="rtl">\xd7\xa9\xd7\x81\xd6\xb8\xd7\x9c\xd7\x95\xd6\xbc\xd7\x9d</div>\r\n\r\n<div class="example-three-a" dir="rtl">\xd7\xa9\xd7\x9c\xd7\x95\xd7\x9d</div>\r\n<div class="example-three-b" dir="rtl">\xd7\xa9\xd7\x81\xd6\xb8\xd7\x9c\xd7\x95\xd6\xbc\xd7\x9d</div>

\r\n

\r\n

\r\n

\n