Dynamic text underlined by braces

Question

I want to underline a word with a round brace. This should be part of a C# Text but if it is easier in CSS, no problem. My problem is that the length of the Word can vary, so the bow must by calculated for each word.

My first idea was using CSS box-shadow:

CSS:

#test {
  font-size: 50px;
  background: transparent;
  border-radius: 70px;
  height: 65px;
  width: 90px;
  box-shadow: 0px 6px 0px -2px #00F;
  font-family: sans-serif;
}

HTML:

<div id="test">Hey</div>

Unfortunately due to the dynamic Text sizes I can't calculate them.

Is there a smarter approach to this problem?

Answer 1

You don't need to calculate the width if you use span tags instead.

CSS:

.test {
  font-size: 50px;
  background: transparent;
  border-radius: 70px;
  height: 65px;
  box-shadow: 0px 6px 0px -2px #00F;
  font-family: sans-serif;
}

HTML:

<span id="test" class="test">Hey</span><br/>
<span class="test">Hey this is longer</span>

Working Fiddle: http://jsfiddle.net/Ge8Q3/

Answer 2

I found a different approach.

Working fiddle: http://jsfiddle.net/6pEQA/1/

I used javascript and made the width dynamic:

textWidth function taken from here.

$.fn.textWidth = function(){
    var self = $(this),
        children = self.contents(),
        calculator = $('<span style="white-space:nowrap;" />'),
        width;

    children.wrap(calculator);
    width = children.parent().width(); // parent = the calculator wrapper
    children.unwrap();
    return width;
};

$(document).ready(function(){

    $('#test').css('width',$('#test').textWidth());

});

It also works with h1, div or span. You can check my fiddle. Because it is using span elements to calculate width of the element.