Set font-size in pixels from em units during resizing of page?

Set font-size in pixels from em units during resizing of page?

Ok, have been looking through code on how to get pixel values from em
units, but the code I've seen is this:
var eleInpx = $(".element").css("font-size");
However, this doesn't help me, since there is a font-size already applied
to the element in em units, and since the font-size changes during
resizing of the browser window (because it is in em units), I need to set
the wrapper element in pixels according to the font-size in pixels.
Mainly, because I need to use pixels in the wrapper element, not em units
for the effect that I am using with CSS Triangles, and em units do not
properly scale well when coding in CSS Triangles. Therefore I am stuck
with pixels for this. However, I need this wrapper element to resize, in
height (in pixels), according to the font-size (which is in em units) of
the element within it, as the browser window resizes.
Here's a bit of HTML to give you an example of what I mean exactly:
<div style="position: absolute; top: 50%;">
<div class="name_container">
<div class="sub_head">
<h1 class="h1_candidates">
<span class="sidestar-left">&#9733;</span> Ceyl Prinster
<span class="sidestar-right">&#9733;</span>
</h1>
<div class="sub_head_text">President &amp;
CEO&nbsp;&nbsp;&bull;&nbsp;&nbsp;Colorado Enterprise
Fund&nbsp;&nbsp;&bull;&nbsp;&nbsp;Denver, CO</div>
</div>
</div>
</div>
CSS looks like this:
div.name_container {
text-align: center;
margin: 0 auto;
}
.sub_head {
display: inline-block;
padding: 0 1em .3em;
position: relative;
margin: 0 auto;
top: -50px;
text-align: center;
background-color: #212D3B;
font-family: "MissionGothic-Regular", "Mission Gothic Regular
Regular", "mission_gothicregular";
font-size: 1.6em;
color: #f2efe9;
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
-khtml-border-radius: .5em;
border-radius: .5em;
text-transform: uppercase;
}
.sub_head_text {
text-align: center;
text-transform: uppercase;
font-size: .8em;
margin: -0.5em;
padding-bottom: .5em;
position: relative;
white-space: nowrap;
}
.h1_candidates {
white-space: nowrap;
top: -20px;
}
h1 {
font-family: "MissionGothic-Regular", "Mission Gothic Regular
Regular", "mission_gothicregular";
font-size: 1em;
margin: 0 -2.1em;
background:#BF2C24;
display: inline-block;
color: #f2efe9;
position: relative;
height: 40px;
line-height: 40px;
text-transform: uppercase;
}
h1:before { /* this will create white triangle on the left side */
position: absolute;
content: "";
top: 0px;
left: -20px;
height: 0px;
width: 0px;
border-top: 20px solid #BF2C24;
border-left: 20px solid transparent;
border-bottom: 20px solid #BF2C24;
margin-left: 0;
}
h1:after { /* this will create white triangle on the right side */
position: absolute;
content: "";
top: 0px;
left: auto;
right: 20px;
height: 0px;
width: 0px;
border-top: 20px solid #BF2C24;
border-right: 20px solid transparent;
border-bottom: 20px solid #BF2C24;
margin-right: -40px;
}
h1 span.sidestar-left, h1 span.sidestar-right {
position: relative;
font-size: .6em;
top: -4px;
padding: 0 10px;
}
Ok, so I tried to create a jsFiddle of this here:
http://jsfiddle.net/5f9wA/4/ (full page result here:
http://jsfiddle.net/5f9wA/4/embedded/result/ )
However, in the jsfiddle, it doesn't show the problem I am experiencing
with the actual webpage for some odd reason. Probably because jsfiddle.net
wraps the code output in such a way that it doesn't resize the content at
all.
You will see the problem when you look at the actual webpage here:
http://opportunityfinance.net/Test/newest_conference-2013/meetcandidates.html
What is supposed to happen is the Name of person in the red ribbon and
blue background, just under that, will RESIZE the font-size accordingly to
the browsers width and/or height (as you resize your browser window).
However, during the resize of this, since the height of the red ribbon is
set to 40px via the h1 property, it causes the font-size to exceed the
height in bigger browser dimensions. How to control this? The height on
the h1 is set in order to properly set the CSS Triangles to half of the
height (so 20 pixels to be exact). If I set the height to em units, it
will completely ruin the ribbon effect.
So, not entirely sure how to tackle this issue, other than using jQuery to
resize the h1 and the div.sub_head_text element to a pixel value,
according to the font-size within the h1 element so that the elements
height is resized accordingly when the page gets resized.
Hopefully this makes sense to you all here. How can this be done during a
resize?
And yes, I'm aware that you can bind anything to the resize event in jQuery:
$(window).bind("resize", function(){ ... }).trigger("resize");
But I can't very well calculate the css font-size em unit value, since
this will always be 1.6em, I need to calculate the actual size of the font
as it grows and shrinks... How?