Is there ever a requirement to allow text to be underlined when it's not a link or a header

Question

We've built a custom CKEditor within one of the sites we've developed to allow users to add and edit the content on particular pages. However the editor by default comes with an Underline option and the client has taken it upon themselves to emphasize text by underlining it. This makes everything look like a link when it isn't.

As it's a custom editor we can remove the ability to underline (although I think they'll still be able to do it with a Ctrl+U) but I want to ensure there are no genuine uses for underlined text before I recommend it be disabled.

Is there ever a valid use-case for having text underlined on a website - other than for links, and possibly headings (both of which would be taken care of by the site CSS anyway)

A similar example of what I mean is below (taken from the current wordpress.com page editor)

Interestingly, I notice that the Stack Exchange text editor doesn't have underlines as an option

Answer 1

Underlining non-link text is a sort of usability crime. Underline is a standard way of visualizing links, especially when the default blue isn't use for links, so underline can confuse web users as to what's a link. Even in desktop applications, underlined text often means "I'm clickable".

Everyone knows that text that’s underlined, or is a different colour is likely to be a link. Don’t go confusing people by throwing in underlined text elsewhere! To draw attention to a certain word, try using the strong or emphasize tags instead.

Underlining is also almost impossible to ignore. Contrast italics which emphasize text in context. Italics are only noticable while you're reading a line. Contrast this with Underline and Bold which draw your eyes even when you aren't reading a paragraph. Underlines, like bold, are hard to ignore when scanning text.

The important thing here is that Bold and Italics provide two important ways of emphasizing text, and Bold and Italics are a complete set on their own. They have their own use cases but Underline serves the same purpose as Bold, while being stylistically awkward and harming readability.

Sitepoint does a good job of explaining the risks of Underline on readability as well:

In addition to possibly confusing the user into thinking that the underlined text is a link, underlining can also cause readability problems, as the line interferes with the descenders on lower case text (for example the lower case letters g, j, p, q and y), making some word shapes less clear.

Underline is distracting, potentially confusing and, more subjectively, it's visually ugly. Because Bold and Italics cover the use case of emphasis, Underline does not have a distinct use case and should be avoided for non-links in general content.

There are however use cases where underlining is important however: When a predefined style guide demands underlining.

MLA Format requires underlining for book titles; giving an editor with no underlining to people using MLA format would be cruel. APA also underlines.

Answer 2

Yes, there are valid use cases, all of which probably are in a very specific field of work/study where underline has a particular meaning.

An example: if your users want to write things in RuleSpeak (a notation system for SBVR documents) in the CKEditor, convention dictates they underline terms.

An image of what you typically see in these documents:

---

