用于希伯来语Niqqud的HTML CSS样式
我想在html中使用与字母不同的niqqud字符样式。假设我想要一封希伯来字母是黑色的，而达吉什则是绿色的。
这是如何用html+css制造的？
这并不能完成任务：
<div style = "font-size: 500%">
<span style = "color: black">ב</span><span style = "color: red">ּ</span>
</div>
它的结果是：http://jsfiddle.net/nv7ja459 (链接更大的字体：http://jsfiddle.net/nv7ja459/1/)
所以达格什不在信里了。
链接到屏幕截图https://drive.google.com/file/d/0B4SYIrNV4hXYZ0ZyWXZnZWg4OGc/view?usp=sharing
回答 3
Stack Overflow用户
发布于 2019-03-11 19:11:44
这里的主要问题是，当您将dagesh、niqqud或其他对话框封装在一个跨度中时，浏览器不再知道它附加到哪个辅音。
正因为如此，它无法正确定位它。例如，vav比小腿窄得多。假设浏览器将qamats放在右边，当连接到vav时，将qamats放在右边，当连接到shin时，将10 5px放置在右边。当您将qamats封装在一个跨度中时，浏览器不知道它附加到哪个辅音，因此不知道将它移向右边有多远。所以它就放弃了，一点也不向右移动。因此，为什么，当你把元音等放在一个跨度里时，位置就会乱七八糟。
只要每个辅音都与任何附加元音/音符相同的范围内，你就可以用不同的字母进行不同的颜色，而不会弄错位置。您还可以使用::first-letter CSS选择器对第一个字母(包括其元音)进行不同的着色。
最后，当辅音和附加的音符需要不同的颜色时，您可以使用在Jukka的答案中讨论的分层方法。我在代码片段中添加了一个更彻底的示例。
我试着用SVG看看他们是否提供了一个更好的解决方案。但SVG也遇到了同样的问题。
你能发现shalom中的故意拼写错误吗？:D (AKA我不费心去修复它)
.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>
Stack Overflow用户
发布于 2014-12-29 10:59:36
该示例在不同的浏览器中以不同的方式显示，这取决于许多事情，包括所使用的字体。例如，在我在Win 7上的测试中，Firefox显示了一个与dagesh打赌的全黑色，而Chrome和IE则显示了一个带有红色dagesh的黑色打赌，而红色的dagesh被严重地或非常严重地取代了。
你的方法没有理由行不通。也没有任何规范要求它工作。浏览器(和其他渲染软件)可以使用单个预编好的字形显示组合，在这种情况下，字形显然是一种颜色。它们还可以分别显示基本字符和对话框标记；这可能导致所需的呈现，但定位一个透明标记是一个真正的挑战，浏览器经常失败。
这意味着你需要某种诡计。
一个相对简单的技巧是拥有两个基本字符(在本例中是打赌)的内容，以及一个基本字符和一个对话框标记的组合(这里是dagesh)，在它们上设置不同的颜色，并将它们叠加起来，使基字符位于最顶端。主要的反对意见是合乎逻辑的:然后文档包含出现的基本字符，没有任何理由(除了可视化呈现)。假设这是可以接受的，下面是如何做到这一点：
代码编辑12月16日，2020年，使两个内部元素绝对定位。
<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">ב</span>
<span class="combined">בּ</span>
</span>
</div>
Stack Overflow用户
发布于 2014-12-29 07:32:49
这将起作用：
<font color='green' size='12'>ּ</font><font color='black' size='12'>ב</font>在chrome和firefox上测试，如果它是红色的，你想要的是点而不是绿色，只需将绿色改为红色。
字体大小为12，为了使其可见，您也可以删除它。
http://i.imgur.com/smkx3MN.png -为我拍摄的照片
https://stackoverflow.com/questions/27691550
复制
相似问题
用r去除希伯来语"niqqud“
使用php删除希伯来语元音/ niqqud
希伯来语是html中的问号。
使用数组将希伯来语替换为希伯来语
希伯来语问题
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
