2

I have a block of text, and I decreased the line height because I like it better that way. Sometimes the top of the h touches the bottom of the p above it, and that's okay.

My problem is that when I highlight text using <mark>, the background-color covers the lower half of the text on the line above it.

Please see it here

The text that comes after the highlight is placed on top of it, so I'm optimistic that there's a way to bring the before-text to the front as well.

I tried decreasing the opacity of <mark>, but that made the text itself transparent too.

I'd like to be able to send its background-color behind all text elements, if that's possible. Second place would be to decrease the opacity of just the background-color without affecting the marked text.

I made a snippet but it doesn't show the problem because I can't link to a font. Please see the linked image above to see the problem.

@font-face {
  font-family: 'charmonman';
  src: url('https://fonts.googleapis.com/css2?family=Charmonman:wght@400;700&display=swap');
  font-weight: normal;
  font-style: normal;
}

body {
  background: #f5f5f5;
  color: #7030A0;
  font-family: 'charmonman'
  line-height: 1.5;
}

mark {
  background-color: #fff2cc;
  padding-left: 2px;
  padding-right: 2px;
}
<style>
@import url('https://fonts.googleapis.com/css2?family=Charmonman:wght@400;700&display=swap');
</style>

<mark><strong>This text is a highlighted sentence.</strong></mark> This is much longer text. The beginning of this section is clear because it appears <strong>over</strong> the background color of the previously highlighted text, but the end of this section is half hidden by the background color of the highlighted text that follows it. <mark><strong>This is the highlighted text that partially covers the line that came before it.</strong></mark>
Betule Sairafi
  • 21
  • 5

1 Answers1

-1

The issue is caused by the way the <mark> element and its background-color behave. When you highlight text using the <mark> tag, the background-color is applied to the space that the text occupies. This can cause the highlighted background to overlap with the text on the line above it when the line-height is decreased.

You could try using a different approach that involves using linear-gradient as the background for the <mark> tag. The linear-gradient can create a similar effect to the highlight. Here's a potential solution:

mark {
  background: linear-gradient(to right, #fff2cc 100%, transparent 0%);
  background-repeat: repeat-y;
}

In this case, the linear-gradient creates a highlight that covers 100% of the line height, and background-repeat: repeat-y; ensures that the highlight effect is applied to every line of text within the <mark> tag.

Here's your snippet with my proposed solution:

@font-face {
  font-family: 'Charmonman';
  src: url('https://fonts.googleapis.com/css2?family=Charmonman:wght@400;700&display=swap');
  font-weight: normal;
  font-style: normal;
}

body {
  background: #f5f5f5;
  color: #7030A0;
  font-family: 'charmonman';
  line-height: 1.5;
}

mark {
  background: #fff2cc;
  background-repeat: repeat-y;
}
<style>
@import url('https://fonts.googleapis.com/css2?family=Charmonman:wght@400;700&display=swap');
</style>

<mark><strong>This text is a highlighted sentence.</strong></mark> This is much longer text. The beginning of this section is clear because it appears <strong>over</strong> the background color of the previously highlighted text, <mark>but the end of this section is half hidden by the background color of the highlighted text that follows it. <strong>This is the highlighted text that partially covers the line that came before it.</strong></mark>
70ny
  • 748
  • 1
  • 7
  • 22
  • If the `mark` wraps multiple lines then your psuedo element gets messed up – Zachiah Jun 21 '23 at 20:36
  • In your snippet it only worked on the first instance of ``, in mine it worked on neither. :( – Betule Sairafi Jun 21 '23 at 20:39
  • @Zachiah is right about multiple lines. The issue is when you go to a new line. – 70ny Jun 21 '23 at 20:40
  • @BetuleSairafi I've edited my answer (and included your font in the snippet). Check this out. I've also "extended" the ``, so that the code snippet shows multiple lines taken into account – 70ny Jun 21 '23 at 21:11
  • That's perfect! I can't figure out why it's not working for me - it looks the same as before. The only change to my original code is in the tag, right? – Betule Sairafi Jun 21 '23 at 21:23
  • you're using a background color for the ` `, and this approach does not handle line breaks well. If the text within the `` tag spans multiple lines, the background color covers the entire block, not just the text. In my proposed solution, `background-repeat: repeat-y;` property ensures that this gradient is applied to every line of text within the `` tag, even if the text spans multiple lines. – 70ny Jun 21 '23 at 21:26