Coloring Hebrew Vowels and Accents in HTML/CSS

May 18, 2013 | Bible Tools, HTML/CSS, JavaScript | 13 Comments

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 אֱלֹהִיםאלה֤יםאֱלֹהִיםאלהים
macchrome-default pcchrome-default macfirefox-default ie-default
Ezra SIL
Original אֱלֹהִ֤ים
Span Colors אֱלֹהִ֤ים
Single Layer אֱלֹהִ֤יםאֱלֹהִ֤יםאלהים
Double Layer אֱלֹהִיםאלה֤יםאֱלֹהִיםאלהים
macchrome-ezra pcchrome-ezra macfirefox-ezra ie-ezra
SBL Hebrew
Original אֱלֹהִ֤ים
Span Colors אֱלֹהִ֤ים
Single Layer אֱלֹהִ֤יםאֱלֹהִ֤יםאלהים
Double Layer אֱלֹהִיםאלה֤יםאֱלֹהִיםאלהים
macchrome-sbl pcchrome-sbl macfirefox-sbl ie-sbl
Arial
Original אֱלֹהִ֤ים
Span Colors אֱלֹהִ֤ים
Single Layer אֱלֹהִ֤יםאֱלֹהִ֤יםאלהים
Double Layer אֱלֹהִיםאלה֤יםאֱלֹהִיםאלהים
macchrome-arial pcchrome-arial macfirefox-arial ie-arial

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!

13 Responses to “Coloring Hebrew Vowels and Accents in HTML/CSS”

  1. Chris Adams says:

    Have you looked at the HTML ruby system? http://dev.w3.org/html5/spec/text-level-semantics.html#the-ruby-element

    It’s traditionally considered a feature for Chinese & Japanese but I believe it’s flexible enough to support your uses as well.

    • johndyer says:

      Yes, I love the Ruby system. It’s great for Asian languages as you mentioned as well as producing things like Interlinear Bibles (where Greek and Hebrew words appear above English or vice versa). However, as far as I know, Ruby isn’t designed for semitic languages like Hebrew and Arabic. They have their own complex system of glyphs and ligatures which position symbols like vowels and accents above and below letters as well as transform the consonants based on their contextual position. But it appears that attempting to mix colors disrupts that system. But like you mentioned, I could try using Ruby to produce the same layered effect, and it might offer a slightly more semantic approach.

  2. gigi says:

    I ask some help to figure out how to work with your player but I saw that you spend your time playing with “Seminary” stuff. As much as I acknowledge the hebrew word for the name of GOD is not the best example of an experience with letters, vowels, colors … and lack of direction to produce something more productive in live…. I am sorry……….

  3. Today, I went to the beachfront with my kids. I found a sea
    shell and gave it to my 4 year old daughter and
    said “You can hear the ocean if you put this to your ear.” She put the shell to her ear and screamed.

    There was a hermit crab inside and it pinched
    her ear. She never wants to go back! LoL I know this is
    totally off topic but I had to tell someone!

    Also visit my site: root htc one mini

  4. pujapuja says:

    Cakes are the most important choices for celebrating occasions like Birthdays, Weddings, success and many other special days. Now you can Send Cakes to Hyderabad with the impressive network and astonishing services of this online Cakes store that has so many sections containing such a great variety of Cakes.

  5. Holland: Tulip City, Michigan is a cultural feast of
    events: dance, art, music and historic Hope College right downtown.
    Do not make the mistake of cutting down the tree yourself or hiring a
    regular tree removal company to do the job. These baits range from chicken blood to old moldy bread being used.

    Feel free to surf to my web site … used marine triangle dock box for sale

  6. When you are fly fishing, the quality and weight of the line (and rod) allows
    you to make accurate casts. It”s tough to keep things dry on a center console boat. I remember being very careful never to rub my paddle against the gunwale for fear of disturbing the stillness of the cathedral.

    My web page :: marine refrigerator foundation insulation panels

  7. Site content allows businesses to target specific viewers, which in turn increase
    sales. Article Source: Ventures provides content marketing and marketing
    analytics services to cost effectively drive local clients to your site.
    Obtaining and maintaining top ranking on search engines requires lots of hard work and experience.

    Also visit my blog … delray beach social media marketing agency

  8. It is completely safe and found to be very helpful in solving problems like
    thinning hair and scalp problems. Relying of which part of the body treatment methods are essential on, will cause costing in order to alter enormously.
    Many people take biotin supplements after weight loss surgery, hoping that will prevent hair loss, but the Linus Pauling Institute website states there is no evidence at all that taking extra biotin will prevent hair
    loss or make hair grow back faster.

    Look into my page: skin care Products Dermatologist

  9. Most said their weight loss did not slow down as much.
    Slowly introduce sugars in moderate quantities back into your diet.
    Go ahead and find out if you’re pregnant early;
    you will be glad you did.

    my web-site hcg weight Loss cost

  10. bcsl.info says:

    The stamps are valid for 3 months over the summer.
    Then, we’re abc going to have a statement from the
    Royal Mail website. Hirschman was inclined toward a
    kind of deep justification or deep criticism of the inequality structure.
    Regardless of whether you have an online business and you
    choose to mail your return, go to your bank. Ignoring the problem will not work.
    If you’re talking about stereotypes throughout history, liberals and Democrats have always
    been the party that can’t be abc solved by higher taxes.

  11. Hi mate, awesome blog. I’m sorry if this isn’t the most appropriate place to message you but i couldn’t find another way. Over the few years i have been extremely passionate about building a network of great mentors. If you think it might be something you could do, check out the site, sign up, i’d be happy to skype you and run through it, i know this might seem spammy but i’m not really sure the best way to contact you.

Leave a Reply

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by AB-WebLog.com.