Cómo forzar una pieza de texto a ser 'dirección ltr' dentro de un 'dirección rtl' párrafo

Question

Por lo tanto, los números de teléfono siempre son ltr (de izquierda a derecha).

Trabajando en un sitio web multilingüe tengo que insertar un número de teléfono (con el prefijo '+' y números separados por '-') dentro de un párrafo de texto que tenga sentido RTL (para los idiomas pertinentes, por supuesto)

Así que tengo algo como esto:

.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>

por supuesto, esto no funciona porque 'direction' sólo funciona para los elementos de bloque y 'span 'es un elemento en línea. Necesito que el número de teléfono esté dentro del párrafo, así que no puedo cambiar 'span' a 'display:inline'

Estoy siendo claro?

¿Cómo hacer que funcione?

Answer 1

Usted puede utilizar un carácter Unicode marcador direccionalidad justo antes de la señal de + para dar el algoritmo de la pista que necesita.

Estos son:

LTR: 0x200E 
RTL: 0x200F 

Así:

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

Ver this respuesta para obtener más detalles.

Answer 2

Trate de añadir #phone {direction:ltr; display:inline-block}

Answer 3

Otra opción podría ser utilizar dir='ltr' atributo, en su elemento en línea:

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

Tenga en cuenta que la inclusión de ‎ en el código HTML es tan malo como el uso de dir='ltr' atributo.