Table Commands, Change the Text Direction of the Column Heads So That the Text Reads Bottom to Top

Structural markup and correct-to-left text in HTML

This article looks at ways of handling text direction for structural markup in HTML, ie. at the certificate level and for elements like paragraphs, tables and forms.

For handling bidirectional text with inline markup you lot should read the separate commodity, Inline markup and bidirectional text in HTML. It also describes another elements and attributes related to management.

The dir attribute is used to set the base direction of text for display. It is essential to support languages that use right-to-left scripts such every bit Adlam, Standard arabic, Hebrew, N'Ko, Syriac, and Thaana. Many dissimilar languages are written with these scripts, including Standard arabic, Dhivehi, Hebrew, Mandinka, Pashto, Farsi, Pular, Sindhi, Syriac, Urdu, Yiddish, etc.

Quick answer

If the overall document management is right-to-left, add dir="rtl" to the html tag.

Beneath the html tag, only use the dir aspect on structural elements on the rare occasions when the base management needs to change in order for the text to display correctly.

Never use CSS to employ the base of operations management. Merely do utilize logical ('end' and 'starting time') on properties or values related to margins, padding, alignment, etc. to brand it easy to manage direction changes during localisation. Avoid HTML attributes with values of 'right' and 'left'.

Set the dir attribute to auto on forms and inserted text in order to automatically detect the management of content supplied at run-time. Consider using the dirname attribute on forms to send information nearly direction to the server in add-on to the usual form data.

Handling bidirectional inline text is dealt with in the dissever commodity, Inline markup and bidirectional text in HTML.

Setting direction at the certificate level

Base of operations direction

Examples in this document may be shown as images to avoid problems for those with a browser that doesn't produce what was intended.

Code samples containing Arabic and Hebrew text may be displayed in different means, none of which are usually satisfactory. In this article right-to-left text in code samples may be represented by Capital TRANSLATIONS, and left-to-correct text past lowercase.

At the kickoff, information technology is important to understand the concept of base management (come across Unicode Bidirectional Algorithm basics for a simple overview of how it works with the Unicode bidirectional algorithm).

Information technology is fundamentally important to establish the appropriate base direction for the text, so that the Unicode bidirectional algorithm can reorder the text appropriately when it is displayed. Correctly setting the base management also sets the default paragraph alignment of the text.

In HTML the base direction is either (a) set explicitly by the nearest parent chemical element that uses the dir aspect (which could be the html element), or, (b) in the absence of such an attribute, left-to-right (LTR).

Setting upwardly a right-to-left folio

Add dir="rtl" to the html tag whatever time the overall certificate direction is right-to-left (RTL). This sets the default base of operations direction for the whole certificate. All block elements in the certificate will inherit this setting unless the management is explicitly overridden.

<!DOCTYPE html> <html dir="rtl" lang="ar"> <head> <meta charset="utf-viii"> ...

No dir attribute is needed for documents that have a base direction of left-to-right, since this is the default, merely it doesn't injure to use information technology with a value of ltr.

This simple addition to the html chemical element will have the following furnishings throughout the rendered folio.

Paragraphs and other blocks volition be right-aligned.
Bidirectional text will correctly catamenia from right-to-left.
Punctuation will appear in the correct place relative to the text.
Table columns will progress from right-to-left, and their contents will exist right-aligned.
Input in class fields volition automatically start at the right, by default.
If yous write the fashion sheet correctly, CSS will automatically mirror the layout.
It volition set the direction of overflows.

Language tags

While you are declaring the directionality of the document in the html tag, don't forget to also declare the linguistic communication of the document using the lang aspect (come across Declaring linguistic communication in HTML). Nonetheless, do not brand the mistake of bold that linguistic communication declarations indicate directionality, or vice versa! Even if the language declaration has a script tag it won't affect the directionality of the text in the user agent. Y'all must always declare the directionality using the dir attribute.

Curl confined

The LTR/RTL direction of the page shouldn't bear upon the location of scrollbars, since these are role of the browser chrome that is determined by the user, rather than by the language of the folio.

The `title` element

The text that appears in the title chemical element at the meridian of an HTML file is often displayed in tab headings, bookmarks, etc. When so displayed, the browser should automatically apply the base direction that the title chemical element had in the original document. For example, if the html tag declares the certificate direction to be RTL, the title chemical element text should exist displayed with a RTL base management.

At the time of writing, browsers tend to brandish RTL title text from correct-to-left, and vice versa. However, they do this not by examining the direction practical to the text past the markup, merely instead by finding the get-go strongly directional character in the title and assuming that that indicates the advisable base of operations management.

Much of the time this will produce the desired result. However, if the title text in a RTL document begins with, say, an acronym in the Latin script, the society volition be wrong when the text is displayed (encounter some tests).

A workaround for this scenario is to add &rlm; at the offset of the title text when information technology doesn't begin with a RTL character. This adds U+200F RIGHT-TO-LEFT MARK at the start, which is an invisible, strongly directional RTL character.

If you have a LTR text that begins with a strong RTL character, utilize &lrm; at the first, instead.

Setting direction on block elements

Don't use CSS for direction!

Exercise non use CSS to apply base direction in HTML pages.

Basically, this is because you want the directional information to be available even when the CSS is not. The directional information can affect the semantics of your content, and and then should be function of the markup. (Encounter a longer explanation).

Both the CSS and HTML specs repeat this same admonition.

Simply use markup for special circumstances

Use the dir aspect on a block element only when you need to change the base direction of content in that block.

Having established the base direction at the html tag level, you may take no need to use the attribute for any cake elements on the page, since the direction set at the commencement of the page percolates downward to all block elements.

(You may nonetheless need to use information technology for inline stretches of bidirectional text. That is described in more detail in Inline markup and bidirectional text in HTML.)

The following is an example of how to marker upwardly a block chemical element with a left-to-right base of operations direction in a right-to-left document.

<blockquote dir="ltr" lang="en" cite="Romeo and Juliet (2, 2, 1-2)">But, soft! What low-cal through yonder window breaks? It is the e, and Juliet is the sunday.</blockquote>

Using logical properties in CSS

Text that is aligned to the right in an English page generally needs to be aligned to the left in a RTL page. Information technology is possible to make that happen automatically, without the hassle of changing all the CSS in your style sheet. The solution is to use 'logical properties' when setting upwardly your manner: ie. use 'start' and 'end', rather than 'left' or 'right'.

Using logical properties past default makes information technology much easier to localise your content in the time to come or include text with a different direction. After a while, thinking well-nigh outset and stop rather than left and right becomes natural, and will be useful to yous when dealing with layout methods such every bit CSS filigree layout or flexbox which follow the aforementioned patterns.

Left and correct values may still exist useful, occasionally, if you want the detail you are positioning to remain in a fixed location, contained of the linguistic communication of the text. Learning to distinguish when to utilise the left/right terms rather than the default start/cease terms helps you to be more enlightened of your design intent.

Logical values or property names that bask interoperable support on the major browser engines include:

text-marshal: start | end justify-content: flex-start | flex-end ... align-content: flex-start | flex-cease ... grid-column-start: <value> grid-column-terminate: <value> inline-size: <width> margin-inline-showtime/cease: <value> padding-inline-outset/end: <value> edge-inline-commencement/end-width: <value> border-inline-start/end-style: <value> border-inline-start/end-color: <value> etc.

For many of these backdrop it is also possible to replace inline with block. This facilitates changing between horizontal and vertical modes when dealing with Chinese, Japanese, Mongolian, etc.

When you use these properties in your way sheet and set the direction of your content to RTL, the alignment of that content treats start as right, and end every bit left. If you change the direction of the text, yous don't take to worry nigh likewise adapting the style canvas.

At the time of writing, boosted properties are still awaiting adoption by some of the master browser engines. These include bladder, explanation-side, clear, and border-radius. As well, the shortcut properties for margin and padding are not yet implemented. See a set of test results for major browsers.

Other recommendations include:

only use text-align where you really need to override the alignment produced by setting the base direction with dir.
avoid using HTML attributes with values of left and right. Instead add selectors to your CSS stylesheet. This allows you to utilize logical properties, but as well makes it easier to modify things during localisation.

Working with tables

The dir attribute setting as well affects the flow of columns in a tabular array. The following picture shows a table in a right-to-left document (ie. the html tag includes dir="rtl"). The content of the table cells is correct-aligned, the flow of content in each prison cell is correct-to-left, and the columns also run right-to-left.

