Hi,
Das heißt, alle meine Browser (IE,FF,Opera,Safari) entscheiden die Darstellung nach dem Inhalt. Das finde ich krass. Wo liegt hier mein Denkfehler?
Du bist sehr tief in die Abgründe des Unicode-Bidi-Algorithmus gestoßen. ;-)
CSS sagt nämlich (siehe http://www.w3.org/TR/CSS2/visuren.html#direction):
| This corresponds to adding a LRO (U+202D; for 'direction: ltr') or RLO
| (U+202E; for 'direction: rtl') at the start of the element and a PDF
| (U+202C) at the end of the element.
Betrachte nun folgenden HTML-Code:
<p>Mail: ‮tset.niamod@em‬ 48 Stunden vorher.</p>
Da ist kein CSS mehr, dafür die RLO und PDF-Steuerzeichen mit drin. Das ist äquivalent zu Deiner CSS-Geschichte - und siehe da: auch hier wandert das 48 vor Deine E-Mail.
Warum ist das so? Es gibt einen relativ komplizierten Algorithmus, den Unicode-Bidi-Algorithmus, der dafür verantwortlich ist, siehe http://www.unicode.org/reports/tr9/.
Was sagt der nun?
- Der Absatz selbst hat die Default-Richtung L, aber nicht forciert (d.h. sollte ein R-Zeichen auftauchen, wird die Richtung selbstständig geändert). Das RLO-Zeichen startet nun einen Override-Abschnitt, wo alle Zeichen forciert die Richtung R bekommen. Das PDF-Zeichen beendet nun den Override-Abschnitt und der normale Abschnitt geht weiter.
D.h. Du hast folgende Situation:
Text: Hallo ‮tsetÊc; 48 Stunden.
Einzelne Zeichen mit ursprünglichen Eigenschaften (_ == Leerzeichen, | == Spezielles Bidi-Zeichen):
H a l l o _ | t s e t | _ 4 8 _ S t u n d e n
L L L L L N L L L L N EN EN N L L L L L L L
Nun wird nach Regel X4 die Eigenschaft zwischen den Trennzeichen explizit geändert:
H a l l o _ | t s e t | _ 4 8 _ S t u n d e n
L L L L L N R R R R N EN EN N L L L L L L L
Nun werden nach Regel X9 die Unicode-Sonderzeichen entfernt:
H a l l o _ t s e t _ 4 8 _ S t u n d e n
L L L L L N R R R R N EN EN N L L L L L L L
Nun wird nach Regel N1 das vorher neutrale Leerzeichen nach "tset" in zu einem Leerzeichen mit R-Eigenschaft:
R N EN → R R EN [Aus den Regeln]
H a l l o _ t s e t _ 4 8 _ S t u n d e n
L L L L L N R R R R R EN EN N L L L L L L L
(Die anderen N werden auch noch aufgelöst, aber die sind relativ egal.)
Das heißt jetzt aber folgendes: Du hast jetzt einen Text, der einen Abschnitt "Hallo" enthält, der LTR ist, einen Abschnitt "tset 48", der RTL ist (EN nach R ist fast wie R, EN nach L ist wie L) und Du hast einen Abschnitt "Stunden" der wieder LTR ist, d.h. Du hast 3 Abschnitte und der mittlere wird umgedreht.
Weil also 48 Zahlen sind, wirkt sich das hier auch darauf aus. Die Browser machen es hier also alle vollkommen richtig, auch wenn das zu WTFs Deinerseits führt. ;-)
Mögliche Auswege:
- Das einschließende Element mit »style="direction: ltr; unicode-bidi: bidi-override;"« angeben, dann wird Typ L auf die Zahlen forciert (das innere Element überschriebt dagegen das wieder), z.B.
<p style="direction: ltr; unicode-bidi: bidi-override;">Mail: <a href="mailto:me" onclick="location.href= this.href + '@domain.test';return false;" style="unicode-bidi: bidi-override;direction: rtl;">tset.niamod@em</a> 48 Stunden vorher.</p>
- An den Anfang des vorigen Elements ein U+202D einfügen, damit LTR forciert wird:
<p>‭Mail: <a href="mailto:me" onclick="location.href= this.href + '@domain.test';return false;" style="unicode-bidi: bidi-override;direction: rtl;">tset.niamod@em</a> 48 Stunden vorher.</p>
- U+202A oder U+202D vor das 48 (aber *nicht* direkt nach </a> sondern erst *nach* dem Leerzeichen):
<p>Mail: <a href="mailto:me" onclick="location.href= this.href + '@domain.test';return false;" style="unicode-bidi: bidi-override;direction: rtl;">tset.niamod@em</a> ‭48 Stunden vorher.</p>
Viele Grüße,
Christian