Web browser testing for Unicode Hebrew and CSS @font-face: BIDI, Positioning, and Diacritical Mark Support

How to Display Unicode Hebrew with CSS @font-face

KEYING HEBREW TEXT

1) Use a Hebrew Keyboard that provides access to the full range of Hebrew diacritics, e.g. the Biblical Hebrew (Tiro) Keyboard. The default X11 distribution for Linux contains a Biblical Hebrew layout. Windows and Mac users must download and install a layout (Macintosh, Windows). Instructions for setting up a keyboard are here.

2) Justify Hebrew punctuation at the end of a paragraph by typing the RTL (Right-To-Left text) control mark at the end of your paragraph. To do so, type "CTRL-ALT 9" with your Hebrew keyboard.

3) Ensure proper diacritical positioning by following the common standard for keying Hebrew text with diactirics.

  1. Type the letter
  2. Then, type the dagesh, mapiq, or shin/sin dot
  3. Finally, type the vowel and or cantillation mark.

NOTE: some browsers still fail to correctly position diacritics. See the browser test results to see which ones are failing.

FONT

1) Download one or more Unicode Hebrew fonts that support the full range of Masoretic Hebrew diacritical marks (vowels/niqqud, cantillation/ta'amim, and punctuation). We recommend EzraSIL SR by SIL. The Culmus Project also has four fonts that support all diacritics: Taamey Frank CLM, Taamey David CLM, Keter YG, and Keter Aram Sova.

2) Convert your Unicode Hebrew font from its native format (e.g., TTF) to a number of webfont formats: EOT, WOFF, and SVG. To save you the trouble, I've converted the EzraSIL SR font for you to download.

3) Optional: create a "fonts" directory in your website to upload your fonts to.

HTML HEADER

1) Include the following header information in your webpage to tell your browser you will be using XHTML and to display text as UTF-8: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

2) Create a font-family for your Unicode Hebrew font in your CSS with @font-face. This best practice was first published at Fontspring. (NOTE: in the example below, I've set a font directory in the root of my directory tree: /fonts/ .) 

@font-face {
	font-family: 'Ezra SIL SR';
	src: url('fonts/ezrasilsr-webfont.eot?#iefix') format('embedded-opentype'),
	     url('fonts/ezrasilsr-webfont.woff') format('woff'), 
	     url('fonts/ezrasilsr-webfont.ttf')  format('truetype'),
	     url('fonts/ezrasilsr-webfont.svg#EzraSILSR') format('svg');
	}
3) Option 1: Create a class to display your Unicode Hebrew with your font-family in your CSS. 

.ezra {
	font-family: 'Ezra SIL SR';
	direction:rtl;
	text-align: right;
	}
4) Option 2: if you will only be using one Hebrew font on your site, instead of making a CSS class for each Hebrew font, you can always tie the font to the lang attribute. In the example below, I've set all the known open source and Unicode Hebrew fonts supporting the full range of Hebrew diacritics. 

:lang(he) {
    direction:rtl;
    font-family:'Ezra SIL SR', 'Taamey Frank CLM', 'Taamey David CLM', 'Keter YG', 'Keter Aram Sova', 'Ezra SIL', 'Cardo', serif;
	}

HTML BODY

Declare your text as Hebrew using the "xml:lang" and "lang" attributes in your <span> or <div>. Most of the common questions for Hebrew and Bidirectional text are answered in the W3C document "Authoring HTML: Handling Right-to-left Scripts."

Here is an example when including text inline with English text: 

Hello World, <span xml:lang="he" lang="he" class="ezra">שָׁלוֺם עוֺלָם</span>.
Hello World, שָׁלוֺם עוֺלָם.
Here is an example for displaying Hebrew text all on its own: 

<div class="ezra"><span xml:lang="he" lang="he">שָׁלוֺם עוֺלָם</span></div>
שָׁלוֺם עוֺלָם

You can make the Hebrew text larger by adding a font-size style: 

<div class="ezra"><span style="font-size: x-large" xml:lang="he" lang="he">שָׁלוֺם עוֺלָם</span></div>
שָׁלוֺם עוֺלָם

SVG and CSS @font-face

The formatting for CSS @font-face within SVG files is a little different than in HTML. I find it helpful to create my SVG image in an SVG editor like InkScape, and then to edit the source with my @font-face style.

Note below that the name of the font-family (Ezra SIL SR) is formatted slightly differently than the "font id" (EzraSILSR) in the url. This different reflects the name of the font-family and font id in the Ezra SIL SR svg file. 

<style type="text/css">
      <![CDATA[
        @font-face {
          font-family: 'Ezra SIL SR'; 
          font-weight: normal;
          font-style: normal;
          src: url("http://aharon.varady.net/browser-test/fonts/ezrasilsr-webfont.svg#EzraSILSR") format("svg")
        }
      ]]>
</style>
To see the source of the SVG file below, click here.

שָׁלוֺם עוֺלָם

If the SVG rendered text above has diacritical mark positioning errors or isn't displaying the same way as the reference image below, it's because some browsers still fail to correctly position Hebrew diacritics in SVG files with CSS @font-face. See the browser test results to see which ones are failing.

שָׁלוֺם עוֺלָם

HOME: Browser Tests

Hebrew font Browser Test version 0.70 by Aharon Varady for The Open Siddur Project (November 2011).

Please help to improve these tests. All source for this page that might be protected under copyright, is shared with a CC-BY-SA 3.0 Unported license.

Valid XHTML 1.0 Transitional