html - Ordering span elements independent of text directionality -


say have number of span text elements (2 or more) 'dir' specified rtl:

<div dir="rtl"> <span>first-element</span> <span>second-element</span> <span>third-element</span> </div>

and them appear in order right left:

third-element second-element first-element

this works fine if text elements have rtl directionality (text arabic, farsi, hebrew etc.), or if interleaved rtl elements:

<div dir="rtl"> <span>first-element-rtl</span> <span>second-element-rtl</span> <span>third element-rtl</span> </div>

or:

<div dir="rtl"> <span>first-element-ltr</span> <span>second-element-rtl</span> <span>third element-ltr</span> </div>

but if elements of ltr directionality, order of language used, , undesired ordering:

first-element second-element third-element

how can achieve fixed order of elements independent of directionality of text in elements - is, technique (whether html or css) should indifferent language of individual text elements.

this issue arises when content of span elements variable , provided user, example user names can in rtl language or english.

edit

i have emphasize talking ordering text spans relative each other, not changing flow of text itself, 'english text' should appear is, not 'txet hsilgne'.

edit

this simple html segment test answer provided jukka. presents 'bar foo' aligned right. shows (at least on browser) there no need { unicode-bidi: bidi-override; } @ container level desired result.

<html> <head>     <style type="text/css">         span { unicode-bidi: embed; }     </style> </head> <body> <div dir="rtl"> <span>foo</span> <span>bar</span> </div> </body> </html> 

div { unicode-bidi: bidi-override; } span { unicode-bidi: embed; }

the first rule forces specific direction, in case rtl set in html, overriding inherent directionality of text (which depends on directionality properties of characters).

the second rule makes each span element “autonomous island” in directionality, i.e. text direction inside not affected enclosing elements on properties set on element , on directionality properties of characters. e.g. latin letters run left right, hebrew , arabic letters right left.

there’s problem, though. if span contains, say, “foo (2)”, rendered “(foo (2”. reason element has rtl direction, inherited parent. although dir attribute, direction property, sets weak directionality (which not affect e.g. sequence of latin letters, have strong ltr directionality), affects e.g. situations parentheses involved. parentheses have ambiguous directionality, treated according weak directionality settings.

i’m afraid there’s no simple way around part of use. can of course set directionality of span elements according expect common situation, span { direction: ltr; } if expect texts in english mostly. real solution, need control weak directionality settings according language of content.


Comments

Post a Comment

Popular posts from this blog

java - Play! framework 2.0: How to display multiple image? -

i need display gallery of photos. here template: @(photos: list[photo]) @title = { <bold>gallery</bold> } @main(title,"photo"){ <ul class="thumbnails"> @for(photo <- photos) { <li class="span3"> <a href="#" class="thumbnail"> <img src="@photo.path" alt=""> </a> </li> } </ul> } and here controller method: public static result getphotos() { return ok(views.html.photo.gallery.render(photo.get())); } and here photo bean : @entity public class photo extends model { @id public long id; @required public string label; public string path; public photo(string path, string label) { this.path = path; this.label = label; } private static finder<long, photo> find = new finder<long, photo>( long.class, photo.class); public static list<phot...
Read more

gmail - Is there any documentation for read-only access to the Google Contacts API? -

i want read-only access user's google contacts. there stackoverflow member wanted this, , received following answer : yes, there is, use https://www.googleapis.com/auth/contacts.readonly scope , "view contacts". this exchange reference read-only access google contacts can find using google. simply using access token obtained attempt read usual google contacts api (i.e. https://www.google.com/m8/feeds ) fails insufficient permissions. similarly, using google contacts api on new target fails 404 errors (for example https://www.googleapis.com/auth/contacts.readonly/default/full ). is there documentation anywhere on how use api, or permissible way access google contacts api full read-write access?
Read more

php - Controller/JToolBar not working in Joomla 2.5 -

relevant code: jtoolbarhelper::custom('savecategories', 'save', '', 'save', false, false); ... <input type="hidden" name="controller" value="easyblogcontroller"> according can dig docs , own previous questions, should call savecategories() function in easyblogcontroller . i've tried setting value easyblog , easyblog.php (file name) current easyblogcontroller (class name). clicking on save button refreshes page. not redirect, echo or var_dump test code put in savecategories() function. var_dump ing jrequest::getvar('controller') , 'task' return correct values. creating controller object , using $controller->execute('task'); works. the values going depend on location of controller trying call, , have couple options here. typically there controller in base folder of component (likely components/com_easyblog) in file called controller.php , class name inside ...
Read more