Question 291569 in Html Question posted in
Some basic documentation can be found here.

How does HTML differeciate between 2 <Mark> tags intersection

I have long text I want to display in HTML

There are 2 areas I have to highlight, one is red and the other is green

Here is an example

“Last night, Israeli forces <mark style="background: #ff0000">attacked the hospital with tanks and destroyed all of the first floor.</mark> The damage was very bad,” Murad said, <mark style="background: #00ff00">speaking to Al Jazeera from the Indonesian</mark> capital Jakarta.

This is ok and no issues if both areas do not intersect

something like this {Text Red} [Text Green]

But if the 2 areas intersect here comes the problem.

Case 1

{Text [Red Text} Green]

“Last night, Israeli forces <mark style="background: #ff0000">attacked the hospital with tanks and destroyed all <mark style="background: #00ff00">of the first floor.</mark> The damage was very bad,” Murad said, speaking to Al Jazeera from the Indonesian</mark> capital Jakarta.

Case 2

{Text [Text Green] Red}

“Last night, Israeli forces <mark style="background: #ff0000">attacked the hospital with tanks and destroyed all <mark style="background: #00ff00">of the first floor.</mark> The damage was very bad,” Murad said, speaking to Al Jazeera from the Indonesian</mark> capital Jakarta.

as you can see the closing tag for both and is

how can I tell that the closeing tag is for the Red or Green mark?

Tags:

2

Answers


  1. 0

    The mark tag that you started is just going on that text but another mark recolors a piece at the end then the end just ends it.

    Login or Signup to reply.
  2. 0

    You cannot. An element can only have one parent, so you can’t have an element that spans across two elements.

    The closest would be to create 3 elements, the red one, a child green one, and a sibling green one. But both green ones won’t be the same element.

    .red {
  background: #ff0000;
  text-decoration: underline 2px solid blue;
}
.green {
  background: #00ff00;
}
    “Last night, Israeli forces <mark class="red">attacked the hospital with tanks and destroyed all <mark class="green">of the first floor.</mark></mark><!-- Here we closed both previous <mark> and are opening the sibling one --><mark class="green"> The damage was very bad,” Murad said, speaking to Al Jazeera from the Indonesian</mark> capital Jakarta.

    Note that even if you had different tag-names, the parser wouldn’t allow such a tree:

    const doc = new DOMParser().parseFromString(`<red-mark>some content<green-mark>green content</red-mark>more green content</green-mark>`, "text/html");
console.log("actual parsed markup", doc.body.innerHTML);
    green-mark { color: green }
red-mark { color: red }
    <red-mark>some red content<green-mark>green content</red-mark>more green content</green-mark>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search