Styling overlapping annotations in text with HTML <SPAN> tags and CSS

Question

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:

1. Lorem { [ ipsum ] } dolor sit amet, consetetur sadipscing elitr. (Identity)
2. { Lorem [ ipsum ] dolor } sit amet, consetetur sadipscing elitr. (Inclusion)
3. Lorem { ipsum dolor [ sit amet, } consetetur ] sadipscing elitr. (Overlap)
4. Lorem ipsum dolor sit amet, [ consetetur ] { sadipscing } elitr. (Neighbor)

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 spans: 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>`

1. The line-height needs to increase as more atoms are annotated and overlapping.

2. 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.)

3. How do I move spans 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/

Answer 1

• Use percentage/length units or images with 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>