How to Use Greek and Hebrew in Blog Posts

If you use Greek and Hebrew in your blog posts, here’s a tip that will help you make it look good and give you the ability to make changes across your entire site in just a few seconds. There are two main things you need to do.

Step 1: Add Styles to Your Style Sheet

The first thing you need to do is find your style sheet. Your style sheet is the global control for how your site looks—text, colors, images, and more. If you’re familiar with creating styles in a word processing program like Microsoft Word, then you already understand the concept. You create and define a style, apply it to various units of text, and then when you edit that style in your style sheet, all of the text tagged with the style is instantly updated.

Find Your Style Sheet

If you use the self-hosted version of WordPress, you can find your style sheet in the admin panel by going to Appearance > Editor. Your style sheet is most likely named style.css. Click on it to load it, and then scroll to the bottom to add your new styles.1 You can access your style sheet via FTP2 by going to /public_html/wp-content/themes/{your-theme-name}/style.css. I typically use Dreamweaver to open and edit my style sheet. Other blogging platforms should be pretty similar.

Add Your New Styles

After you’ve found your file, you’ll want to add something like this at the bottom:

/* My Custom Styles */

:lang(el) { font-family: Gentium; font-size: 15px; }

:lang(he) { direction: rtl; font-family: "SBL Hebrew"; font-size: 19px; }

There are at least four different ways to mark up your Greek and Hebrew text using CSS, but W3C recommends the method I’ve chosen.

Choose Your Fonts

Gentium is a very nice free polytonic Unicode Greek font with excellent character support, but you can use a different one if you want (see my list of polytonic Unicode Greek fonts). SBL Hebrew is my favorite Unicode Hebrew font by far, but there are several other decent options (e.g., Cardo, Ezra SIL, Tahoma, Times New Roman, and TITUS Cyberbit Basic). If your readers don’t have the font you’ve chosen, their browser will default to a font that supports the Unicode characters you’ve used. In most cases, your readers should have at least one Unicode font that supports Greek and one that supports Hebrew. If you want to get specific and not leave it up to your readers’ browser to decide which font to use if they don’t have the one you’ve selected, you can use a font stack. Just add additional fonts to fall back to after your first choice. With a font stack, it would look something like this:

:lang(el) { font-family: Gentium, "SBL Greek", Cardo, "Palitino Linotype"; font-size: 15px; }

:lang(he) { direction: rtl; font-family: "SBL Hebrew", "Ezra SIL", Cardo; font-size: 19px; }

Choose Your Font Sizes

Proportionate

One thing that many people fail to do when using Greek and Hebrew fonts is to adjust their size so that they are proportionate to the English font. As much as possible, your short Greek letters (i.e., α, γ, ε, η, ι, κ, μ, ν, ο, π, ρ, σ, ς, τ, υ, φ, χ, ψ, and ω) should be about as tall as your short English letters (i.e., a, c, e, g, i, j, m, n, o, q, r, s, u, v, w, x, y, and z), and your tall Greek letters (i.e., β, δ, ζ, θ, λ, ξ, and capital letters) should be as tall as your tall English letters (i.e., b, d, f, h, k, l, t, and capital letters). The same goes with Hebrew. Your Hebrew letters (א ,ב ,ג ,ד ,ה ,ו ,ז ,ח ,ט ,י ,כ ,מ ,נ ,ס ,ע ,פ ,צ ,ק ,ר ,שׂ ,שׁ ,ת) should be as tall as your tall English letters (not as tall as your short English letters, which is far too common!). The exception is ל, which will protrude above your English letters.

Fixed vs. Variable

Instead of defining a particular pixel size for your style, you may instead want to use a percentage like 110% for Greek and 150% for Hebrew. I originally took this approach but ran into problems when making bold Greek text within a larger selection of Greek text. The bold Greek text was becoming 110% bigger than the non-bold Greek text, making it 121% larger than English text instead of 110%.3 So I opted for the fixed-pixel size instead. The only occasion where this might cause you problems is if you want to use Greek in something other than body text where you’re dealing with a larger or smaller font size (e.g., headings or perhaps blockquotes). But there’s an easy workaround for this. Just create a separate class (or separate classes) and apply them as needed.

Step 2: Apply Styles to Your Text

Now that you’ve set up your styles, you’ll need to apply them to your Greek and Hebrew text. We’ll look at how to apply them to future posts you write and how to go about updating your Greek and Hebrew in old posts.

