CSS text stroke outside of letters

Question

Okay, been struggling with this for a bit now and I have pretty much the appearance I want but am now struggling with positioning the items. Basically I want a stroked text with the stroke on the outside, meaning the webkit text stroke is useless.

So I figured I'll position two text elements on top of each other and do it that way. And that works great, except since I am using position:absolute the element essentially has no height.

The HTML looks like this:

<div class="hcontainer"
    <h2>A Framework For Web Artisans</h2>
    <span class="h2white">A Framework For Web Artisans</span>
</div>

The CSS like this:

h2{font-size:2em; 
margin: 10px 0;
color:#234F70;
-webkit-text-stroke: 10px #531A16;
-webkit-text-fill-color:#FFF;
letter-spacing:-2px;
position:absolute; 
top:10px; 
left:0px;}

.h2white{font-family:dom_bold,arial black;
font-size:2em; 
margin: 10px 0;
color:#FFF;
position:relative; 
top:10px; left:0px;
letter-spacing:-2px;
position:absolute;}

.hcontainer{position:relative;clear:both;height:2em;}

So here's the issue. The hcontainer needs to have a set height because the element it contains is positioned absolutely therefore has no height and messes up the flow. The problem is making that height dynamic so I can space the elements properly.

I could make a separate container for each heading but that just seems a bit much. Can anyone think of a better way to do what I'm trying to do here? Or a way around the height issue?

http://jsfiddle.net/calder12/9M7YZ/

Answer 1

I don't really understand what it means that "The problem is making that height dynamic so I can space the elements properly." But if you want to not have to declare a height on .hcontainer, you can use a negative top margin on .h2white to place it on top of the red h2 instead of using absolute positioning. Like so:

http://jsfiddle.net/9M7YZ/10/

.h2white{
    font-family:lemon;
    font-weight:bold;
    font-size:4em;
    color:#FFF;
    letter-spacing:-2px;
    margin-top:-86px;
    position:absolute;
}