dir, html or css attribute

Asked

Viewed 1,089 times

8

The attribute dir is usually omitted for languages LTR (default) and used for RTL - which are written from right to left (Arabic and related), for the purpose of changing direction, but found nothing relevant beyond that.

Use the PHP to find the Direction, can use the browser language and files as a basis to load settings. Using CSS to change it, you would only need to combine a class with the same language name, and this would end up relieving a lot of process.

// css
.en_US, .pt_BR{direction:ltr}
.eg{direction:rtl}

// html
<body lang="pt_BR" class="pt_BR">

Question

We can omit and maintain the direction using CSS only (direction:rtl), or the attribute say has some other application?

I have tested screen readers, but at the time I did not notice it. They identify the direction of the text by the attribute, or are preconfigured?

html css
  • 1

    The screen reader does not need this attribute, because in the source things are always in the same direction. What the attribute does is reverse the direction when displaying only (which is better, because the original text always works the same, as typed)

  • Innocent doubt: the attribute dir goes inside the tag <body>? I’ve never seen, eg is code where, Egypt?

  • @brasofilo, O Attr dir can go in the body to apply throughout doc, including other elements are supported. EG is from Egito yes.

1 answer

4


Question 1:

I have tested screen readers, but at the time I did not notice it. They identify the direction of the text by the attribute, or are preconfigured?

Neither one nor the other. They do not read based on the direction, but rather on the order in which the texts appear in the HTML source code (from start to finish). [See reference]

Question 2:

We can omit and maintain the direction using only CSS (Direction:rtl), or the dir attribute has some other application?

Have the same application according to W3C specification.
However, preferably use the attribute dir, according to W3C recommendation:

Since the steering is an integral part of the document structure, one should use a marking to determine the direction of a document or piece of information, or to identify points in the text where the bidirectional algorithm is not sufficient to achieve the desired direction.
[..]
However, the style applied by CSS is not permanent. Can be disabled, ignored, unrecognized, or changed/replaced in different contexts.
[..]
Try not to simply connect the CSS style to the general element to achieve the effect.
[..]
HTML or XHTML displayed as text/html
Use markup only. CSS2 recommendations indicate the use of markup for bidi HTML texts. One can actually say that user HTML conformation agents can ignore the CSS bidi properties. Because the HTML specification clearly defines the expected behavior of user agents in relation to bidi markup.

Observing:

Remember that the Unicode specification already assigns a character direction and defines the Bidirectionality Algorithm (BIDI) for determining the most appropriate text direction.

However, it is necessary that the attribute dir is used in HTML. In addition, W3C specifies that the dir should not be inferred from the language (lang).

HTML 4.01:

If you are using version a pre-html 5 version, you will have to specify the values LTR or RTL for the attribute dir.

(See specification 8.2 of HTML 4.01).

HTML 5:

From HTML 5, the value can also be used auto. The direction will be defined according to the first character "strongly typed", that is, belonging to an alphabet - quotes, commas, numbers, and the like do not count.

Given the low complexity of this algorithm (unlike BIDI), only use this value when the direction is not previously known, such as internationalized dynamic content. A h1 containing content coming from the database, for example. It is almost certain that there will be problems if you use the tags html or body - to define the direction of an entire document.

(See specification 3.2.5.6 of HTML 5).

  • Great references, thank you

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.