Come in corsivo il testo all'indietro?

Question

Desidero mettere in corsivo il testo all'indietro oppure a sinistra nella direzione opposta a questo testo attuale. È possibile farlo in HTML/CSS o anche con Javascript/jQuery?

Answer 1

Penso che questo potrebbe essere quello che stai cercando? jsFiddle
Gioca un po 'con il codice. Altrimenti è quasi sicuro che sia impossibile. È possibile farlo in immagine software di editing, come ad esempio verniciatura, ecc

#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

Potrebbe essere possibile ruotare il testo.

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

Sembra difficile, ma probabilmente si dovrà fare questo su una base per-carattere. Non proprio l'effetto di inclinazione previsto, ma è vicino.

Answer 3

Penso che l'unico modo sarebbe utilizzare un carattere speciale inclinato all'indietro.

Answer 4

La tua unica vera opzione credo sarebbe quella di trovare (o creare) un font che abbia lettere in lettere corsive a rovescio e lo incorpori nella tua pagina web tramite un custom @font-face.

Per questo è possibile utilizzare uno dei molti generatori font-face on-line, come ad esempio FontSquirrel

Answer 5

ho aggiornato demo Jos' di utilizzare jQuery per avvolgere ogni lettera in un arco, poi trasformare ogni lettera utilizzando l'esempio da 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 nel tuo sito web un font compatibile italico di sinistra, come this one. Ci sono alternative gratuite here.