Coloring Hebrew Vowels and Accents in HTML/CSS

In a recent conversation with a Hebrew professor, we discussed adding color to Hebrew vowels and accents. If you’re unfamiliar, Hebrew is different from most Western languages in two main ways. First, it reads right to left (or rtl in HTML terms) and second vowels are represented as dots and lines that can be above or below the consonants.
Browsers seem to handle the rtl part pretty well, but they don’t do an awesome job with the vowel points. And for teaching purposes, it’s very hard to make the vowels a different color from the consonants. Below are a few attempts to do this using various combinations of HTML and JavaScript.

Standard Hebrew Text vs. Pointed Text

In the table below, you can see what Hebrew text looks like with and without vowels. Unlike English, when you remove the vowels the word still takes up the same amount of space.

	Hebrew	English
Consonants Only	אלהים	lhm
With Vowels	אֱלֹהִים	elohim

Coloring Individual Vowels

The first thing I wanted to try was adding <span> tags around vowels and coloring them differently. In the markup below you’ll see the letters pulled out of order with the English HTML, but it’ll give you an idea of what we’re trying to do.

Markup

א<span class="hebrew-vowel">ֱ</span>ל<span class="hebrew-vowel">ֹ</span>ה<span class="hebrew-vowel">ִ</span><span class="hebrew-accent-minor">֤</span>ים

CSS

.hebrew-vowel {
	color: #ff0000;
}
.hebrew-accent-minor, .hebrew-accent-major {
	color: #00ff00;
}

Demo

	Hebrew	English	Result
Original	אֱלֹהִ֤ים	elohim	Correct in all browsers
Span Colors	אֱלֹהִ֤ים	elohim	Chrome/Safari: colored, but misaligned. Firefox/IE: aligned, but not colored

Results

In the example above if you’re using a Webkit based browser on a Mac, you’ll see nice red vowels and green accents. The only problem is that – depending on the font – the vowels are often shifted of place.
However, if you’re using Firefox or Internet Explorer, the vowels and accents stay in the right place, but apparently Firefox and IE can’t color them – they just stay black and ignore the CSS color. Lastly there is the strange case of PC/Chrome which renders the vowels as as standalone entities with an outline for the missing consonants (see screenshots at the end).

Layering Vowels with Absolute Positioning

Since Chrome can’t keep the vowels correctly aligned and Firefox and IE can’t color the vowels, I decided to try to layer the text using absolute positioning. In the example, I’ve tried putting the accents and vowels on a single layer and splitting them into two layers with different colors.

1. Transparent: The bottom layer is the original text used to correctly size the outer span tag
2. Green: The second layer has vowels removed and only leaves consonants and accents
3. Red: The third layer has consonants removed and only leaves consonants and vowels
4. Black: The top layer has only consonants layered on top of the colored layers below

Markup

<span class="hebrew-layers">
	<span class="hebrew-layers-original">אֱלֹהִים</span>
	<span class="hebrew-layers-accents">אלה֤ים</span>
	<span class="hebrew-layers-vowels">אֱלֹהִים</span>
	<span class="hebrew-layers-consonants">אלהים</span>
</span>

CSS

.hebrew-layers {
	display: inline-block;
	position: relative;
}
.hebrew-layers .hebrew-layers-original {
	color: transparent;
}
.hebrew-layers .hebrew-layers-vowels {
	position: absolute;
	top: 0;
	right: 0;
	color: #ff0000;
}
.hebrew-layers .hebrew-layers-accents {
	position: absolute;
	top: 0;
	right: 0;
	color: #00ff00;
}
.hebrew-layers .hebrew-layers-consonants {
	position: absolute;
	top: 0;
	right: 0;
	color: #000000;
}

Demo: Layering

Style	Demo	Result
Original	אֱלֹהִ֤ים	Correct in all browsers.
Span Colors	אֱלֹהִ֤ים	Chrome/Safari: colored, but misaligned. Firefox/IE: aligned, but not colored
Single Layer	אֱלֹהִ֤יםאֱלֹהִ֤יםאלהים	Mostly works. Webkit often misaligns.
Double Layer	אֱלֹהִיםאלה֤יםאֱלֹהִיםאלהים	Mostly works, but messes up accent/vowel pairs

Results

