Disable underline for lowercase characters: g q p j y?

Question

Sometimes you don\'t want an underline blindly cutting through an underlined page title!
Is there a way to automatically elegantly disable underline for

Answer 1

Look into text-decoration-skip-ink CSS property. This can specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders.

h1 {
  text-decoration: black underline;
  text-decoration-skip-ink: auto;
}

<h1>George quietely jumped!</h1>

Answer 2

It would be a pain in the ass, but I would make an "underline" class and then go in and do it manually

HTML

<h1><span class="underline">Ver</span>g<span class="underline">eten Kanalen</span></h1>

CSS

.underline{text-decoration:underline;}

Answer 3

Text Decoration Module Level 3 introduces text-decoration-skip

This property specifies what parts of the element's content any text decoration affecting the element must skip over.

You can achieve the behavior you want by setting it to ink:

Skip over where glyphs are drawn: interrupt the decoration line to let the shape of the text show through where the text decoration would otherwise cross over a glyph. The UA must skip a small distance to either side of the glyph outline.

h1 {
  text-decoration: underline;
  text-decoration-skip: ink;
}

<h1>George quietely jumped!</h1>

Note major browsers don't support it yet.

Answer 4

Here is my solution:

Working Fiddle

CSS:

h1, h2 {
  background-image: linear-gradient(to top, transparent 0px, transparent .15em, red .15em, red calc(.15em + 1px), transparent calc(.15em + 1px), transparent 100%);
  text-shadow: 0px -2px 3px white, 0px -2px 3px white, 0px -2px 3px white, 0px -2px 3px white, 0px -2px 3px white, 0px -2px 3px white;
}

Answer 5

you can as well fake underline with a border-bottom. this can work for single lines and if display properties allows element to shrink on content. (just avoid block ).

here an example with a display:table to allow center text and break line before and after : http://codepen.io/gc-nomade/pen/vJoKB/ What's the idea ?

1. setting a smaller line-height than font-size, cause the text to overflow from its container.
2. draw a bottom border to underline text
3. SVG offers stroke , in CSS , we can do something similar increasing text-shadow with same color as background.
4. DEMO , you can even set a different color to the simili underline and add a dropping shadow.

   ---

In older browser you will lose the box-shadow option, but you still can use the double, groove or ridge border styles with different color than text.

---

Thanks @PatNewell for sharing this very link : https://medium.com/designing-medium/7c03a9274f9

Answer 6

This solution uses jQuery to automaticaly wrap the letters to underline in a <span> tag.

DEMO

As parents with text-decoration:underline "override" children with text-decoration:none; (see here). The technique is to wrap only the targeted letters (the ones to underline) with a <span class="underline"> and apply text-decoration:underline; to that class.

Output :

Signs that will not be underlined :

g  j  p  q  y  Q  @  {  _  (  )  [  |  ]  }  ;  ,  §  µ  ç  /

HTML :

<h1 class="title">George quietely jumped!</h1>

CSS :

.underline {
    text-decoration:underline;
}

jQuery :

$('.title').each(function () {
    var s = '<span class="underline">',
        decoded;
    $(this).prop('innerHTML', function (_, html) {
        s += html.replace(/&amp;/g, '&').replace(/(g|j|p|q|y|Q|@|{|_|\(|\)|\[|\||\]|}|;|,|§|µ|ç|\/)/g, '</span>$1<span class="underline">');
        s += '</span>'
        $(this).html(s);
    });
});

---