Saturday, June 23, 2012

RTL Twitter Widget

So if you've been looking for a right-to-left or RTL version of a Twitter widget and couldn't get your hands on one you're not alone. First I have to say kudos to the Twitter's Internationalization team for recruiting people to translate Twitter to so many languages in such short amount of time, including many RTL languages like Hebrew and Persian. If you can't wait for Twitter to provide your favorite widget in RTL you've come to the right place. I was in the same boat as you until I decided to put a bit of CSS magic together in an effort to get a RTL widget going.

Below is the CSS that can be inserted in a style tag right right under the widget JS code. This has been tested with the Twitter Search widget, but it should work with the Profile and Favorites widgets as well.

First a screenshot of the final result.

CSS for Making Twitter Widgets RTL

Here is the CSS that can be inserted right after the widget code to achieve a RTL functionality.
 <style>  
    .twtr-widget .twtr-spinner {left:3px;right:auto;margin:0 40px 0 0;}  
    .twtr-hd h3, .twtr-hd h4 {text-align:right;direction:rtl;}  
    .twtr-tweet-text {direction:rtl;text-align:right;margin:0 40px 0 0;}  
    .twtr-tweet-text em {direction:ltr;}  
    .twtr-avatar {float:right;direction:rtl;}
 </style> 

Bigger Font Size

And finally if you would like to increase the font size the solution lies in two lines of CSS below.
 <style>  
 .twtr-tweet-text {  
   font-size: 165%;  
   font-family: Georgia, Serif;  
 }  
 </style> 

This is where the style tag should be inserted.


No comments:

Post a Comment