letra cursiva árabe

font-style:italic; inclina la fuente a la derecha así: mi fuente

En árabe, la escritura se realiza de derecha a izquierda, no de izquierda a derecha. Lo que estoy tratando de lograr es poner la fuente en cursiva para que se incline hacia la izquierda en lugar de hacia la derecha. ¿Alguna sugerencia? No tiene que incluir letras árabes en su respuesta. Quiero algo que haga lo contrario de font-style:italic; en cualquier idioma.

introduzca la descripción de la imagen aquí

Puedes usar algo llamado skew en la statement de transformación CSS:

 .fontToTransform { font-size: 40px; transform: skewX(15deg); -webkit-transform: skewX(15deg); -moz-transform: skewX(15deg); -o-transform: skewX(15deg); -ms-transform: skewX(15deg); } 

Esto te sacará de la molestia de manipular la fuente. Esto transformará todo el bloque en el que se encuentra tu texto. Es posible que necesite algún tipo de validación para verificar cada salto de línea y separarlos para que sean tags nuevas cada vez. Entonces, como esta podría no ser una solución real, puede tomarla en consideración si desea cortar texto más corto (de una sola línea).

Editar

Esto es muy raro, pero aquí hay un ejemplo sucio que descubre las líneas individuales en su bloque de texto y coloca a cada una de ellas en un nuevo span , lo que hará que cada línea tenga un estilo separado con el estilo skewX . Aqui tienes:

CSS

 #fontTransform { font-size: 40px; margin-right: 30px; text-align: right; } #fontTransform span { display: block; transform: skewX(15deg); -webkit-transform: skewX(15deg); -moz-transform: skewX(15deg); -o-transform: skewX(15deg); -ms-transform: skewX(15deg); } 

HTML

     HTML      

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

main.js

 'use strict'; $(document).ready(function(){ var d = document.getElementById('fontTransform'); var t = d.innerHTML; var w = t.split(' '); var lines = []; d.innerHTML = w[0]; var height = d.clientHeight; var tmp_line = []; for (var i = 0; i < w.length; i++) { d.innerHTML = d.innerHTML + ' ' + w[i]; tmp_line[tmp_line.length] = w[i]; if (d.clientHeight > height) { height = d.clientHeight; console.log(w[i-1]); delete tmp_line[tmp_line.length-1]; lines[lines.length] = tmp_line; tmp_line = []; } } // Destroy d.innerHTML d.innerHTML = ''; var tmp_html = ''; // Refill the lines within spans for (var i = 0; i < lines.length-1; i++) { tmp_html = ''; for (var x = 0; x < lines[i].length-1; x++) { tmp_html = tmp_html + lines[i][x] + ' '; } tmp_html = tmp_html.trim(); tmp_html = tmp_html + ''; d.innerHTML = d.innerHTML + tmp_html; } }); 

Podría considerar el uso del enlace resize() jQuery para actualizar los bloques de texto que tienen anchos de percentiles. Tampoco estoy seguro de lo que sucede con palabras muy largas que no caben en una línea. No es que esto realmente pueda suceder, pero tenga en cuenta que no se ha probado y puede hacer que las palabras se pierdan. Realmente necesito hacer más pruebas para la publicación real.

Como compañero de usuario de lenguaje RTL siento tu dolor 🙂

¿Qué te parece usar una fuente web árabe e importarla a tu CSS? Amiri es una fuente web abierta que tiene la inclinación tipográfica adecuada para el script en árabe naskh. Incluso está alojado en el CDN de Google!

Entonces podrías simplemente hacer:

 @import url(http://fonts.googleapis.com/earlyaccess/amiri.css); .myItalic{ font-family: 'Amiri', serif; font-style: italic; } 

Aquí hay un ejemplo de JSFiddle que funciona

Si esta fuente no es de su agrado, puede utilizar otras fonts web. Aquí hay algunos para probar. Si ninguno de ellos te funciona, supongo que puedes encontrar una fuente que te guste, modifica su versión en cursiva y la incrusta en tu página de la misma manera.

De acuerdo con Allendar (desde arriba)

Se puede hacer en CSS3 fácilmente. No hay necesidad de JavaScript … en absoluto.

Aquí está tu respuesta:

         

Arabic Font

Sin embargo, esto es compatible con FF, IE10 y Chrome (no para

Desafortunadamente, no hay manera de hacer esto con la propiedad de estilo de fuente. Consulte la página aquí: http://www.w3schools.com/cssref/pr_font_font-style.asp . No estoy seguro de si hay fonts árabes por ahí que puedan ponerse en cursiva en la dirección opuesta. Si los hay, probablemente no estén ampliamente soportados.

El ajuste dir=rtl solo afecta la dirección del diseño. No cambia la dirección del texto; aún ve “algo de código en cursiva” en su ejemplo, no “edoc cilati emos”, ni refleja cada carácter de izquierda a derecha.

Las variantes en cursiva de las fonts árabes, donde existen, a menudo se inclinan hacia la izquierda en lugar de hacia la derecha. (Esto a veces se conoce como una variante “iraní”). Sin embargo, este no es un comportamiento que se pueda controlar en CSS, ya que es una decisión que toma el diseñador de la fuente, no el navegador.

Querido, hay dos cosas que solía cortar el proyecto wajbah. Usa la dirección rtl en el código como:

 dir="rtl" 

después de eso, el contenido que desea mostrar a la derecha usa float right .

Se llevará a cabo su problema.

Pruébalo y responde por favor.