CODEWITHSUNDEEP
htmlbidi
Lea Cohen
Lea Cohen

Reputation: 8200

Bi-directional Browser Title (Hebrew and English characters in Title)

I have a aspx page whose title has both Hebrew and English characters in it and the order of the words gets messed up.
Is there a way to style the title so the words don't get messed up, or is it an OS problem?

This is what the title should say:

good

This is what the title actually looks like:

not good

Upvotes: 3

Views: 1176

Answers (3)

Pekka
Pekka

Reputation: 449783

@jleedev already has what seems to be the right answer. Here is a bit of background information on it:

Creating HTML Pages in Arabic, Hebrew and Other Right-to-left Scripts

There are some situations where you may not be able to use the markup described in the previous section. In HTML these include the title element and any attribute value.

In these situations you can use invisible Unicode characters that produce the same results.

To replicate the effect of the markup described in the example above related to nested base directions, we can use pairs of characters to surround the embedded text. The first character is one of U+202B RIGHT-TO-LEFT EMBEDDING (RLE) or U+202A LEFT-TO-RIGHT EMBEDDING (LRE). This corresponds to the markup <span dir="rtl"> or <span dir="ltr">, respectively. The second character is U+202C POP DIRECTIONAL FORMATTING (PDF). This corresponds to the in the markup. Below you can see how to apply this to the previous example.

<p>The title says "&#x202B;...&#x202C;" in Hebrew<p>

Upvotes: 4

Josh Lee
Josh Lee

Reputation: 177825

Try using the Unicode direction embedding codes:

The result looks like ‫הוספת קובץ JS עורך ישן‬ - Mozilla Firefox, and it's marked up as follows:

&#x202B; (right-to-left embedding)
הוספת קובץ
JS
עורך ישן
&#x202C; (pop directional formatting)
- Mozilla Firefox

(You ought to be able to write the title with <title dir="rtl">, but I couldn't get that to work.)

Upvotes: 3

Josh
Josh

Reputation: 6322

if you use utf-8 you shouldn't have a problem.

add the following to your <head> and make sure you are saving as utf-8

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Upvotes: 0

Related Questions