Styling overlapping annotations in text with HTML <SPAN> tags and CSS
I want to annotate text with categories. Each categorie has a specific color. Also, I want to focus on the visualization of overlapping annotations.
Annotations and Atoms
The part of the text (user selection), which is annotated, I call atoms.
For me there are 4 types of atoms which can overlap, described as follows:
We assume there are only 2 categories A with [ ] and B with { }. (but it works for more too)
All the tools I looked at overlap by background-color or different style types (like underlining A and background-color for B). When using background colors, the overlapping parts have usually a darker or a mixed color.
CSS and SPANs
My approach is to border the atoms. So each atom gets wrapped in a span tag. I have some problems with the (3.) overlap. Of course, I broke it down to 4 span s: start, end and two for the overlapping part.
<span class="A outer start">iam nonumy</span>
<span class="A outer end overlap">
<span class="B start">
eirmod
</span>
</span>
<span class="B end">tempor</span>`
How do I join the spans with the same class A and B ? (I tried padding, but it is not working. Also I tried to decrease the word-spacing , but it works for the overlaps but breaks the normal text.)
How do I move span s using z-index , I know they have to be inline-block or block elements. If they are block , a span is spread over more than one line.
Example
The example shows all 4 types. Also you can see the problem with the overlap and my attempt to use word-spacing , also in the last example, the purple atom should be at the top.
http://jsfiddle.net/Bb62u/289/
Here is another example with word-spacing , I have to set it to -10 to join the parts.
http://jsfiddle.net/Bb62u/297/
vertical-align to make line-height fluid Use relative/absolute positioning to bookend the spans
position: relative; text-align:right; /* for the container, */
position: absolute; left: 0; /* for the left aligned element, */
display: inline; /* or */
display: inline-block /* for the right element. */
Use white-space:nowrap to avoid wrapping of text in inline-block or block elements
For example:
#container{ position: relative; text-align:right; }
#lefty { position: absolute; left: 0; }
#lefty, #righty { display: inline-block }<div id="container">
<span id="lefty"><blockquote>left</blockquote></span>
<span id="righty"><blockquote>right</blockquote></span>
</div>上一篇: 多文本背后的CSS实体背景