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

This solution uses jQuery to automaticaly wrap the letters to underline in a 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 and apply text-decoration:underline; to that class.

Output :

Signs that will not be underlined :

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

HTML :

George quietely jumped!

CSS :

.underline {
    text-decoration:underline;
}

jQuery :

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

---