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

Varien

What is the Browser you're using? in Chrome 39 it looks fine. – Tayyebeb

Not working in firefox 34 for me – Whoopee

I'm using Chrome39. And the dagesh is outside the letter Bet and I don't know how to make it being INSIDE it and have different style – Varien

I've also added a bigger-font link to make it more clear jsfiddle.net/nv7ja459/1 – Varien

Can you maybe post an image of what it should look like and what it's looking like incorrectly, so we all know what's the desired and incorrect case? Because in Chrome 39 for me it looks to be inside the Bet, as you're desiring. – Theoretics

Here is how it looks at my PC drive.google.com/file/d/0B4SYIrNV4hXYZ0ZyWXZnZWg4OGc/… – Varien

Maybe it depends on OS/fonts installed as well... Hmmm. My OS is Windows XP SP3 – Varien

Wow, some weird effects indeed. This fiddle shows wildly different results in Chrome, Firefox, and IE11 for me (Win 8.1). Do my images correspond to your findings @leokom? – Herman

Yes really unreliable :( In Firefox my fiddle jsfiddle.net/nv7ja459/1) shows dagesh INSIDE bet but WITHOUT color change! – Varien

Answer 1

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>

Naxos

Thank you :) Yes I could spot the 'shaloom' instead of 'shalom' :) – Varien

Most excellent details for Hebrew letters. I assume this example will work fine with ShlomoSemiStam.ttf – Alarise

@Alarise yes this should work with all fonts, although it works better with some fonts than others - e.g. the letter ayin with a vowel underneath looks slightly different than the letter ayin without a vowel for some fonts, most letters however are exactly the same with or without a vowel – Naxos

this actually is a subject very close to my heart - i wish i had time to write an app around this - sadly being a web developer, which consumes most my time, I don't think that will happen in this lifetime - O well, Elohim tov – Naxos

Answer 2

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>

Maypole

Nice trick! For sure it's counter-semantical, but it really works, and until we find a more logical solution : it's great! – Varien

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

https://i.sstatic.net/UjOaV.png - Screenshot for how it looks for me

Induction

Unfortunately at my PC the dagesh is still outside of the letter. So I have a big feeling it really depends on OS/fonts installed – Varien

in which case, you can use css positioning to reposition it, but doing this will most likely mess it up on other computers / screen sizes – Induction

Indeed! CSS positioning would help if the rendering is syncrhonously wrong, but if differs depending on OS/browser/fonts/whatever, it will be a mess... – Varien

Here it is: drive.google.com/file/d/0B4SYIrNV4hXYZzlydGV1SURrMlU/… – Varien