Movable Type and RTL languages

Comments (0)

I'm working on an international site built in Movable Type and including statements in multiple languages, including "Right to Left" languages like Arabic and Hebrew.

I was pleasantly surprised when I cut-and-pasted an Arabic text from MS Word into Movable Type and found the letters looking good both in the MT entry box and the resultant post. I didn't realize just how powerful UTF-8 encoding is and how well MT supports it throughout the system. Still, the output wasn't correct, as it wasn't displayed in right-to-left fashion. I needed to figure out the CSS for this kind of output and an easy way to allow the client to set this without forcing them into coding.

Using the highly-recommended Rightfields Plugin I added a checkbox field for posts that should be displayed in RTL. Here's a screenshot:

RightFields has an IF function that we can use to set a new DIV with our RTL style. Here's the coding in the MT template, stuck in just after the "entry-body" div:

<MTExtraFields>
<MTIfExtraField field="RTL">
<div class="rtl-display">
</MTIfExtraField>

Note: you'll also have to add similar code to close the div at the end of the passage.

Finally, as best as I can determine, this is the proper CSS designation for RTF display (Microsoft has a good webpage on this). It works in Firefox, IE7 and IE6.

.rtl-display p {direction:rtl;text-align:justified;text-align:justify;}

I'd be happy to get any feedback or corrections to this. I'm a typical 'Merican whose foreign language skills don't go far past a dozen phrases lifted from Sesame Street and long-ago French classes. Arabic and Hebrew typesetting are quite unfamiliar terrain.

Leave a comment

Martin icon About Martin How I got into web design and why I love to help people communicate online. Also available: my resume, my workshops and publications list, a list of organizations I've worked with, and of course a portfolio of recent work.

ShortCut

Shortcut cover
Web 2.0 Mash-Ups & Niche Aggregators, just published by O'Reilly Media. Order here.

Other Sites

Social Networks



Alternative chat:
Full page chat