How to Change RTL CSS to Get Right to Left Website

There are a few different reasons why someone would need to use RLT CSS layouts. Most commonly developers are attempting to setup a site that will use a language that displays text in something other than the Roman alphabet. Many languages are read from right-to-left, but there are a precious few reasons why someone might want to mirror Roman or perhaps Greek text as well. A few basic commands should help anyone support different character sets.

Mirroring Western Scripts

Those who want to use a css dir rtl command to mirror Roman text won’t need the same kinds of support that other individuals might. Consider the following code snippet:

.cssClassName { direction:rtl; unicode-bidi:bidi-override; }

Setting this as part of a class structure should generally be sufficient to directly display left-to-right languages based on the Roman or Greek alphabets in a mirror image. This type of layout display overrides the prevailing direction and produces text similar to this:

  • ti si sihT
  • Instead of “This is it”.

Genuine RTL Layouts

A genuine CSS RTL configuration will take a bit more code. Assuming that character support for Arabic, Hebrew or another language is already configured on the client browser that will be loading the CSS page, the Web developer can use the following line of code as part of their style sheet:

.reversed {
direction: rtl; unicode-bidi: bidi-override;

Nevertheless, there are a few other options available to them. Some newer browsers can support character flipping through Unicode, and thus an RLT CSS code segment like follows could be used if considering compatibility only with newer browsers:

  • direction: rtl;
  • unicode-bidi:bidi-override;
  • Internet Explorer’s Trick.

Those who want to delve even deeper into the CSS RTL realm can look at a piece of code that will only really load correctly on various distributions of Internet Explorer. This method is possibly going to die off, considering that Microsoft announced an end to support for the platform, but it should still work in the meantime. Those who want to develop a style sheet around this should consider the following:

<div style="width: 300; height: 50; font-size: 12pt; font-family: FONT NAME; color: red; Filter: FlipH">CSS Tutorials</div>

Naturally the text “FONT NAME” should be replaced with whatever typeface is genuinely desired.

Character Set Reproduction

Developers have another concern outside of the realm of the css dir rtl style sheet command structure. Client computers often can’t display text in character sets that they weren’t configured to display. Browsers generally prompt people to download a font if they have difficultly displaying text, which they may be unwilling or unable to do. It’s important to communicate with readers to make sure that text displays correctly, and contract with professional technicians to ensure that things are programmed correctly.

In case you would like to fresh up your knowledge of building a rtl website, check out our recent post. If you are interested in professional wordpress design services, this information might also come in handy.