html - css for double height text and double width text in font style

Question

Any one can help me to do double height text and double width text in font style(as like in dot matrix printers) in css without using any images.

Any code other than this?

heading{
   font-weight:bold; 
   width:200%;
}

What I expect is as below.

Thanks.

Answer 1

OP,

Updated fiddle that includes all vendor prefixes for transform and transform-origin:http://jsfiddle.net/LTaAy/1/

See this fiddle: http://jsfiddle.net/LTaAy/

IMG

HTML

  <p class="doubleWidth">DOUBLE WIDTH</p>
  <p class="doubleHeight">Double Height</p>
  <p class="doubleWidthandHeight">Double Width and Height</p>

CSS

p {
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
}
p.doubleWidth {
    -webkit-transform: scaleX(2);
    -moz-transform: scaleX(2);
}
p.doubleHeight {
    -webkit-transform: scaleY(2);
    -moz-transform: scaleY(2);
}
p.doubleWidthandHeight {
    -webkit-transform: scaleX(2) scaleY(2);
    -moz-transform: scaleX(2) scaleY(2);
}

I only included 2 vendors prefixes, but they should be applied as necessary. - Only true above, This fiddle http://jsfiddle.net/LTaAy/1/ has been updated.

Hope it helps.