In the table just below, the lawmaking dir="ltr" has been added to the table element, similar this:

<tabular array dir="ltr"> … </table>

Note how the gild of columns has inverse, how the contents of the cells are now left aligned (look at the numbers), and how the flow of words within each prison cell is at present left-to-correct (although the words themselves are still read, character by character, in the same direction).

What hasn't inverse, however, is the alignment of the table itself within its containing block. Information technology is still over to the correct.

If, for some reason, yous wanted to use markup (rather than styling) to make the table appear over on the left too every bit reorder the columns (mayhap considering y'all run across the table equally part of a left-to-right management block), you would need to wrap it in something similar a div element, and add the dir="ltr" to that element to achieve that event. (Don't use CSS text-align because that will affect the table cells!) See the third rendering of the table below, which is now left-aligned.

Note that we don"t have to repeat the dir aspect on the tabular array itself, but that the columns run left-to-right.

dir=motorcar

If the value of the dir attribute is set to auto, the browser will await at the kickoff strongly typed character in the chemical element and work out from that what the base of operations management of the chemical element should be. If it's a Hebrew (or Standard arabic, etc.) character, the chemical element will get a direction of rtl. If it'south, say, a Latin graphic symbol, the direction volition be ltr.

There are some corner cases where this may not give the desired issue, but in the vast majority of cases it should produce the expected result.

Applied to block elements, the auto value comes in handy when you lot don't know in advance the management of the text inserted into a page. Information technology is also especially useful for working with forms.

Inserting text into a page with the right base direction

Applications often insert text into a page at run time by pulling data from a database or other location, be it via server-side scripting such as PHP, using AJAX, or some other method. Such text can exist multilingual/multiscript, and the direction of the text may not exist known in accelerate. (Multiscript text is much more common in pages that are predominantly right-to-left than in other pages.)

Such inserted text is commonly inline, and the auto value of the dir attribute and another element chosen bdi play a useful office in handling such situations. Their utilise for inline markup is described in more detail in the article Inline markup and bidirectional text in HTML.

It is sometimes useful to also characterization cake level content. For example, in a forum where posts are in both Urdu and English, or where text in a single post is a mixture of Hebrew and English paragraphs. Simply add dir="motorcar" to the element that surrounds each postal service and the first strongly-typed grapheme in the chemical element will determine the management of that chemical element's content.

The HTML5 specification gives an instance related to a chat session. Given the following markup:

<p dir="auto" class="u1"><bdi>S</bdi>: <bridge class="msg">How do you write "What's your name?" in Arabic?</span></p>
              <p dir="automobile" grade="u2"><bdi>T</bdi>: <span course="msg"> ما اسمك؟</span></p>
              <p dir="machine" class="u1"><bdi>Due south</bdi>: <span class="msg">Cheers.</span></p>
              <p dir="automobile" class="u2"><bdi>T</bdi>: <span form="msg">That's written "شكرًا".</span></p>
              <p dir="car" class="u2"><bdi>T</bdi>: <span class="msg">Practice yous know how to write "Please"?</span></p>
              <p dir="motorcar" class="u1"><bdi>Southward</bdi>: <bridge class="msg">"من فضلك", right?</span></p>

The browser will display the following:

Notation how, when searching for the beginning strongly-typed character, the browser skips over text in a bdi element. Information technology also skips text in script, style, and textarea elements, and any chemical element with a dir attribute.

Notation, also, how this approach is not foolproof: the concluding paragraph in this example is misinterpreted as being right-to-left text, since it begins with an Arabic character. This causes the line to be right-aligned and the text "right?" to be to the left of the Standard arabic text, with the question mark at the far left.

Working with forms

Many web applications with a correct-to-left-language interface or a correct-to-left-linguistic communication data source need to brandish and/or accept as input both LTR and RTL data. The application often doesn't know, and cannot command, the direction of the data.

Correctly displaying 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 volume title may appear in an English interface, and vice-versa (this problem is really much more than widespread in RTL pages). The direction of the title may be available as a separate attribute, merely more probable it isn't.

In the post-obit instance nosotros search for a Hebrew title, הצהחת קידוד תװי CSS, in an English language user interface.

