HTML CSS Styling for Hebrew Niqqud

Question

I'd like to style niqqud characters inside html differently than the letter. Suppose I'd like to have Hebrew letter Bet black while Dagesh in it green.

How can this be made in html+css?

This doesn't do the task:

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

It results in : http://jsfiddle.net/nv7ja459 (link with bigger font: http://jsfiddle.net/nv7ja459/1/)

So the dagesh is no more inside the letter.

Link to screenshot https://drive.google.com/file/d/0B4SYIrNV4hXYZ0ZyWXZnZWg4OGc/view?usp=sharing

Answer 1

The example is displayed in different ways in different browsers, depending on many things including the font(s) used. For example, in my test on Win 7, Firefox shows a bet with dagesh in all black, whereas Chrome and IE show a black bet with a red dagesh that is badly or very badly displaced.

There is no reason why your approach would not work. Neither is there any specification requiring that it should work. Browsers (and other rendering software) can display the combination using a single precomposed glyph, in which case the glyph will obviously be in one color. They can also display the base character and the diacritic mark separately; this could result in the desired rendering, but positioning a diacritic mark is a real challenge, and browsers often fail.

This means that you need a trick of some kind.

A relatively simple trick is to have content that has both the base character (bet in this case) and a combination of the base character and a diacritic mark (here dagesh), set different colors on them, and superimpose them so that the base character is topmost. The main objection is logical: the document then contains the base character appearing with no reason (except the visual rendering). Assuming this is acceptable, here’s how to do it:

[Code edited Dec 16, 2020, to make both of the inner elements absolutely positioned.]

<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 2

The main issue here is that when you wrap the dagesh, niqqud or other diacritic in a span (to style it) - the browser no longer knows which consonant it was attached to.

Because of this, it cannot position it correctly. For example, vav is much narrower than shin. Let's say the browser positions qamats 5px to the right when attached to a vav and 10px to the right when attached to a shin. When you wrap qamats in a span the browser does not know which consonant it is attached to and therefore does not know how far to move it to the right. So it just gives up and doesn't move it to the right at all. Hence, why, when you wrap vowels, etc in a span the position is messed up.

You can color different letters differently without messing up positioning as long as each consonant is inside the same span as any any attached vowels / diacritics. You can also color the first letter (including its vowel) differently using the ::first-letter CSS selector.

Finally, you can use a layering approach as discussed in Jukka's answer when a consonant and its attached diacritics need to be colored differently. I have added a more thorough example to my code snippet.

I tried with SVGs to see if they offered a better solution. But SVG's suffer from the exact same problem.

PS Can you spot the deliberate spelling mistake in shalom? :D (AKA I cannot be bothered to fix it)

.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

This will work:

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

tested on chrome and firefox, if its red you want the dot instead of green just change the green to red

the font size is at 12 just to make it visible, you can remove that also

http://i.imgur.com/smkx3MN.png - Screenshot for how it looks for me