1

I need to draw a outline to a text with outwards stroke.

<div style="color:#CDCDCD;
            -webkit-text-stroke-color:black;
            -webkit-text-stroke-width:0.04em;
            font-family:sans-serif;
            word-wrap:normal;
            font-size:57px;
            background-color:transparent;
            text-align:left;
            line-height:112%">
    <p>
        PI:<span style=";font-style:italic">I TRAINED WITH HIM</span>
        <br/> 
        <span style=";font-style:italic">three times a week</span>
        <br/> 
        <span>at the ashram.</span>
    </p>
</div>

-webkit-text-stroke makes an black outline on the text but outline is drawn inwards, which inturn reduces the white portion of font and makes it look thin. So is there any way to draw the outline outwards of the text.

Thanks.

Jey
  • 55
  • 1
  • 9
Prateek
  • 51
  • 6
  • It's hard to read.Can you create `css` class for it and add all css styles. – Arpit Srivastava Nov 04 '14 at 04:48
  • See this blog post: http://www.petercarrero.com/examples/stroke/ – Robby Cornelissen Nov 04 '14 at 04:49
  • @RobbyCornelissen I have tried it..But in that case the html size is doubled as we have to make the same div twice.. So if there is any css property which will draw the outline outwards will help. – Prateek Nov 04 '14 at 04:53
  • @Prateek Why would the HTML size be doubled? – Robby Cornelissen Nov 04 '14 at 04:55
  • @RobbyCornelissen As the div has to be drawn twice, one with -webkit-text-stroke and other without it, so that background div with text stroke gives an impression of outline over the foreground div. The HTML size(size in memory) will be doubled as compared to html with one div. right? – Prateek Nov 04 '14 at 05:01
  • @Prateek No way to know without profiling. Anyway, does it matter? Probably not unless you're rendering dozens of megabytes of text this way. – Robby Cornelissen Nov 04 '14 at 05:06

0 Answers0