PS. One interesting comment on the question mentions the SO editor doesn't allow underline. Although I couldn't find any SE site that does so, I could certainly imagine one that would allow underline (for example http://typography.stackexchange.com/ would be a candidate).

Answer 3

Is there ever a valid use-case for having text underlined on a website?

Yes, and your question contains the answer :

the client has taken it upon themselves to emphasize text by underlining it

So emphasize seems to be a valid use case to some people. I do not think either this people are doing wrong according to you (or more widely agreed guidelines) is the point here. It is a matter of tradeoff between the freedom you grant to your client/user and the outgoing quality you have in mind.

I want to ensure there are no genuine uses for underlined text before I recommend it be disabled.

You might teach your user not to walk on the grass before cutting their legs...

Letting them edit text, you granted your user much more power than to add misleading underline. If your goal is to prevent "wrong" use of your tool, you might consider teaching your user and editing/approval workflow.

Answer 4

Assuming the "U" button puts selected text in the <u> element, there might be a very narrow use case for it. From the most recent HTML spec from the WHATWG:

The u element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.

In most cases, another element is likely to be more appropriate: for marking stress emphasis, the em element should be used; for marking key words or phrases either the b element or the mark element should be used, depending on the context; for marking book titles, the cite element should be used; for labeling text with explicit textual annotations, the ruby element should be used; for labeling ship names in Western texts, the i element should be used.

But they also emphasize that the default rendering for the element should be restyled (and your CKEditor button would obviously need to change, too):

The default rendering of the u element in visual presentations clashes with the conventional rendering of hyperlinks (underlining). Authors are encouraged to avoid using the u element where it could be confused for a hyperlink.

That's about the only reason I can think of to use the <u> element. My hunch is that you're asking about actually underlining text rather than putting it inside <u> tags, though, in which case I can find no credible examples of why that would be desirable.

Answer 5

I have come across this only few times when I was building Annual Report websites. Unfortunately the link I was going to show is dead now but there were instances in the report that certain text had to be underlined and was not part of the header or was a link.

Though text only appeared in the financial table's row header cells. So you might argue that they were headers (row headers) but didn't use any HX tags - were simply a string of underlined text.

It must have meant something to the author as I remember querying whether to use another formatting rather than underline (for the reasons explained above) and was told 'NO!' just use underline text as is.

Answer 6

There are some minor edge cases (such as RuleSpeak above) but the overall usefulness of an underlining function for web text is low.

There are plenty of other marginal text decoration functions (small caps, etc) that don't make the shortlist for must-have functionality. Underlining should probably join them, for the typographic and usability reasons cited above.

I notice your screenshot doesn't show sub- or superscript, which would be much more useful than underlining for many authors.

Unless you absolutely must cater to every minor possibility, keep the editing toolbar as simple and useful as you can.

Answer 7

The answer is probably, yes and no. Is there a instance where underlining is valid and correct to do so? Probably Yes (although I cannot think of one). Should you do it? No. Underlining has become too linked with links (even if only on hover) and breaking this will be too difficult a 'habit' for your users' brain to forget (unless we all did it)

Answer 8

Short answer: Hide it and use <em> its better for SEO and Accessibility.

Long:

Underlining was first introduced in the days of handwriting & typewritten manuscripts to show emphasis and later used as a markup indicator to have something set in a different type. This started the trend of using underscores as markup indicators instead of emphasis. Emphasis was then implemented by italicizing or bolding text.

Fast forward to the modern age. The use of underline <u> and italics <i> and bold <b> in HTML documents was a large standard to show emphasis in one or all three ways. These tags where then quickly dropped as technology advanced to increase the accessibility of documents to support <strong> and <em> and underline tag was dropped (reason one to be rid of it) and the underscore of text was implemented to be a link (relating back to markup age of "this should be (or lead) to something different").

Accessibility is now a strong part and requirement for many corporations in the USA and Canada. To be compliant the use of <strong> is for emphasizing important words and <em> for emphasizing important phrases (as <em>'n a single word makes the whole text hard to read)

Side Note: Spiders also look for important and emphasized phrases through the use of the <strong> and <em> tags, supporting them is good for your SEO.

So take a look at the users of your site and whether or not they require accessible pages. Then take a look at your users who use the editor, do they come from a traditional typewritten background or modern word-processing background?

Sources:
http://en.wikipedia.org/wiki/Underline
http://education.yahoo.com/reference/dictionary/entry/underscore
http://www.netmechanic.com/news/vol6/html_no12.htm

Answer 9

I can suggest at least three cases where underlining would be appropriate:

1. The purpose of the underlined text is to indicate something that was "filled into a blank", either literally or figuratively. Neither italics nor bold face conveys this. Additionally, while line endings can be problematic, underlining offers the ability to distinguish between two consecutive words or groups of words which are joined by an underline vs. consecutive words or groups of words which are underlined separately. Such semantic distinctions are useful for consecutive links, but are also important in other cases as well. Alternate background colors or boxes may also be usable to make such distinctions, but they're often even more distracting than underlining.

2. Especially in status-report tables, where it may be necessary to distinguish many independent pieces of information about an item, and allow readers to quickly identify at a glance ones meeting certain criteria. Underlining isn't a great form of emphasis, but if one needs to combine more independent dimensions than would be possible using just serif vs. sans, bold vs. light, italic/oblique vs. roman/upright, plain vs. colored foreground, and plain vs. tinted background, adding underlining may be helpful.

3. One is reproducing a pre-existing document which makes use of underlining and does not wish to examine the semantics of the document to determine whether some other form of highlighting would be better, and whether any text within the document refers to words being underlined.

Answer 10

Workaround

Underlining is in enough demand that other users have found workarounds, such as the use of combining character U+0332 described here at Meta.

Use case

The aversion to underlining is strange to me, particularly with regard to concerns about usability and potential confusion with links. Many sites use CSS to define link styles that do not use underlining (including Stack Exchange sites until relatively recently), obviating that concern. In addition, many sites impose no similar restriction on the use of color, even though color has also historically been an important distinguishing marker for links.

I note also that other language communities use emphasis differently. Japanese text, for instance, very seldom uses either italics or bold, due to the ways in which these changes in character shape and line width can render various glyphs difficult to distinguish. Although I am not familiar with Chinese typography traditions, I expect they might also avoid bold and italics for similar reasons. Japanese documents often use ruby dots or underlining / sidelining, depending on whether the text is horizontal or vertical. Examples:

Unfortunately, combining character U+0332 is ugly for the Latin alphabet, and does not work very well at all for Japanese text. In the examples here, "with underlining" and 「下線のある」 should both be underlined.

• This is text w̲i̲t̲h̲ u̲n̲d̲e̲r̲l̲i̲n̲i̲n̲g̲.
• これは下̲線̲の̲あ̲る̲文章です。

In my instance of Firefox version 91.8.0esr, these are rendered like this:

• In the editing textbox:
  
• In the post preview:
  

The inability to use proper browser underlining, be it via inline CSS such as <span style="text-decoration: underline;"> or old-school HTML tags such as <u>, thus presents a usability problem for Japanese text.