Future Posts

Anytime you use Greek, you’ll want to wrap it in a span tag and simply define the language as Greek. So if you use θεός, you’d want to switch to the HTML or code view (rather than the Visual or WYSIWYG view) and make it look like this:

<span lang="el">θεός</span>

If you had some Hebrew text like אֱלֹהִ֑ים, it would look like this:

<span lang="he">אֱלֹהִ֑ים</span>

This can be a little tedious to apply manually, but it’s worth it to be able to control and style all of your Greek and Hebrew text globally. It’s possible that you could use a plugin like TinyMCE Advanced and add these as drop-down styles that could be applied by simply selecting your text and choosing the style from the drop-down menu, but that’s beyond the scope of this post.

One downside to styling your Greek and Hebrew text with CSS is that it won’t show up properly styled in your RSS feed. If that’s important to you, you could instead use inline styling:

<span lang="el" style="font-family: Gentium; font-size: 15px;">θεός</span>

<span lang="he" style="direction: rtl; font-family: "SBL Hebrew"; font-size: 19px;">אֱלֹהִ֑ים</span>

This isn’t recommended, though, because (1) it’s a lot more code (which means more time to write and more time to load the page) and (2) you lose the ability to modify the style of your Greek and Hebrew globally.

Past Posts

If you haven’t been tagging your Greek and Hebrew properly in the past and you care about having it accurately tagged, there are two ways to go about tagging it.

Manual

The first method is to go back through all your posts and manually edit each bit of Greek and Hebrew text. Depending on how many posts you have with Greek and Hebrew in them, this could take you several hours. It might be the right solution if you just have a handful, but otherwise you may want to consider the next method.

Find and Replace with Regular Expressions

It’s possible to use a regular expression to find all Greek or Hebrew text and automatically wrap it with the appropriate tags using find and replace. Keep in mind that this method will work best if you haven’t been marking up your Greek or Hebrew text at all.

My knowledge of regular expressions is pretty minimal, but I was able to come up with something that seems to work pretty well.

Greek

Here’s what a regex would look like for Greek:

Find: (([\u0374-\u03D5\u1F00-\u1FFE]+[ ]?)+([\u0374-\u03D5\u1F00-\u1FFE])|([\u0374-\u03D5\u1F00-\u1FFE]))

Replace: <span lang="el">$1</span>

It will find any Greek text in units separated by punctuation. If you want the regex to include the punctuation, you could instead use something this:

(([\u0374-\u03D5\u1F00-\u1FFE]+[,.;·]?[ ]?)+([\u0374-\u03D5\u1F00-\u1FFE][;·]?)|([\u0374-\u03D5\u1F00-\u1FFE]))

Depending on which program you’re using to do the regex find and replace, you may need to modify the format slightly. The format I used works in Dreamweaver (make sure to check the “Use regular expression” box). Some programs may require that the opening and close parentheses be forward slashes instead. So it would look like this:

/([\u0374-\u03D5\u1F00-\u1FFE]+[ ]?)+([\u0374-\u03D5\u1F00-\u1FFE])|([\u0374-\u03D5\u1F00-\u1FFE])/

Hebrew

Here’s what a regex would look like for Hebrew:

Find: (([\u0590-\u05FF]+[ ]?)+([\u0590-\u05FF])|([\u0590-\u05FF]))

Replace: <span lang="he">$1</span>

Tools

If you want to use these regular expressions to make global changes (i.e., without manually accepting each change), you’ll want to make sure to back up your database first. You’ll also want to acquaint yourself with emptying tables in a database and importing tables into a database using phpMyAdmin—just in case something goes wrong. Once you’ve backed up your database, you could run the query right in phpMyAdmin, but that’s something I’ve not explored. Another option is to use the Search and Replace plugin for WordPress, which supports regular expressions. Perhaps the best option is to export your database (or just the posts table), edit it locally using a text or HTML editor that supports regexes, empty your table in your live database, and then import the updated table back into your database.

1. Some themes provide you with a secondary style sheet for adding your custom styles so you don’t lose them when you upgrade your theme. In these cases, you might be looking for a custom.css file instead. [↩]
2. FileZilla is a good free FTP client for Windows. [↩]
3. The same problem exists when using ems. Cf. this article on using points, pixels, ems, or percentages. [↩]