CODEWITHSUNDEEP
htmlcss
ianmayo
ianmayo

Reputation: 2402

Highlight overlapping spans of text

I wish to use CSS background shading to annotate some text in HTML.

But, the regions may overlap each other.

In this example I wish to shade the background of "Jim, Alex, Dunedin" in yellow, then "Dunedin, 184.3" in blue. In this instance, the "Dunedin" element would therefore be shaded in green.

I'm pretty sure this isn't possible in HTML, since I don't think span elements can overlap.

Any other solutions to this problem offered?

Overlapping regionds

Upvotes: 6

Views: 1919

Answers (3)

ianmayo
ianmayo

Reputation: 2402

Note: in the end I solved the problem by analysing the data & producing a different span for each differently shaded block.

So effectively, my code produced:

<span class='yellow'>Jim, Alex, </span><span class='yellow-blue'>Dunedin, </span><span class='blue'> 184.3</span>

It did this by creating an array of arrays, with a cell for every character in the text. As the text was analysed, for each character it would add "styles for that character" in the array for that cell. Then the code went through and assigned a span for each consecutive set of cells that shared the same styles.

The Python code to do this is here, and here is an example of the highlighted output, though in this example there are no overlapping regions.

sample of highlighting

Upvotes: 1

Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

Can it be done? Yes.

Should it be done? Maybe not the way I've shown it. It's just to get you started.

span:first-of-type {
  background-color: yellow;
}

span:last-of-type {
  background-color: lightblue;
  display: inline-block; /* needed so that the next line will work as we cannot transform inline elements */
  transform: translateX(-59px); /* move this element 59 pixels to the left so that it overlaps */
  mix-blend-mode: multiply; /* blend the backgrounds together */
}
<span>Jim, Alex, Dunedin</span>
<span>Dunedin, 184.3</span>

Maybe it would make more sense to process this HTML so that the markup is changed to look something like the following:

.yellow {
  background-color: yellow;
}

.blue {
  background-color: lightblue;
}

.yellow.blue {
  background-color: lightgreen;
}
<span class="yellow">Jim, Alex</span><span class="yellow blue">Dunedin</span><span class="blue">, 184.3</span>

<!-- note, newlines above would result in whitespace separating the background colors between the <span>'s -->

Upvotes: 1

Eloise Maun
Eloise Maun

Reputation: 78

You can can accomplish most of what you're setting out to do via relative/absolute positioning, z-indexing, and setting opacity on these elements to anything under 1.

For example:

<h1>Image Transparency</h1>
<span style='opacity:.3;background:yellow; position:absolute;width:100px; height: 1em;'>&nbsp</span>
<span style='opacity:.3;background:#98fffc; position:absolute;width:100px; height: 1em; left: 50px;'>&nbsp</span>
<p>The opacity property specifies the transparency of an element. The lower the 
value, the more transparent:</p>

Good luck!

Upvotes: 0

Related Questions