Bidirectional text in XHTML/CSS

Jellby · 02-18-2010, 08:20 AM

Can anyone cast some light on this issue? I want to show a short piece of Hebrew (right-to-left) text in an otherwise left-to-right text, and I'm not sure how the CSS properties "direction" and "unicode-bidi" interact, especially with relation to "weak" characters (punctuation).

Consider the following test:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ops="http://www.idpf.org/2007/ops" xml:lang="es">
<head>
  <title>Bidirectional test</title>
<style type="text/css">
body { font-size: 300%; }
.hebrew1 { unicode-bidi: embed; }
.hebrew2 { unicode-bidi: bidi-override; }
.hebrew3 { direction: rtl; unicode-bidi: embed; }
.hebrew4 { direction: rtl; unicode-bidi: bidi-override; }
}
</style>
</head>
<body>

<p>No direction, embed<br/>
<span class="hebrew1">שיר השירים</span>[29]</p>

<p>No direction, bidi-override<br/>
<span class="hebrew2">שיר השירים</span>[29]</p>

<p>RTL, embed<br/>
<span class="hebrew3">שיר השירים</span>[29]</p>

<p>RTL, bidi-override<br/>
<span class="hebrew4">שיר השירים</span>[29]</p>

</body>
</html>

In Opera 10, only the hebrew1 class (first sample) produces the right display: the "mem" Hebrew letter (the square-like one) on the left, and "[29]" unbroken on the right. I don't know if this is the correct behaviour or if other systems (especially ePUB readers) would do the same.

I gather that I don't need to suply a "direction" property, because the Hebrew characters already have an implicit directionality, and I shoud use "embed" to have the direction of the Hebrew words not affect the outside, but I don't know why specifying a direction (in hebrew3 and hebrew4) is breaking things so badly (se attached screenshot)

Ideas?

EDIT: In the source, I actually use numeric codes for the Hebrew characters, like this (remove spaces between & and #):

& #1513;& #1497;& #1512; & #1492;& #1513;& #1497;& #1512;& #1497;& #1501

Jellby · 02-18-2010, 02:19 PM

I guess it's enough to use the left-to-right mark (& #8206;) after the Hebrew text, to force the direction and bypass the Unicode bidi algorithm, like this:

& #1513;& #1497;& #1512; & #1492;& #1513;& #1497;& #1512;& #1497;& #1501;& #8206;(29)

It seems the "direction" and "unicode-bidi" CSS properties are not really needed.

HarryT · 02-19-2010, 03:23 AM

If this is only a fragment of Hebrew in an otherwise Western European text, it's probably more portable to do it as a graphic image. I do that a lot with books that have short Greek quotes in them.

Jellby · 02-21-2010, 01:28 PM

Grrr... Opera, Firefox and Prince all render the Hebrew text fine now... but the ADE implementation on my Gen3 (and I guess all ADE implementations around) fails:

a) I does not obey the implicit directionality of the Unicode characters, so the Hebrew is rendered left-to-right. Apparently this was recognized 2.5 years ago, but it's still not fixed.

b) It does not recognize :lang(xx) selectors, so I have to add classes on top of it.

(I prefer to avoid the graphic image if possible, HarryT.)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS to "wrap" text between two .xhtml files?	december	Sigil	28	12-06-2013 03:29 PM
CSS for a Kindle-like text formatting?	december	Sigil	2	04-24-2010 07:44 AM
Please tell me about the "bidirectional dictionary"	horsewishr	Ectaco jetBook	22	03-08-2010 08:26 AM
Does it have to be XHTML 1.1 Strict?	AlexBell	ePub	7	07-18-2009 07:51 AM
xhtml document	deadite66	iRex	1	08-02-2006 03:15 PM

02-18-2010, 08:20 AM	#1
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Bidirectional text in XHTML/CSS Can anyone cast some light on this issue? I want to show a short piece of Hebrew (right-to-left) text in an otherwise left-to-right text, and I'm not sure how the CSS properties "direction" and "unicode-bidi" interact, especially with relation to "weak" characters (punctuation). Consider the following test: Code: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ops="http://www.idpf.org/2007/ops" xml:lang="es"> <head> <title>Bidirectional test</title> <style type="text/css"> body { font-size: 300%; } .hebrew1 { unicode-bidi: embed; } .hebrew2 { unicode-bidi: bidi-override; } .hebrew3 { direction: rtl; unicode-bidi: embed; } .hebrew4 { direction: rtl; unicode-bidi: bidi-override; } } </style> </head> <body> <p>No direction, embed<br/> <span class="hebrew1">שיר השירים</span>[29]</p> <p>No direction, bidi-override<br/> <span class="hebrew2">שיר השירים</span>[29]</p> <p>RTL, embed<br/> <span class="hebrew3">שיר השירים</span>[29]</p> <p>RTL, bidi-override<br/> <span class="hebrew4">שיר השירים</span>[29]</p> </body> </html> In Opera 10, only the hebrew1 class (first sample) produces the right display: the "mem" Hebrew letter (the square-like one) on the left, and "[29]" unbroken on the right. I don't know if this is the correct behaviour or if other systems (especially ePUB readers) would do the same. I gather that I don't need to suply a "direction" property, because the Hebrew characters already have an implicit directionality, and I shoud use "embed" to have the direction of the Hebrew words not affect the outside, but I don't know why specifying a direction (in hebrew3 and hebrew4) is breaking things so badly (se attached screenshot) Ideas? EDIT: In the source, I actually use numeric codes for the Hebrew characters, like this (remove spaces between & and #): & #1513;& #1497;& #1512; & #1492;& #1513;& #1497;& #1512;& #1497;& #1501 Attached Thumbnails

02-18-2010, 02:19 PM	#2
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	I guess it's enough to use the left-to-right mark (& #8206;) after the Hebrew text, to force the direction and bypass the Unicode bidi algorithm, like this: & #1513;& #1497;& #1512; & #1492;& #1513;& #1497;& #1512;& #1497;& #1501;& #8206;(29) It seems the "direction" and "unicode-bidi" CSS properties are not really needed.

02-19-2010, 03:23 AM	#3
HarryT eBook Enthusiast Posts: 85,544 Karma: 93383043 Join Date: Nov 2006 Location: UK Device: Kindle Oasis 2, iPad Pro 10.5", iPhone 6	If this is only a fragment of Hebrew in an otherwise Western European text, it's probably more portable to do it as a graphic image. I do that a lot with books that have short Greek quotes in them.

02-21-2010, 01:28 PM	#4
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Grrr... Opera, Firefox and Prince all render the Hebrew text fine now... but the ADE implementation on my Gen3 (and I guess all ADE implementations around) fails: a) I does not obey the implicit directionality of the Unicode characters, so the Hebrew is rendered left-to-right. Apparently this was recognized 2.5 years ago, but it's still not fixed. b) It does not recognize :lang(xx) selectors, so I have to add classes on top of it. (I prefer to avoid the graphic image if possible, HarryT.)

Advert