Label text with a horizontal curly bracket - html

Question

I'm displaying sentences and some phrases are from a certain class. Now, I want to include these phrases' classes with a curly bracket right above, as shown in the attached mockup.
My question is: What is the best way to implement such a functionality? Are there any code examples?
EDIT (current code added):
HTML
<token>Effects</token>
<token>of</token>
<token>an</token>
<token>ascorbic</token>
<elem type="drug">
<token>acid-derivative</token>
<token>dentifrice</token>
</elem>
<token>in</token>
<elem type="person">
<token>patients</token>
</elem>
<token>with</token>
<elem type="disease">
<token>gingivitis</token>
</elem>
CSS
token {
margin-left: 6px;
}
Fiddle demo of the code
https://jsfiddle.net/ab0L55v1/

Answer 1

Here's a solution that's all done with CSS and pseudo-elements (and an additional HTML element for the labeling). It should be self-explanatory, but if you have questions about it, just ask...
.container1 {
display: inline-block;
margin-top: 50px;
border: 1px solid #aaa;
padding: 3px 8px 0 0;
}
token {
margin-left: 6px;
}
elem[type="drug"],
elem[type="person"],
elem[type="disease"] {
position: relative;
}
elem[type="drug"]::after,
elem[type="person"]::after,
elem[type="disease"]::after {
content: "";
position: absolute;
top: -1em;
left: 3%;
width: 94%;
height: 0.5em;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
z-index: 10;
}
.label {
position: absolute;
top: -3em;
left: 3%;
width: 94%;
z-index: 10;
text-align: center;
}
.label:after {
content: "|";
position: absolute;
top: 1.2em;
left: 3%;
width: 94%;
z-index: 10;
text-align: center;
color: #aaa;
}
.drug {
color: red;
}
.person {
color: blue;
}
.disease {
color: green;
}
<div class="container1">
<token>Effects</token>
<token>of</token>
<token>an</token>
<token>ascorbic</token>
<elem type="drug">
<token>acid-derivative</token>
<token>dentifrice</token>
<div class=" label drug">
Drug
</div>
</elem>
<token>in</token>
<elem type="person">
<token>patients</token>
<div class=" label person">
Person
</div>
</elem>
<token>with</token>
<elem type="disease">
<token>gingivitis</token>
<div class=" label disease">
Disease
</div>
</elem>
</div>

Answer 2

This is not easily achieved with HTML and CSS. For advanced formatting, I had good results with MathJax, which allows LaTeX-like formatting.
For example, the format
$\overbrace{\text{Big ones, small ones}}^{Coconuts}\text{, some as big as your head}$
Will look like:
Live example: http://jsfiddle.net/AqDCA/940/
See also: MathJax basic tutorial and quick reference
jqMath is a lightweight alternative, with fewer features and a smaller footprint.

Answer 3

A simple option, though less stylish is to use <ruby> tags. Note that these are meant for East Asian characters, and might have odd formatting with English text:
ruby rt {font-size:12px;}
ruby {color:#4a4;}
ruby.drug {color:#44a;}
Maybe this can <ruby class="drug">be done<rt>Drug</ruby> with <ruby>HTML<rt>Han</ruby>.