Without taking steps to forbid it, you'll notice that (a) the word 'CSS' comes out in the incorrect place (it should be on the left), and (b) the text remains left-aligned rather than over to the right. Possibly even worse, the user experience of typing opposite-management data can be quite bad-mannered in some cases due to the cursor and punctuation jumping effectually during data entry and difficulty in selecting text.

Picture of code with dir attributes on every element.

The solution is to simply add dir="auto" to the input tag.

Since the showtime stiff character is right-to-left, the machine value causes the input field to exist right-to-left besides.

If the next book that the user searches for has an English championship, the text volition automatically be left-aligned and the base of operations direction will be set to LTR.

Alternate directionality in `textarea` (and `pre`) paragraphs

Both textarea and pre elements can comprise more than one paragraph of text, and information technology is not possible to use markup to those paragraphs.

If a textarea element inherits or sets a direction of rtl, all paragraphs will exist correct-aligned, merely the paragraphs that should accept a LTR base of operations direction won't have it. For example, in the post-obit picture the assertion marking associated with the word '2' should appear to the right, not the left.

If yous prepare dir to machine on the element so base direction is assigned to each paragraph independently, co-ordinate to the direction of the start strong grapheme in that paragraph. RTL and LTR paragraphs are also aligned differently.

When a line contains no strong directional characters, such every bit '123-456', a LTR base management is used for the arrangement of the characters, yet the alignment of the line currently varies by browser. Webkit browsers keep the text right-aligned, whereas Glimmer and Gecko browsers left-align it. Information technology is likely that in future all browsers will base of operations the alignment of such lines on that of the previous paragraph.

Reporting direction to the server with `dirname`

When you cause the browser to dynamically apply the correct management to text in a grade field, either by using dir="motorcar", by using JavaScript, or fifty-fifty by using browser-specific keystrokes or context menus, the dirname aspect allows you to pass that information to the server, so that it can be re-used when the text is displayed in some other context.

Here'south an instance of it in use:

<grade action="addcomment.cgi" method="get"> <p><label>Comment: <input blazon="text" name="comment" dirname="commentdir" required></characterization></p> <p><button name="mode" type=submit value="add">Mail Comment</push button></p> </form>

The value of dirname can be any you lot want (but not empty). When it is ready, the form passes the direction of the chemical element to the server, using the name you accept provided. So if the user switches the direction of the grade entry field in the case above to RTL and enters مرحبا, then when the form is submitted, the submission trunk will wait like this:

annotate=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7&commentdir=rtl&mode=add

The directional information can and so be used to utilize the right management to the text when it is displayed on some other page.

This attribute can, of course, also be used to submit the direction of the input field when dir is set to rtl or ltr. This could be useful for a database that stores data in a variety of languages.

Setting direction on forms manually

Browsers may permit users to set the base management of form entry fields using key strokes. Having the right base of operations management fix tin significantly improve the user'due south experience, specially if the text they are inputting contains punctuation and numbers. Unfortunately, each browser has a different way of doing this. This section lists how to do it for some major desktop browsers.

In some cases you lot will demand to set up your system for this to work. For example, for Internet Explorer you may need to install the Hebrew package and enable the Hebrew keyboard before this will work.

Chrome: Correct-click on input or textarea elements to reveal the Writing Direction submenu. Choose either Right to Left or Left to Correct. This sets the value of the chemical element'south dir attribute, which is then available to scripts.

Safari: Right-click on input or textarea elements to reveal the Paragraph Direction submenu. Choose either Right to Left or Left to Correct. This sets the value of the element's dir attribute, which is then bachelor to scripts.

Firefox: Gear up direction using the CTRL/CMD+SHIFT+X keyboard shortcut, which cycles through LTR and RTL. It does not fix the value of the element's dir attribute, and is thus invisible to scripts.

Internet Explorer: Apply CTRL+LEFT SHIFT for LTR and CTRL+RIGHT SHIFT for RTL. (These key combinations are also adopted for this purpose by most Microsoft products, e.g. Windows dialogs, Notepad and Word.) They prepare the value of the element'due south dir attribute, which is and so bachelor to scripts.

Endeavor it:

Table Commands, Change the Text Direction of the Column Heads So That the Text Reads Bottom to Top

Structural markup and correct-to-left text in HTML

Quick answer