View Single Post
Old 02-18-2010, 08:20 AM   #1
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,556
Karma: 19500001
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
Click image for larger version

Name:	test.png
Views:	334
Size:	35.1 KB
ID:	45846  
Jellby is offline   Reply With Quote