How to use <q> with RTL Hebrew alphabet

Question

If I have a section of text with Hebrew characters:

<p>
    אאאאא <q>הללויה</q> פֿון לענאָרד כּהן אויף ייִדיש
</p>
<p>
          <q>הללויה</q> פֿון לענאָרד כּהן אויף ייִדיש
</p>

when the <q>…</q> is surrounded by other Hebrew text (the first line with the extra "אאאאא"), it works fine. But if the quote begins the paragraph, the first quotation mark gets put in the wrong place:

The same thing happens with both Chrome and Firefox.

I can understand what causes this to happen (the initial <q> produces a quotation mark before any RTL characters are seen), and why the quoted word has to be at the "end" of the line rather than the "beginning" (HTML processes the elements left-to-right).

But what is the "correct" way of writing this HTML so that the quotation marks appear in the appropriate places? Is it even possible without CSS?

Added details:

• The HTML does have <meta charset="UTF-8" />.
• The text is simply the original title of something, to appear in a paragraph with other similar items (those are in Roman characters), so a blockquote wouldn't be appropriate. And even if it were, using blockquote makes no difference. It is the <q> that appears to be misbehaving.
• For those interested, it translates to "Halleluja" by Leonard Cohen in Yiddish, which can be found on YouTube.

Answer 1

Is it even possible without CSS?

I suspect not. The browser is applying its own default styles - which include the direction of the text being left-to-right unless it can find a clue that this isn't the case.

But - as I'm guessing you already know - you can explicitly override the direction of the text with a single CSS style declaration.

p {
  direction: rtl;
}

Answer 2

You may want to consider using the blockquote tag for this type of functionality.

See details here.

You may also want to make sure that the HTML is set to the UTF-8 standard which includes Hebrew characters. You may have to use the hexcodes pertinent to these characters. This is probably going to be a better bet than just copying text over from a Hebrew text-editor.

More details of unicode as it pertains to the Hebrew language.

More details on how to use unicode in HTML.

Answer 3

In fact, it is possible to get this correct using only HTML:

<p>
          Wrong: <q>הללויה</q> פֿון לענאָרד כּהן אויף ייִדיש
</p>
<p>
          Right: &#8207;<q>הללויה</q> פֿון לענאָרד כּהן אויף ייִדיש
</p>

Unicode provides a "right-to-left mark" character precisely for this purpose:

Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline