
The LTR/RTL direction of the page shouldn't affect the location of scrollbars, since these are part of the browser chrome that is determined by the user, rather than by the language of the page. You must always declare the directionality using the dir attribute. However, do not make the mistake of assuming that language 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. While you are declaring the directionality of the document in the html tag, don't forget to also declare the language of the document using the lang attribute (see Declaring language in HTML).

(Click on the images to enlarge them.) Language tags What content looks like before (left) and after (right) the dir attribute is added to the html tag. It will set the direction of overflows.If you write the style sheet correctly, CSS will automatically mirror the layout.Input in form fields will automatically start at the right, by default.Table columns will progress from right-to-left, and their contents will be right-aligned.Punctuation will appear in the correct place relative to the text.Bidirectional text will correctly flow from right-to-left.Paragraphs and other blocks will be right-aligned.This simple addition to the html element will have the following effects throughout the rendered page. No dir attribute is needed for documents that have a base direction of left-to-right, since this is the default, but it doesn't hurt to use it with a value of ltr. All block elements in the document will inherit this setting unless the direction is explicitly overridden. This sets the default base direction for the whole document. Setting up a right-to-left pageĪdd dir="rtl" to the html tag any time the overall document direction is right-to-left (RTL). In HTML the base direction is either (a) set explicitly by the nearest parent element that uses the dir attribute (which could be the html element), or, (b) in the absence of such an attribute, left-to-right (LTR). Correctly setting the base direction also sets the default paragraph alignment of the text.

It 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.
#How to left justify text in html code
In this article right-to-left text in code samples may be represented by UPPERCASE TRANSLATIONS, and left-to-right text by lowercase.Īt the outset, it is important to understand the concept of base direction (see Unicode Bidirectional Algorithm basics for a simple overview of how it works with the Unicode bidirectional algorithm). Setting direction at the document level Base directionĮxamples in this document may be shown as images to avoid problems for those with a browser that doesn't produce what was intended.Ĭode samples containing Arabic and Hebrew text may be displayed in different ways, none of which are usually satisfactory. Handling bidirectional inline text is dealt with in the separate article, Inline markup and bidirectional text in HTML.

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

Avoid HTML attributes with values of 'right' and 'left'. to make it easy to manage direction changes during localisation. But do use logical ('end' and 'start') on properties or values related to margins, padding, alignment, etc. Never use CSS to apply the base direction. If the overall document direction is right-to-left, add dir="rtl" to the html tag.īelow the html tag, only use the dir attribute on structural elements on the rare occasions when the base direction needs to change in order for the text to display correctly. Many different languages are written with these scripts, including Arabic, Dhivehi, Hebrew, Mandinka, Pashto, Persian, Pular, Sindhi, Syriac, Urdu, Yiddish, etc. It is essential to support languages that use right-to-left scripts such as Adlam, Arabic, Hebrew, N'Ko, Syriac, and Thaana. The dir attribute is used to set the base direction of text for display. It also describes some other elements and attributes related to direction. at the document level and for elements like paragraphs, tables and forms.įor handling bidirectional text with inline markup you should read the separate article, Inline markup and bidirectional text in HTML. This article looks at ways of handling text direction for structural markup in HTML, ie.
