How can I mix hebrew and latin text in a HTML document?

Asked 6/4, 2014 at 15:2 Answered 16/9, 2014 at 7:41

Solved html right-to-left hebrew left-to-right

I have a html document that contains hebrew and latin text. It is encoded with utf-8:

<!DOCTYPE HTML>
<html>
<head>
  <title>Title</title>
  <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
</head>

<style type='text/css'> 
     .h  { color: green}
</style>

<body>

   <div>
      here are some words הנה כמה מילות (100, 200)
   </div>

   <div>
      here are some words <span class='h'>הנה כמה מילות</span> (100, 200)
   </div>

   <div>
      here are some words <span class='h'>הנה כמה מילות</span> <span>(100, 200)</span>
   </div>

   <div>
      here are some words <span class='h'>הנה כמה מילות</span> <b>WORD</b> <span>(100, 200)</span>
   </div>

</body>
</html>

The first three lines are not displayed as I think they should. The fourth (with the additional <b>WORD</b> in front of the parantheses is.

Here's how this document is displayed in Firefox:

Firefox' rendeering

Edit Not even the copy/paste of my html text works correctly, so here's a screen shot of the original html (sorry, but it seems as though it's impossible to get this text rendered correctly):

enter image description here

Commendation answered 6/4, 2014 at 15:2 Comment(2)

What did you expect? You should specify what you expected and how the actual rendering differs from that, – Longheaded 6/4, 2014 at 17:16

You can also use CSS direction as style='direction:rtl;' – Gav 7/4, 2014 at 13:45

When you have words in Latin and Hebrew letters mixed on the same page, the sequences of words are normally written properly due to the inherent directionality of characters. Hebrew passages run right to left.

But when characters like parentheses are involved, things get more complicated. Parentheses are directionally neutral (or utral) and participate in the direction of adjacent characters. Problems arise when they appear between Latin and Hebrew letters. A simple remedy is to use the LEFT-TO-RIGHT MARK character, representable in HTML as &lrm;, for example

here are some words <span class='h'>הנה כמה מילות</span> &lrm;(100, 200)

Longheaded answered 6/4, 2014 at 18:18 Comment(1)

Is utral a specific term? If I google for "utral" in combination with "Unicode", "characters", "directional" etc, I find nothing. – Attenuator 11/5, 2018 at 6:10

Try adding the following attributes to your HTML:

<html><meta charset="UTF-8">......

<body dir="rtl">...

Puritan answered 16/9, 2014 at 7:41 Comment(2)

Are you sure the backslashes are needed and the <body> tag has to follow the <p> tag? – Attenuator 16/9, 2014 at 16:29

hi, the backlashes are surely needed because the " signs are part of the HTML code. about the <p> (that stands for paragraph) is just to format the text better. but that is not mandatory . – Puritan 17/9, 2014 at 7:49

Recommended topics

Hot tags