CODEWITHSUNDEEP
htmlbrowserinternationalization
Saeed Neamati
Saeed Neamati

Reputation: 35852

Changing the direction of HTML <title> tag to right-to-left

Consider this title for a web page:
enter image description here

This is a mixed text from right-to-left and left-to-right languages, and the directionality of the entire text might be:

  1. Left-to-right, if you embed rtl snippets inside ltr text
    enter image description here

  2. Right-to-left, if you embed ltr snippets inside rtl text
    enter image description here

In some web pages, you need to provide a right-to-left title, intermixed with left-to-right text snippets. However, browser doesn't format it correctly. It renders the entire <title> content with ltr directionality. This causes a title, which should be shown like
enter image description here
to be shown like
enter image description here

I know that CSS is not working there. Is there any way to force the browser to render the <title> with correct directionality?

Upvotes: 18

Views: 7927

Answers (5)

vahid kh
vahid kh

Reputation: 1882

Simply use this CSS rules to cover all situations:

*[dir="ltr"] {
  direction: ltr;
  unicode-bidi: embed;
}
*[dir="rtl"] {
  direction: rtl;
  unicode-bidi: embed;
}
bdo[dir="ltr"] {
  direction: ltr;
  unicode-bidi: bidi-override;
}
bdo[dir="rtl"] {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Upvotes: 0

ThinkingStiff
ThinkingStiff

Reputation: 65361

Have you tried:

<title>left to right &#x202E;right to left</title>

For the body, you can use CSS (direction: rtl; and unicode-bidi: bidi-override;) or markup (<bdo dir="rtl">).

Demo: http://jsfiddle.net/ThinkingStiff/hD5Sp/

HTML:

<span>left to right <bdo dir="rtl">"right to left"</bdo> left to right</span><br />
<span class="rtl">right to left <span class="ltr">"left to right"</span> right to left</span>

CSS:

.rtl {
    direction: rtl; 
    unicode-bidi: bidi-override;
}

.ltr {
    direction: ltr; 
    unicode-bidi: bidi-override;    
}

Output:

enter image description here

Upvotes: 4

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201798

Use the RIGHT-TO-LEFT EMBEDDING character (RLE, U+202B) at the start of title element contents, e.g.

<title>&#x202b;אבג Hello ابثج</title>

RLE is normally described and used as a character to be used (together with POP DIRECTIONAL FORMATTING) for embedding a run of left-to-right text into right-to-left text or vice versa, in situations that aren’t properly handled by automatic mechanisms. But it seems to work for title elements too, at least on IE, Firefox, and Opera.

Upvotes: 12

Mr Lister
Mr Lister

Reputation: 46589

You could try using the Unicode RIGHT-TO-LEFT OVERRIDE character. See here.
That is, start the title text with &#x202E;
A quick test shows that it works, at least on my browser; not sure if it will work on all browsers. And it may write pizza backwards. Use with care.

Upvotes: 12

Ofer Zelig
Ofer Zelig

Reputation: 17508

There is no way to force the browser to change direction. You can, of course, write the sentence the other way around, and there are APIs out there that can get a meant-to-be RTL text, and produce an LTR text which its end result looks like a valid RTL sentence.

Please note that some browsers, especially in RTL-language locations, get a browser which is RTL in the first place. That is, their title is RTL whatsoever. For the good and for the bad. So even if you apply an RTL-to-LTR hack as I described, those users will see it in reverse.

Upvotes: 0

Related Questions