Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

text-align: start & RTL

By  on  

As you've probably heard me mention a billion times on Twitter, I've been proudly work on the Mozilla Developer Network revamp.  This is my first real experience with working on websites with a fair amount of RTL readers. One thing I quickly recognized when browsing in RTL mode was that text wasn't always lining up on the correct side -- I would see text on the left where the browser should have displayed it on the right.  After digging into the stylesheets, I saw explicit text-align:left directives and started queueing up selectors I'd need to change to text-align: right.  Before doing so, however, I took the time to research a better way...and found it quickly.

text-align: left; /* as backup */
text-align: start;

text-align: start allows the browser to decide how to best align text based on the user's LTR or RTL preference.  There's also an "end" value if you prefer the text to show up on the right in LTR mode, and visa versa.  Browser support is good at this point, with Internet Explorer supporting this property within IE10.

Even if RTL isn't a requirement of your website, keep text-align: start in mind -- it's a very simple change that could be a big boost to your RTL visitors!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

Incredible Demos

  • By
    HTML5’s window.postMessage API

    One of the little known HTML5 APIs is the window.postMessage API.  window.postMessage allows for sending data messages between two windows/frames across domains.  Essentially window.postMessage acts as cross-domain AJAX without the server shims. Let's take a look at how window.postMessage works and how you...

  • By
    Face Detection with jQuery

    I've always been intrigued by recognition software because I cannot imagine the logic that goes into all of the algorithms. Whether it's voice, face, or other types of detection, people look and sound so different, pictures are shot differently, and from different angles, I...

Discussion

  1. Brian Compton

    Great tip. I was looking up RTL when I finally got it from the context: Right to Left languages such as Arabic, Hebrew, et al as opposed to LTR or Left to Right languages such as English.

  2. Ahmad Alfy

    I developed fair amount of Arabic websites. I always add: body { direction:rtl; }

    And this fixes everything. I don’t need to even addwhatever { text-align:right; }
    I’ve tried to use this new rule but I couldn’t feel any difference. I don’t really know how it helps RTL websites! On the MDN it says:

    The same as left if direction is left-to-right and right if direction is right-to-left.

    • David Walsh

      I’ve not had the same experience Alfy, but I’ll look some more. “start” seems more semantically correct as well.

  3. Abdullah Ibeid

    Nice tip David,
    As an Arab developer , I agree with ahmed that using the proper direction and text-align is better, because most of people here uses English browsers/OS so the default text align for most of the visitors will be left. Another approach for multi language websites is to include additional style sheet i.e rtl.css or ltr.css .

  4. Ali Sattari

    It simply make the process of localizing websites from an LTR language to a RTL one less painful, since you won’t need to go down the stylesheet and switch every right with left and vice versa in text-align properties.

    And I agree that it IS semantically more meaningful, for what graphic designer originally meant was that some text should be aligned through the end of the line. Which defers in direction for different languages.

  5. Brandon

    Wow! I am not a big commenter (at least not till I’m done with my site) but I had to say THANK YOU!! This property is not on the CSS3 site, so I figured there was no other way. It pays to be persistent, and your post proves that! Keep up the good work!!

  6. Binyamin

    IE10 actually does not support start and end value.
    Browser compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#Browser_compatibility

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!