children of option

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
   What is permitted in the label of an option? I need to mix a right to  
left language with English.

I know this is wrong:

<select style="direction: rtl">
    <option value="xyz">
        <div>Hebrew or Arabic</div>
        <div style="text-align: left">English</div>
    <option value="xyz">
        <div>Hebrew or Arabic another option</div>
        <div style="text-align: left">English</div>

Is there a right?


Re: children of option

2013-11-26 22:17, j wrote:

Quoted text here. Click to load it

Any text

Within an option element, or in different option elements of a select  
element? The former is more complicated, and this seems to be the problem.

Quoted text here. Click to load it

It's indeed wrong (invalid, and won't work), because an option element  
cannot contain any elements, just test.

But what is the problem? You can mix RTL and LTR languages, e.g.

<option value="xyz">
&#x05D0;&#x05D1;&#x05D2; English

What happens then is that words have their inherent directionality set  
by the directionality properties of characters, so e.g. the Hebrew  
letters here run properly right-to-left. And Latin letters run  
left-to-right. The mutual order of the two words depends on the overall  
directionality, which you can set with the dir=... attribute or, less  
logically and less safely, with the CSS direction property.

The default is LTR, by HTML specs, but if you have  <select  
style="direction: rtl">, this order is overridden that text will be  
written right to left, so the first word (the Hebrew "word") will appear  
on the right and the second word (the word in Latin letters) on the left.

The interesting question is what the content is really like. Its  
directionality should correspond to the overall directionality of text  
on the page, and it should rarely be different between options of a select.

It's really rather simple. If the content is English with some Hebrew or  
Arabc words embedded in it, just let the default directionality prevail.  
If it is all Hebrew, or all Arabic, or all Persian, or in some other RTL  
language, with some words in Latin letters thrown in, set dir=rtl  
(normally, on the <html> element).


Re: children of option

On 11/26/2013 3:47 PM, Jukka K. Korpela wrote:
Quoted text here. Click to load it

OK. That makes sense. I didn't see that at
Quoted text here. Click to load it

The problem *was* that English is looked at from a left margin, and  
Hebrew is started from a right margin.

But after further review, I think it's a bit nutso to split them on a  
line that way. One text-align is enough and the English is still plainly  
Quoted text here. Click to load it

I didn't know that. I had found it a bit of a mystery of why it worked.  
Not that I can read a word of Hebrew, but I was told it was correct.

I had a great deal of trouble importing unicode utf-8. Microsoft  
products like Excel look for a BOM (byte order marker) which I'm told  
shouldn't be needed in utf-8, only in utf-16 and utf-24. But this isn't  
the first time that MS has insisted on guessing wrong (enctypes).

  And Latin letters run
Quoted text here. Click to load it

I've been setting this only in CSS. Works in IE8 which is the most  
primitive browser I have. CanIuse is silent on support.
Quoted text here. Click to load it

As it turns, I was wrong about the options needing to be in both  
alignments, which simplifies my work.
Quoted text here. Click to load it

That I didn't know, that you could set on the html. I had been setting  
direction only on form fields and text-align: right on everything else.  
I rather stumbled on direction, which was a new concept for myself.



Quoted text here. Click to load it

Re: children of option

2013-11-27 0:33, j wrote:

Quoted text here. Click to load it

In HTML 4.01, for example, the rule is presented in a somewhat cryptic  
way, namely in an SGML declaration:

<!ELEMENT OPTION - O (#PCDATA)         -- selectable choice -->

HTML5 says it in more commonly understood terms:

"Content model:

However, if you want to know exactly what "text" means here, it gets a  
bit more complicated. When you follow the link "Text", you might get  
worried about the statement "must not contain control characters other  
than space characters" - if you might need characters that control  
directionality, like U+200E LEFT-TO-RIGHT MARK. But such a character  
passes validation at so apparently "control  
character" is not meant to cover characters in the category Cf [Other,  
Format] in Unicode, probably just Cc [Other, Control].

Quoted text here. Click to load it
Quoted text here. Click to load it

Hebrew is mostly Greek to me, and that's why I use simple Hebrew  
characters in my tests - like the first three letters of the Hebrew  
alphabet as above. Everyone knows the aleph, right? :-)

Quoted text here. Click to load it

It is not uncommon to see warnings about BOM, even on W3C pages. The  
warnings reflect the shortcomings of very ancient browsers and partly  
problems that still exist in PHP, which cannot handle BOM properly when  
joining PHP files. But BOM does not cause problems to any *browser* that  
you might see in the wild these days. BOM actually *helps* even in a  
utf-8 encoded file by making sure that browsers will interpret it as  
utf-8, even if HTTP headers are missing or wrong.

Quoted text here. Click to load it

HTML5 CR says:

"Authors are strongly encouraged to use the dir attribute to indicate  
text direction rather than using CSS, since that way their documents  
will continue to render correctly even in the absence of CSS (e.g. as  
interpreted by search engines)."

Quoted text here. Click to load it

Well, you could use both HTML dir attribute and CSS direction property.  
But you hardly need that.

CanIuse mostly deals with HTML5 novelties (in a rather broad sense), and  
the dir attribute is good old HTML 4. According to
there is support in IE 5.5+, which should be enough these days.


Re: children of option

Quoted text here. Click to load it

Quoted text here. Click to load it

Site Timeline