Reverse text feature

• Created : May, 23, 2016
• Last Updated: Apr, 26, 2023

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 ensure the alignment is suitable for the direction of the text
5. Save your widget and check it out on your website
6. Save your using the Save & Get code button - if your widget is installed it will be auto-updated

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 {color:red; text-decoration:none; unicode-bidi:bidi-override; direction:rtl;}
.fw-feed-item-title:visited{color:blue; text-decoration:none; unicode-bidi:bidi-override; direction:rtl;}
.fw-feed-item-title:hover{color: green ; text-decoration:underline; unicode-bidi:bidi-override; direction:rtl;}
.fw-feed-item-title: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.

Related posts

Changing a Link Target in 3rd Party Content

Contents1 Copyright law applies to a link target2 Why we don’t offer a link editing feature3 Disabling links is...

Beef Up Your Titles

Contents1 Introducing a new feature to allow you to make titles bold in your FeedWind widgets.1.1 MAIN TITLE BOLD STYLING1.2...

FeedWind Analytics Feature

FeedWind’s Analytics feature is a mechanism for users to tally the amount of impressions received by a widget or...