30

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) enter image description here

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

Improve this question
6
  • 13
    Interestingly, Stack Exchange also doesn't underline links! So you could extend the concept to asking whether there is ever a valid use case for using blue text colour when it's not for a link. – Joe Dreimann Mar 2 '12 at 16:17
  • @JoeDreimann that is slightly different though, because there are already styles set up for links in the CSS, so when you specify a link the styling is already taken care of. – JonW♦ Mar 2 '12 at 16:31
  • 1
    Sure, but what I mean is that if your aim is to not suggest something is a link when it isn't, then underlining is just one indicator. If you end up hiding the underlining option, you may also want to hide the colour that is commonly used for links on the page. – Joe Dreimann Mar 2 '12 at 16:34
  • 1
    @JoeDreimann we underline links on hover. Underline is visually distracting (as my answer notes) so I like it's use on hover to drive the point home, but the consistent color is often a good way to communicate link-ness on a site where many users are frequent users of the site – Ben Brocka Mar 2 '12 at 16:34
  • Apologies, seems that I wasn't able to make my point clear. I agree with what you're saying @BenBrocka. – Joe Dreimann Mar 2 '12 at 16:38
37

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.

Improve this answer
12
  • 4
    Underlining is also a typography misdemeanor, the general sentiment being "never underline what you can set in italics." – Taj Moore Mar 2 '12 at 16:40
  • 1
    Good set of links here, although if I'm being pedantic you've not really answered the actual question - is there ever a use case for allowing underlines. – JonW♦ Mar 2 '12 at 16:46
  • 2
    Bold does call your attention and even works as inline pull-quotes, while italics is used to stress —phonetically if I may— a word or set of words; not to give relevance. What to use when you want to give relevance to a whole phrase without making it bold? – Naoise Golden Mar 5 '12 at 13:54
  • 1
    Regarding the MLA and APA guidelines (rules), ok agreed this is possibly a contender for required underlines, although I might argue that these are for hard-copy papers and not online journals. – JonW♦ Mar 6 '12 at 10:18
  • 2
    Your answer is a perfect example of a use case where underlining is appropriate -- when discussing underlining! You bolded the word bold, and italicized the word italics, but couldn't underline the word underline, and it stood out (to me, at least) – Bryan Oakley Mar 6 '12 at 11:43
12
+100

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:

Example Rulespeak notation

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).

Improve this answer
2
  • 1
    Awarding you the bounty for this response. It's quite a fringe situation (as I expected the answer would be), but your reasoning seems sound and unlike Ben's MLA response this still does appear to be an in-use syntax that may possibly apply in web situations. However by far the best way for me to handle the current editor is to disable underlining by default for all situations and only add it back in if it's requested a specific requirement. – JonW♦ Mar 12 '12 at 10:17
  • 1
    Thanks Jon. Agreed though: this is a border case. Ben's excellent answer is the more appropriate one to consider if you're not in one of those cases (let's hope it contributes to less underlining in documents we have to read :D). – Jeroen Mar 12 '12 at 10:42
6

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.

Improve this answer
3
  • 4
    This is a classic application of Poka Yoke. Do not allow the user to make unintended mistakes. If the user has a compelling reason to add underlines, and it won't create confusion with text links, then that is a valid case for allowing it. If not, then not. en.wikipedia.org/wiki/Poka-yoke – J. Jeffryes Mar 5 '12 at 18:22
  • @J.Jeffryes That's a new phrase to me, I like it! – JonW♦ Mar 6 '12 at 17:09
  • Thanks! I like to say "Poke and Yoke", as in you Poke the users towards the right choice, and Yoke their behavior so they can't make mistakes. – J. Jeffryes Mar 17 '12 at 1:54
5

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.

Improve this answer
2
  • 2
    I really like the non-semantics of using <u> to refer to things like spelling and grammatical errors as in Microsoft Word and Mac OS X. I also like the recommendation that the underline be restyled appropriately. – Kit Grose Mar 5 '12 at 23:27
  • The new HTML spec is basically a hack of "semanticness" for<u> as well as most style tags they didn't completely remove. But he's surely talking about the visual style not the semantic meaning. – Ben Brocka Mar 6 '12 at 2:22
1

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.

Improve this answer
1

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.

Improve this answer
0

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)

Improve this answer
0

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

Improve this answer
1
  • 1
    "Meta comment": To break a line on your answer, add two spaces at the end of the preceding line. – Jørn E. Angeltveit Mar 6 '12 at 9:00
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.