In this case, all browsers (including Firefox and IE) are now able to render different colors for the consonants and vowels. And, for the most part, they all put them in the right place.
There are, however, two problems. First, is that while IE and Firefox render things perfectly almost all the time, Chrome doesn’t always keep the consonants in the same position across layers and that creates what looks like a text-shadow effect. I love using and developing in Chrome, and this is one of the few ares I’ve ever found Chrome/Webkit to be the worst in an area (Chrome 26 vs. IE 10 vs. Firefox 21).
The second problem is a bit more obscure. Even in browsers that render more consistently (IE and Firefox), the layered solution isn’t perfect if you want a different color for accents and vowels. The reason is that the vowel and accent positions change depending on if a consonant has only a vowel, only an accent, or both an accent and a vowel. You can see this on the middle letter where the red dot [hiriq] and green arrow [yetiv] change positions in the two layers example. Since the accents are typically bigger I put them in a layer underneath the vowel point so the vowel would show up more clearly on top. So this effect is a kind of trade-off that may or may not be worth it depending on your teaching or reading goals.

Font Demos

While Chrome is by far the worst at rendering the layers consistently, all browsers have trouble at times with some popular Hebrew fonts. Below I’m including some popular ones (Ezra SIL and SBL Hebrew) with screenshots of how they render. At the end, there is a demo of an entire verse where problems are even more frequent.

Browser Font Matrix

	Your Browser	Mac/Chrome	PC/Chrome	Mac/Firefox	PC/IE
Default Font	Original אֱלֹהִ֤ים Span Colors אֱלֹהִ֤ים Single Layer אֱלֹהִ֤יםאֱלֹהִ֤יםאלהים Double Layer אֱלֹהִיםאלה֤יםאֱלֹהִיםאלהים
Ezra SIL	Original אֱלֹהִ֤ים Span Colors אֱלֹהִ֤ים Single Layer אֱלֹהִ֤יםאֱלֹהִ֤יםאלהים Double Layer אֱלֹהִיםאלה֤יםאֱלֹהִיםאלהים
SBL Hebrew	Original אֱלֹהִ֤ים Span Colors אֱלֹהִ֤ים Single Layer אֱלֹהִ֤יםאֱלֹהִ֤יםאלהים Double Layer אֱלֹהִיםאלה֤יםאֱלֹהִיםאלהים
Arial	Original אֱלֹהִ֤ים Span Colors אֱלֹהִ֤ים Single Layer אֱלֹהִ֤יםאֱלֹהִ֤יםאלהים Double Layer אֱלֹהִיםאלה֤יםאֱלֹהִיםאלהים

Full Sentence Demo

I have this running in a Bible application:
Bible Web App: Hebrew style
And here is entire Hebrew sentence marked up in all the styles:

Original	וְהָאָ֗רֶץ הָיְתָ֥ה תֹ֙הוּ֙ וָבֹ֔הוּ וְחֹ֖שֶׁךְ עַל־פְּנֵ֣י תְה֑וֹם וְר֣וּחַ אֱלֹהִ֔ים מְרַחֶ֖פֶת עַל־פְּנֵ֥י הַמָּֽיִם׃
Span Colors	וְהָאָ֗רֶץ הָיְתָ֥ה תֹ֙הוּ֙ וָבֹ֔הוּ וְחֹ֖שֶׁךְ עַל־פְּנֵ֣י תְה֑וֹם וְר֣וּחַ אֱלֹהִ֔ים מְרַחֶ֖פֶת עַל־פְּנֵ֥י הַמָּֽיִם׃
Double Layered	וְהָאָ֗רֶץוְהָאָרֶץוהא֗רץוהארץ הָיְתָ֥ההָיְתָההית֥ההיתה תֹ֙הוּ֙תֹהוּת֙הו֙תהו וָבֹ֔הוּוָבֹהוּוב֔הוובהו וְחֹ֖שֶׁךְוְחֹשֶׁךְוח֖שךוחשך עַלעַלעלעל־פְּנֵ֣יפְּנֵיפנ֣יפני תְה֑וֹםתְהוֹםתה֑וםתהום וְר֣וּחַוְרוּחַור֣וחורוח אֱלֹהִ֔יםאֱלֹהִיםאלה֔יםאלהים מְרַחֶ֖פֶתמְרַחֶפֶתמרח֖פתמרחפת עַלעַלעלעל־פְּנֵ֥יפְּנֵיפנ֥יפני הַמָּֽיִםהַמָּֽיִםהמיםהמים ׃

 

Conclusion

Right now, it seems there isn’t a perfect HTML/CSS way of colorizing the Hebrew pointing system, but the layering solution seems best for making it work across browsers as long as you don’t mind the accents being slightly out of place.
If you have any other ideas, please let me know!