Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 4 Articles
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
[HOW TO - vB4] Making stuff right-to-left (RTL) compatible - example: images
cellarius's Avatar
cellarius
Join Date: Aug 2005
Posts: 1,987

 

Show Printable Version Email this Page Subscription
cellarius cellarius is offline 10-29-2009, 10:00 PM

The credit for this really goes to Freddie at vbulletin.com, and I readily admit that I have blatantly stolen this little valuable bit of information from one of his comments in the alpha bugtracker. Thanks to Freddie for letting me crib off

What's this good for?

As you probably all know, vBulletin can be used with languages that are read in right to left direction. If you need to provide for this anywhere in your own styles and templates, you can use the style variable {vb:stylevar right} which can be used in css and template files. If the text orientation is standart left-to-right, it's value is "left", if its right-to-left, it's value is "right".

Example: Image with orientation

Say, you have an image or icon that in any way represents a direction, it's possible that the orientation of that image has to change along with the reading direction. An existing example would be the left or right arrow in pagination, for previous and next page. It's good practice to provide for this.

How to do it?

Assume you have an image file, for example: arrow.png

In a first step, add the current direction orientation to the file, using either left and right as suffix. We end up with an image file: arrow-left.png

Now flip the image and change the prefix accordingly. Now we have a second image file, called: arrow-right.png

In your template reference this image as follows:
Code:
<img src="images/yourfolder/arrow-{vb:stylevar right}.png" alt="" />
...and that's why I thought this little gem might be of use to some.
Reply With Quote
  #2  
Old 12-19-2009, 04:41 PM
derfelix derfelix is offline
 
Join Date: Nov 2001
Posts: 204
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

very nice, thx alot..
One question..
If in ltr the image comes before the text
(example : sometext <img src="arrow-left.png" />)
in rtl wouldnt you want to have the image on the other side of the text?
(example : <img src="arrow-right.png" /> sometext)

does that meen you have to float every single bit of text?
for the example above the code would be:

<div>
<img style="float:{vb:stylevar right}" src="arrow-{vb:stylevar right}.png" /> <span style="float:{vb:stylevar right}">sometext</span>
</div>
I meen do you have to float the text also.. because otherwise the spacing between image and arrow would become huge..
Or is there a better solution? because that would meen that ever bit of text has to be floated, giving potential clearing errors on numerus occasions..

Felix
Reply With Quote
  #3  
Old 12-31-2009, 03:10 AM
coffee's Avatar
coffee coffee is offline
 
Join Date: Oct 2002
Posts: 154
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

@Felix: That's already done globally inside HTML tag: dir="rtl"
Reply With Quote
  #4  
Old 12-31-2009, 08:32 AM
derfelix derfelix is offline
 
Join Date: Nov 2001
Posts: 204
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by coffee View Post
@Felix: That's already done globally inside HTML tag: dir="rtl"
Yes you are right...!!!!
What made me think it didnt work was the test on vbulletin.com forums...

But i didnt take into consideration that in translation the phrases get switched around!!! and in their demo they use english!!!
I didnt think of that..
THX for making me rethink!!!!

F.
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 10:43 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.03926 seconds
  • Memory Usage 2,224KB
  • Queries Executed 17 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)bbcode_code
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (4)post_thanks_box
  • (4)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (4)post_thanks_postbit_info
  • (3)postbit
  • (4)postbit_onlinestatus
  • (4)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete