Reverse text feature

feedwind-icon-trans Easy Steps

Reverse text direction


  1. Open your widget for editing (or create a new widget)
  2. Click on the General section > Advanced link
  3. Select the text direction that you would like to use
  4. Check the text alignment to [simple_tooltip content=’For Right-to-Left text, align Right or Full. For Left-to-Right text, align Left or Full.’]ensure the alignment is suitable for the direction of the text[/simple_tooltip]
  5. Save your widget and [simple_tooltip content=’no need to re-paste the code snippet into your site – it will update automatically!’]check it out on your website[/simple_tooltip]
  6. Save your using the  Save & Get code   button – if your widget is installed it will be auto-updated

rss right to left widget

About the FeedWind reverse text feature

FeedWind is a reversible-text RSS widget, supporting left-to-right and right-to-left text styles. This feature allows users the option to display reverse text languages in their RSS feed widget such as Arabic or Urdu. There are a number of languages which require right-to-left text functionality – Wikipedia has a list of reverse-text languages and further information on the topic.


 

Advanced users (requires CSS)

There is no need to create any custom CSS to reverse the text direction in your RSS feed widget but advanced users might like to use CSS to create a more specialized feed with combinations of right-to-left and left-to-right text possible. You can set the text direction for individual RSS feed components using a custom CSS

Reverse text direction using CSS

We have added a reverse text feature to the FeedWind Setup Screen so anyone looking for a standard reverse text direction is advised to try that feature first. The following is a tutorial that allows you even more freedom in the direction of text. For example where there is a need to only reverse certain parts of the RSS feed items. If you wanted to have a reverse-text title for the container example but with feed contents in a regular text language.

Reversing the direction of text using CSS requires the following code elements:

unicode-bidi:bidi-override;

direction:rtl;

the ‘rtl‘ refers to “right-to-left” and can be replaced with “ltr” (left-to-right). Different elements can have different directions if required for any reason (container title, feed title and feed content can be reversed independently, as can their various states such as during mouse hover, for unvisited/visited links and for active links.

This short line of code must be added to a custom CSS . The way this is achieved is described in our tutorial on custom CSS.

A typical Custom CSS with reverse text looks something like this:

/* Container */
#fw-container{border-style:solid; border-color: #837a47; border-radius: 10px; border-width: 1px; margin:5,5,5,5; padding:5,5,5,5; font-family:arial narrow; font-size:16px; font-color:#blue; font-weight: light; background-color:#ece8d4;}
/*Header*/
#header{width:200px; height:25px; margin:5px; padding:5px; font-color:yellow; font-weight:bold; unicode-bidi:bidi-override; direction:rtl;}
.fw-feed-title a:link{color:brown; text-decoration:none; unicode-bidi:bidi-override; direction:rtl;}
.fw-feed-title a:visited{color:#red; text-decoration:none; unicode-bidi:bidi-override; direction:rtl;}
.fw-feed-title a:hover{color:#green; text-decoration:underline; unicode-bidi:bidi-override; direction:rtl;}
.fw-feed-title a:active{color:#blue; text-decoration:none; unicode-bidi:bidi-override; direction:rtl;}
/*Content*/
#content{margin:0;padding:5px;}
.feed_item{margin:10px;}
.fw-feed-item-title{margin:10px; padding:2px; color:#FFFFFF; font-weight:bold; unicode-bidi:bidi-override; direction:rtl;}
.fw-feed-item-title a:link{color:red; text-decoration:none; unicode-bidi:bidi-override; direction:rtl;}
.fw-feed-item-title a:visited{color:blue; text-decoration:none; unicode-bidi:bidi-override; direction:rtl;}
.fw-feed-item-title a:hover{color: green ; text-decoration:underline; unicode-bidi:bidi-override; direction:rtl;}
.fw-feed-item-title a:active{color:yellow; text-decoration:none; unicode-bidi:bidi-override; direction:rtl;}
.fw-feed-item-description{margin:5px; padding:3px; color:#808080; line-height:135%; unicode-bidi:bidi-override; direction:rtl;}

This results in something like these examples that use the above custom.CSS for right to left text usage in FeedWind. The only difference is the feed URL used in the FeedWind setup screen.
 


 

May 23, 2016 11:24 pm