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

To see these tests with more documentation on separate pages, see here.

The following tests help identify errors in the way web browsers are rendering Hebrew with or without CSS @font-face. In particular, I'm interested in which browsers are failing basic unicode and bidirectional text support for Right-To-Left (RTL) languages like Hebrew, and which browsers are not yet fully supporting unicode (UTF-8) Hebrew fonts with CSS @font-face. I wrote these tests to aid web browser developers test their browser and web developers test the platforms for their web applications.

To see a chart listing how well each browser supports unicode Hebrew with CSS @font-face, see here.

If you are looking for the Open Siddur unicode and open source font pack, see here.
If you are looking for instructions on how to set up your keyboard and fonts to type in Hebrew, see here.

1. Baseline Informational Tests

These tests provide you, the user with some helpful basic information as to the default configuration of your browser and possibly your system.

1a. Default Character Encoding and BIDI (bi-directional) Text

This is a baseline informational test. The test should reveal whether your browser is configured to use UTF-8 as your default character encoding, or whether it is set as ISO-8559-1 or some other encoding. The test uses iframes to display plaintext Hebrew encoded in UTF-8.
In the following iframe, there is no Content-Type header informing the browser to specifically use unicode. So, if the following looks like gibberish, then your browser either does not have UTF-8 set as the default character encoding or something else is amiss.

Compare the above with the following text in which the Content-Type is declared as plaintext UTF-8 in an .htaccess file, thus telling the browser to display the text as UTF-8.

1b. Default Browser Font

This is a baseline informational test. The test should reveal what font Hebrew will be displayed by default in the web browser when it encounters UTF-8 Hebrew defined as such in the Page Source. As a baseline, this test should indicate what the default font (if any) is set for viewing Hebrew text in your browser without invoking CSS @font-face. If you see any empty rectangles or other generic space marks in the text below, you may want to change the default browser font to one that is known to support the positioning of the full range of Hebrew Diacritics (e.g. Ezra SIL SR, Cardo, Taamey Frank CLM, Taamey David CLM, Keter YG, or Keter Aram Sova). Click here to see the settings to change in Firefox's about:config.

Browser default Hebrew without any diacritical marks

לכן חכו לי נאם יהוה ליום קומי לעד כי משפטי לאסף גוים לקבצי ממלכות לשפך עליהם זעמי כל חרון אפי כי באש קנאתי תאכל כל הארץ

Browser default Hebrew with diacritical marks (vowels only)

לָכֵן חַכּוּ לִי נְאֻם יְהוָה לְיוֹם קוּמִי לְעַד כִּי מִשְׁפָּטִי לֶאֱסֹף גּוֹיִם לְקָבְצִי מַמְלָכוֹת לִשְׁפֹּךְ עֲלֵיהֶם זַעְמִי כֹּל חֲרוֹן אַפִּי כִּי בְּאֵשׁ קִנְאָתִי תֵּאָכֵל כָּל הָאָרֶץ.‏

Browser default Hebrew with diacritical marks (vowels and cantilation)

לָכֵ֤ן חַכּוּ־לִי֙ נְאֻם־יְהוָ֔ה לְי֖וֹם קוּמִ֣י לְעַ֑ד כִּ֣י מִשְׁפָּטִי֩ לֶאֱסֹ֨ף גּוֹיִ֜ם לְקָבְצִ֣י מַמְלָכ֗וֹת לִשְׁפֹּ֨ךְ עֲלֵיהֶ֤ם זַעְמִי֙ כֹּ֚ל חֲר֣וֹן אַפִּ֔י כִּ֚י בְּאֵ֣שׁ קִנְאָתִ֔י תֵּאָכֵ֖ל כָּל־הָאָֽרֶץ׃

2. CSS @font-face tests

If the browser renders the following unicode Hebrew fonts using CSS @font-face, the browser passes this test. Results are shown in the table below.

2a. Diacritical Mark Positioning Test

