11

I would like to italicize text backwards or the left the opposite way of this current text. Is this possible to do in HTML/CSS or even with Javascript/jQuery?

1
  • 1
    +1 for an interesting question, but I have my doubts that you'll find a satisfactory solution.
    – Spudley
    Commented Aug 15, 2012 at 19:58

6 Answers 6

8

I updated jos' demo to use jQuery to wrap each letter in a span, then transform each letter using the example from Mozilla's transform docs & a 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);
}
0
5

I think this might be what you're looking for? jsFiddle
Play with the code a bit. Otherwise pretty sure it's impossible. You CAN do this in image editing software, such as Paintshop, 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]-->​    
1
  • Thanks for the help and information. Not quite what I am looking for but the best solution I have seen other than using Photoshop or some program to create the backward italics. Thanks Again!
    – L84
    Commented Aug 15, 2012 at 20:20
2

You might be able to rotate the text.

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

Seems difficult, but you will probably have to do this on a per-character basis. Not quite the intended skewing effect, but is close.

1
  • @arxanas, Agreed. :-D Just throwing it out there as a possible option if there were no others. Looks like the skew method posted by jos will work fine.
    – Brad
    Commented Aug 15, 2012 at 20:06
2

I think the only way would be to using a special font that is tilted backwards.

2

Your only real option I believe would be to find (or create) a font that has backward italic letterforms and embed it into your webpage via a custom @font-face.

For that you can use one of many online font-face generators, such as FontSquirrel

2
  • Well, yes. You would still need to embed it, as none of your users would have the edited font on their system. Commented Aug 15, 2012 at 20:51
  • Sure -- that what I was meaning. I was just saying that you didn't have to actually create a font from scratch. Commented Aug 15, 2012 at 21:06
1

Use and embed into your website a left-leaning italic compatible font, like this one. There are free alternatives here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.