¿Cómo poner en cursiva el texto hacia atrás?

Question

Me gustaría poner en cursiva el texto hacia atrás o la izquierda en el sentido opuesto a este texto actual. ¿Es posible hacerlo en HTML/CSS o incluso con Javascript/jQuery?

Answer 1

Creo que esto podría ser lo que estás buscando? jsFiddle
Juega con el código un poco. De lo contrario, bastante seguro de que es imposible. Usted puede hacer esto en el software de edición de imágenes, tales como taller de pintura, etc.

#skewed { 
font: 21px Impact, sans-serif; 
text-align: center; 
background: #ccc 
} 
#skewed { 
width:    350px; 
height:   140px; 

-moz-transform: skew(-5deg, -5deg); 
-o-transform:  skew(-5deg, -5deg); 
-webkit-transform: skew(-5deg, -5deg); 
transform:   skew(-5deg, -5deg); 
} 

<div id="skewed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu metus nisi. Integer non adipiscing massa. Etiam et diam magna. Mauris sit amet arcu dui, a malesuada erat.</div> 

<!--[if IE]> 
<style> 
/* 
* The following two rules are for IE only and 
* should be wrapped in conditional comments. 
* The -ms-filter rule should be on one line 
* and always *before* the filter rule if 
* used in the same rule. 
*/ 

#skewed { 

    /* IE8+ - must be on one line, unfortunately */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, 
M12=-0.08748866352592455,M21=-0.08748866352592455, M22=1, 
SizingMethod='auto expand')"; 

/* IE6 and 7 */ 
filter: progid:DXImageTransform.Microsoft.Matrix(
     M11=1, 
     M12=-0.08748866352592455, 
     M21=-0.08748866352592455, 
     M22=1, 
     SizingMethod='auto expand'); 


/* 
* To make the transform-origin be the middle of 
* the object. Note: These numbers 
* are approximations. For more accurate results, 
* use Internet Explorer with this tool. 
*/ 
    margin-left: -9px; 
    margin-top: -18px; 

} 
</style> 
<![endif]-->​  

Answer 2

Es posible que pueda rotar el texto.

http://snook.ca/archives/html_and_css/css-text-rotation

Parece difícil, pero es probable que tenga que hacer esto sobre una base por carácter. No es exactamente el efecto de sesgo deseado, pero está cerca.

Answer 3

Creo que la única manera sería usar una fuente especial que esté inclinada hacia atrás.

Answer 4

La única opción real que creo sería encontrar (o crear) una fuente que tenga letras en cursiva hacia atrás e incrustarla en su página web a través de un @font-face personalizado.

Para que se puede utilizar uno de los muchos generadores font-face en línea, tales como FontSquirrel

Answer 5

He actualizado demostración jos' a usar jQuery para envolver cada letra en un lapso, luego transformar cada letra usando el ejemplo de Mozilla's transform docs & un demo:

HTML

<div id="skewed"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu metus nisi. 
    Integer non adipiscing massa. Etiam et diam magna. Mauris sit amet arcu dui, a 
    malesuada erat. 
</div> 

jQuery

// html function requires jQuery 1.4+ 
$('#skewed').html(function (i, h) { 
    h = h.replace(/\s+/g, '\u00a0').split(''); 
    return '<span>' + h.join('</span><span>') + '</span>'; 
}); 

CSS

#skewed { 
    font: 24px Georgia, sans-serif; 
    background: #ccc; 
    padding: 10px 20px; 
} 
#skewed span { 
    display: inline-block; 
    /* see https://developer.mozilla.org/en-US/docs/CSS/transform */ 
    -webkit-transform: skewx(20deg); 
      -o-transform: skewx(20deg); 
      transform: skewx(20deg); 
} 

Answer 6

Use and embed en su sitio web una fuente compatible cursiva de izquierda, como this one. Hay alternativas gratuitas here.