|Language:||English, Spanish, Arabic|
|Distribution:||Free* [*Registration Required]|
HTM L 7: M; -L. L n-— J, -". HTML 7. Vf ' t-. L, estring f'. Q; script;?
Ju eI. V 4"v: LI; " Popup Box-. L I u''-. Hello, How are you?
Services" ; - ' -. L v The following picture shows a table in a right-to-left document ie. The content of the table cells is right-aligned, the flow of content in each cell is right-to-left, and the columns also run right-to-left. What hasn't changed, however, is the alignment of the table itself within its containing block. It is still over to the right. See the third rendering of the table below, which is now left-aligned. Note that we don't have to repeat the dir attribute on the table itself, but that the columns run left-to-right.
Don't go markup crazy! Having established the base direction at the html tag level, you do not need to use the dir attribute on lower level block elements unless you want to change the base direction for that element. As noted in the section Working with browsers that change the browser chrome , occasionally you may choose not to use the html element.
If this is the case, you should apply the direction to another high level element, from which the direction can be inherited see above. Unnecessary use of the dir attribute potentially creates unnecessary additional work for page maintenance and also impacts bandwidth. The Arabic page source code in the following example shows bad usage. Over-elaborate block markup. Handling content whose direction is not known in advance NOTE!
This section describes features introduced by HTML5 to address the needs of text whose direction is not known in advance. The basic features are supported by all major browsers except Microsoft Edge and Internet Explorer. These features, when used as described below, don't cause harm on browsers that don't support them, but where browsers do they provide bidi support that isn't otherwise available using markup.
Therefore, it makes sense to start using them now, so that as browser support improves your content will reap the benefit. The application often doesn't know, and cannot control, the direction of the data. The auto value tells the browser to look at the first strongly typed character in the element and work out from that what the base direction of the element should be.
If it's a Hebrew or Arabic, etc. If it's, say, a Latin character, the direction will be ltr. There are some corner cases where this may not give the desired outcome, but in the vast majority of cases it should produce the expected result. The auto value comes in handy for the scenarios described below. Correcting display of opposite-direction text in the input element An online book store that carries books in many languages needs to work with the original book titles regardless of the language of the user interface.
Thus, a Hebrew or Arabic book title may appear in an English interface, and vice-versa this problem is actually much more widespread in RTL pages.
The direction of the title may be available as a separate attribute, but more likely it isn't. If nothing special has been done to the source code, you'll notice that a the word 'CSS' comes out in the wrong place it should be on the left , and b the text remains left-aligned rather than over to the right.
Perhaps even worse, the user experience of typing opposite-direction data can be quite awkward in some cases due to the cursor and punctuation jumping around during data entry and difficulty in selecting text. Before HTML5, avoiding such problems required that the user set the direction of the field using browser-specific key sequences or context menus, or that the page use scripting and logic to estimate the data's direction — and use it in the many places where it is needed.
Since the first strong character is right-to-left, the auto value causes the input field to be right-to-left too. It is worth using this markup now if you are unable to provide an alternative way of applying direction to the input field. At least it will work for some users now, and later will work for all browsers. The same principle applies to other HTML5 features described in this article. See which browsers support auto on the input tag in this way. Displaying bidi text in the textarea and pre elements Both textarea and pre elements can contain more than one paragraph of text.
The new dirname attribute in HTML5 allows you to pass that information to the server, so that it can be re-used when the text is displayed in another context. When it is set, the form passes the direction of the element to the server, using the name you have provided.
The directional information can then be used to apply the right direction to the text when it is displayed on another page.