This test uses CSS @font-face with Ezra SIL SR. Ezra SIL SR correctly supports cantillation marks (ta'amim) and vowels (niqqudot). In this test, look carefully to see whether the niqqud are correctly positioned under the letters and that the dagesh is correctly positioned inside letters (rather than offset). If diacritics are correctly positioned then this test is indicated with a PASS (otherwise it FAILS).

CSS @font-face (Ezra SIL SR) without any diacritical marks

לכן חכו לי נאם יהוה ליום קומי לעד כי משפטי לאסף גוים לקבצי ממלכות לשפך עליהם זעמי כל חרון אפי כי באש קנאתי תאכל כל הארץ

CSS @font-face (Ezra SIL SR) with diacritical marks (vowels only)

לָכֵן חַכּוּ לִי נְאֻם יְהוָה לְיוֹם קוּמִי לְעַד כִּי מִשְׁפָּטִי לֶאֱסֹף גּוֹיִם לְקָבְצִי מַמְלָכוֹת לִשְׁפֹּךְ עֲלֵיהֶם זַעְמִי כֹּל חֲרוֹן אַפִּי כִּי בְּאֵשׁ קִנְאָתִי תֵּאָכֵל כָּל הָאָרֶץ.‏

CSS @font-face (Ezra SIL SR) with diacritical marks (vowels and cantilation)

לָכֵ֤ן חַכּוּ־לִי֙ נְאֻם־יְהוָ֔ה לְי֖וֹם קוּמִ֣י לְעַ֑ד כִּ֣י מִשְׁפָּטִי֩ לֶאֱסֹ֨ף גּוֹיִ֜ם לְקָבְצִ֣י מַמְלָכ֗וֹת לִשְׁפֹּ֨ךְ עֲלֵיהֶ֤ם זַעְמִי֙ כֹּ֚ל חֲר֣וֹן אַפִּ֔י כִּ֚י בְּאֵ֣שׁ קִנְאָתִ֔י תֵּאָכֵ֖ל כָּל־הָאָֽרֶץ׃

Reference Image


2b. Diacritical Mark Error Reporting Test

This test uses CSS @font-face with Miriam CLM. Miriam CLM was chosen to test how browsers will display a font diacritic positioning failure. Miriam CLM contains the full set of Hebrew diacritical marks, however, while it correctly supports niqqud, it's font logic currently does not support proper ta'amim positioning. If the positioning failure produces for example, tiny rectangles within the Hebrew, we indicate the failure is LOUD (rather than QUIET).

CSS @font-face (Miriam CLM) without any diacritical marks

לכן חכו לי נאם יהוה ליום קומי לעד כי משפטי לאסף גוים לקבצי ממלכות לשפך עליהם זעמי כל חרון אפי כי באש קנאתי תאכל כל הארץ

CSS @font-face (Miriam CLM) with diacritical marks (vowels only)

לָכֵן חַכּוּ לִי נְאֻם יְהוָה לְיוֹם קוּמִי לְעַד כִּי מִשְׁפָּטִי לֶאֱסֹף גּוֹיִם לְקָבְצִי מַמְלָכוֹת לִשְׁפֹּךְ עֲלֵיהֶם זַעְמִי כֹּל חֲרוֹן אַפִּי כִּי בְּאֵשׁ קִנְאָתִי תֵּאָכֵל כָּל הָאָרֶץ.‏

CSS @font-face (Miriam CLM) with diacritical marks (vowels and cantilation)

לָכֵ֤ן חַכּוּ־לִי֙ נְאֻם־יְהוָ֔ה לְי֖וֹם קוּמִ֣י לְעַ֑ד כִּ֣י מִשְׁפָּטִי֩ לֶאֱסֹ֨ף גּוֹיִ֜ם לְקָבְצִ֣י מַמְלָכ֗וֹת לִשְׁפֹּ֨ךְ עֲלֵיהֶ֤ם זַעְמִי֙ כֹּ֚ל חֲר֣וֹן אַפִּ֔י כִּ֚י בְּאֵ֣שׁ קִנְאָתִ֔י תֵּאָכֵ֖ל כָּל־הָאָֽרֶץ׃

Reference Image


Click here for more details on unicode Hebrew and free/libre licensed fonts. Miriam CLM was created by Maxim Iorsh for the Culmus Project and is licensed GPL. Ezra SIL is a font created by SIL International and is licensed OFL.

SVG Tests

In the first test, an SVG 1.1 file with machine-readable Unicode Hebrew text is shown. The generic font-family indicated for the text is Serif, and the specific font-family is the webfont, "Times New Roman." Operating systems with the Times New Roman font installed should see a perfect match. Tests fail if the font displayed in the SVGis not Serif.

In the second test, the SVG file invokes CSS 2 to render the Hebrew text with the Miriam CLM font-family. The browser rendered SVG files should match the reference images with the exception of some subtle font hinting, which SVG does not support. If the font in the SVG image does not match the reference PNG image, the browser fails.

Font SVG Image Reference Image (PNG)
Linux Libertine O
(Hebrew charset)
Miriam CLM

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