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

Question

Consider this title for a web page:

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
   

2. Right-to-left, if you embed ltr snippets inside rtl text
   

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

to be shown like

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

Answer 1

You could try using the Unicode RIGHT-TO-LEFT OVERRIDE character. See here.
That is, start the title text with ‮
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.

Answer 2

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.

Answer 3

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: