2010-12-01 9 views
15

So sind die Telefonnummern immer ltr (von links nach rechts).So erzwingen Sie, dass ein Stück Text in Richtung 'Richtung' geschrieben wird.

Arbeiten auf einer mehrsprachige Website, die ich brauche eine Telefonnummer einfügen (mit einem ‚+‘ Präfix und Zahlen getrennt durch ‚-‘) in einem Textabsatz, die Richtung rtl hat (nach relevanten Sprachen natürlich)

Also ich habe so etwas wie dies:

.ltr #test {direction:ltr} 
 
.rtl #test {direction:rtl} 
 
#phone {direction:ltr}
<div class="ltr"><p id="test">Please call to <span id="phone">+44-123-321</span> for some help.</p></div> 
 
<div class="rtl"><p id="test">Please call to <span id="phone">+44-123-321</span> for some help.</p></div>

natürlich diese nicht funktioniert, weil ‚direction‘ funktioniert nur für Blockelemente und 'span 'ist ein Inline-Element. Ich brauche die Telefonnummer innerhalb des Absatzes, damit ich nicht 'span' zu 'display:inline' ändern kann.

Ich bin klar?

Wie funktioniert es?

+1

RTL-Algorithmen berücksichtigen normalerweise Zahlen, so dass Sie nichts tun müssen, damit Zahlen korrekt gerendert werden, unabhängig von 'LTR' oder' RTL' des Containers. Sehen Sie dieses Problem tatsächlich oder versuchen Sie es einfach vorzutäuschen? – Oded

+2

@Oded: Ich sehe es. Ich denke, wegen des '+' und '-' zwischen den Zahlen ist es einfach verwirrend den Algorithmus ... – Jonathan

+0

In Arabisch zumindest sollte das + Zeichen links von einer Telefonnummer gehen, genau wie es in Englisch tut. Geben Sie die Telefonnummer genau wie in Englisch ein, tippen Sie zuerst das Zeichen "+", dann die erste Zahl von links, dann die zweite Zahl von links und so weiter. Möglicherweise versuchen Sie, etwas zu beheben, das eigentlich kein Problem ist. – Flimm

Antwort

12

Sie können nur ein Unicode-Direktionalität Markierungszeichen verwenden, vor dem + Zeichen dem Algorithmus den Hinweis es braucht zu geben.

Diese sind:

LTR: 0x200E 
RTL: 0x200F 

So:

<p id="text">Please call to <span id="phone">&#x200F;+44-123-321</span> for some help</p>

Siehe this SO um weitere Informationen zu beantworten.

+6

Ich habe das getestet und kann bestätigen, dass es funktioniert, allerdings in HTML-Notation wird '& # x200E;' und '& # x200F;' sein. –

+0

@nikc - Gut entdeckt. Aktualisiertes HTML – Oded

19

Versuche Zugabe #phone {direction:ltr; display:inline-block}

+3

Dies scheint die korrekteste "style" -orientierte Antwort zu sein. – tutuDajuju

+0

'Da HTML-UAs den CSS-Stil ausschalten können, empfehlen wir HTML-Autoren, das HTML-dir-Attribut und zu verwenden, um ein korrektes bidirektionales Layout zu gewährleisten. Autoren sollten keine Richtung in HTML-Dokumenten verwenden. Quelle: http://www.w3.org/TR/css-writing-modes-3/#direction –

6

könnte eine weitere Option zu verwenden sein dir='ltr' Attribut, in der Inline-Element: das &#x200E; in Ihrem HTML einschließlich

<p id="text">Please call to <span dir='ltr'>+44-123-321</span> for some help</p> 

Bitte beachten Sie so schlecht wie mit dir='ltr' Attribut.

+0

IMHO ist dies die schönste Lösung. – fguillen