Recent Changes - Search:
Cookbook /

Underline Text (HTML5 <u> tag)

Summary: Use HTML5 <u> tag to underline text.
Version: 2016-09-02
Prerequisites: none
Status: Beta
Maintainer: HaganFox
License: N/A
Categories: Markup, PHP55, PHP72
Users: (view? / edit)
Discussion: UnderlineText-Talk?

Questions answered by this recipe

How can I use HTML5's <u> tag to display underlined text in my pages?

Description

Use HTML5's <u> tag to display underlined text.

HTML5 re-introduced the <mark> tag for underlining text. From the W3C:

"The u element represents a span of text offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is underlining; for example, a span of text in Chinese that is a proper name (a Chinese proper name mark), or span of text that is known to be misspelled."

This recipe allows you to underline text using markup like this: 

  '__underlined text__'

Installation

Add these lines in your config.php file: 

# HTML5 <u> tag (underline text)
# '__text__' -> <u>text</u>
Markup("'__","<'_","/'__(.*?)__'/",'<u>$1</u>');

Configuration

No configuration is necessary.

You can style your <u> elements with CSS. For example: 

 /* Underline */
 u { text-decoration: none; border-bottom: 1px dotted #333; }

Causes underlined text to look like this rater than this.

Usage

Example:
This shows '__underlined text__' in a sentence.

displays as

This shows underlined text in a sentence.

Notes

  • Should something like this be added to the core? (I think so.)
  • What would be better markup (than _ ... _) that authors could use to underline text?

The current (as of Sept. 2016) way people are underlining text in PmWiki uses the <ins> tag. I strongly suspect this is being misused most of the time. People want to underline so they use @{- ... -} markup because they see it in the EditQuickReference area. Machines (screen readers, search engine spiders) that parse the text see the <ins> tag and misinterpret the author's intent.

Change log / Release notes

  • 2016-09-02 - Initial release

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

See also

  • PmWiki's {+insert+} markup also produces underlined text (though the semantic meaning is that the text is inserted).
  • Highlight Text recipe that adds highlighting/marking with the <mark> tag

Contributors

  • Hagan Fox - Created this because the <ins> tag is not the right way to "underline".

Comments

See discussion at UnderlineText-Talk?

User notes? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.