2

A lo que me refiero es que como en el japonés o en el árabe, estos inician según yo de la parte superior derecha de la hoja. Y estaba interesado en saber si se podría hacer algo parecido con nuestro idioma. Es para un proyecto

No que simplemente se invierta el texto, si no que se pueda apreciar que se ordena desde el inicio de derecha a izquierda

1
  • 4
    Hola Padrón, bienvenido a Stack Overflow en español. Tu pregunta es un poco pobre porque necesitas añadir lo que has intentado y los problemas exactos. Has investigado algo en Google? Pon, además, un ejemplo de HTML donde se reproduzca lo que intentas hacer, asi quien te responda puede poner su codigo y ver como está funcionando. Mira más info en Cómo preguntar y ejemplo mínimo verificable. Un saludo !
    – lois6b
    el 10 oct. 2018 a las 8:16

3 respuestas 3

8

Deberías añadir a tu pregunta los intentos que has realizado... de todas formas, y tal y como dice @jorge-bowen, debes añadir la propiedad CSS direction:rtl a tu input. Sin embargo con eso no conseguirás que las palabras y las letras también se ordenen de derecha a izquierda.

Para hacer eso tienes dos opciones (una deseable y sencilla y otra que dejo como orientativa):

  • Utilizar la propiedad CSS unicode-bidi: bidi-override:

Es la más sencilla. Con esta propiedad se modifica el flujo de los caracteres en función de la direction indicada. En este enlace tienes más info y en este más

.reves{ 
  unicode-bidi: bidi-override;
  direction: rtl;
}
<input class="reves" type="text"/>

  • Añadir JS (menos recomendable y habría que darle una vuelta):

Con este código al pulsar cualquier tecla distinta al Supr y Delete se añade al value del input el carácter RLM (Right-to-left-mark) con lo que la siguiente vez que se escriba el cursor estará a la izquierda del input.

function rtl(e,elt) {
    if(e.keyCode != 46 && e.keyCode != 8)
    {
        elt.value += "\u200F";
    }
    else
    {
        elt.value = elt.value.substring(0, elt.value.length - 1);
    }
}
.reves{ 
  direction: rtl;
}
<input class="reves" type="text" onkeyup="rtl(event,this)"/>

Extra bonus

Añado aquí la respuesta a tu pregunta del comentario. En el caso de la solución CSS, aunque el input se muestre de derecha a izquierda el valor almacenado en value sigue estando de izquierda a derecha. Para darle la vuelta puedes hacer uso de los prototypes de Arrays reverse y join.

let stringInvertido = document.getElementById("miInput").value.split('').reverse().join('')

Obtenemos el valor del input, los troceamos por el caracter vacío (esto nos devolverá un array con una letra en cada posición, a continuación le damos la vuelta a las posiciones con reverse y luego unimos con join pasándole como parámetro el caracter vacío de nuevo.

.reves{ 
  unicode-bidi: bidi-override;
  direction: rtl;
}
<input class="reves" id="miInput" type="text" onblur="console.log('Sin darle la vuelta: ' + this.value);console.log('Tras darle la vuelta: ' + this.value.split('').reverse().join(''));"/>

6
  • Muchas gracias canijo, eres brillante. Pero otra cosa, ¿cómo hacer lo mismo con una cadena de texto? ósease que deposite un String en una variable el 10 oct. 2018 a las 13:54
  • ¿Te refieres "a darle la vuelta" a una cadena existente o a guardar la cadena escrita en el input en una variable?
    – Kiko_L
    el 10 oct. 2018 a las 14:26
  • Guardarlo en una variable el 10 oct. 2018 a las 14:52
  • Actualizo la respuesta con lo que pides. Si te parece la respuesta adecuada no dudes en aceptarla como correcta :)
    – Kiko_L
    el 10 oct. 2018 a las 15:23
  • Ok, creo que entendí. Pero no detecta saltos de línea ósease “\n” ni los Tabs estoy haciendo cosas locas XD XD el 10 oct. 2018 a las 17:08
1

Puedes hacerlo directamente con CSS utilizando con las propiedades direction y unicode-bidi

body {
 direction: rtl; 
 unicode-bidi: bidi-override;
}
1
  • Wow, menuda propiedad lo del unicode el 10 oct. 2018 a las 8:34
0

Hola hay una propiedad CSS para esos casos por defecto se ordena en un campo input de izquierda a derecha ltr para tu caso seria de derecha a izquierda rtl, agrega esta propiedad css direction: rtl;

<textarea style='width:100%;height:100px'>
  Este texto va de izquierda a derecha
</textarea>

<textarea style="direction:rtl;width:100%;height:100px;unicode-bidi: bidi-override">
  Este texto va de derecha a izquierda
</textarea>

1
  • añado a mi respuesta la propiedad que @cardeol ha indicado a su respuesta el 10 oct. 2018 a las 8:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.