text-align: start & RTL
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!