Chinese proper name marks #

And what exactly are those you ask? I had to ask Wikipedia myself:

In Chinese writing, a proper name mark (Simplified Chinese: 专名号, zhuānmínghào; Traditional Chinese: 專名號) is an underline used to mark proper names, such as the names of people, places, dynasties, organizations. … This method of recognizing proper names in text is similar to the English use of a capital letter.

Wikipedia gives the following example, which I’ve formatted using <u>:

<u class="pnm">屈原</u>放逐，乃賦<cite class="bnm">離騒</cite>。<u class="pnm">左丘</u>失明，厥有<cite class="bnm">國語</cite>。（司馬遷 《<cite>報任安書</cite>》）

If you’re using Firefox 6+ you’ll also see the appropriate wavy underline for a Chinese book name mark on the quote’s source, courtesy of CSS3’s text-decoration-style: wavy;. I’ve used <cite> for book name marks as it’s more appropriate than <u>. You can find out more about wavy in CSS Text Level 3.

Using <u> for spell-checking feedback #

While you’re probably not marking up classical Chinese prose, a more familiar use case is for a spell-checker to indicate incorrect text. The default formatting in word processors is typically a red underline for spelling errors, and a green underline for grammatical errors:

.spelling-error {
  text-decoration: none;
  border-bottom: 1px dashed red;
}
.grammatical-error {
  text-decoration: none;
  border-bottom: 1px dashed green;
}
<p>hello doctor i am having a huge body <u class="spelling-error">oder</u> <u class="grammatical-error">it is smell really bad</u></p>

While we’ve turned off the default text-decoration style, <u> will back us up if CSS is disabled, and potentially provide more information for assistive technology. After all, if it’s semantic it should be in HTML, not CSS.

Some word processors use wavy underlines. This CSS would have the same effect in a supporting browser:

.spelling-error {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
.grammatical-error {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: green;
}

Or, using text-decoration as a shorthand property, and adding a default declaration for non-supporting browsers:

.spelling-error {
  text-decoration: underline; /* for backwards compatibility */
  text-decoration: underline wavy red;
}
.grammatical-error {
  text-decoration: underline; /* for backwards compatibility */
  text-decoration: underline wavy green;
}

Again, you can read more about the upgraded text-decoration properties in CSS Text Level 3.

Using <u> for indicating family names #

Another use for <u> is to annotate a family name when this might be confusing — Chinese, Japanese, Korean and Vietnamese (among others) all traditionally write names in a different order than the western-centric “given-name family-name”. While applying a blanket western ordering is fairly common (especially when publishing in English), it’s good form to use culturally appropriate ordering. If the audience might misunderstand, the family name can be underlined, capitalised, or otherwise annotated to make the name order explicit. For example, the CIA’s World Fact Book capitalises the family name:

After World War II, the Communists under MAO Zedong established an autocratic socialist system …

This ties in nicely with the hCard microformat, as the “implied n optimisation” doesn’t work with these non-western ordered names, and we need a wrapper element to indicate each part of the name anyhow.

<style>
  .family-name {text-decoration: underline;}
</style>
<p>
  <span class="vcard" lang="ja-latn">
    <span class="fn n">
      <u class="family-name">Son</u> <span class="given-name">Goku</span>
    </span>
  </span>
   is the main protagonist in 
  <span class="vcard" lang="ja-latn">
    <span class="fn n">
      <span class="given-name">Akira</span> <u class="family-name">Toriyama</u>
    </span>
  </span>’s <i lang="ja-latn">manga</i> “Dragon Ball”.
</p>

Of course you can then change the style via CSS, for example

.family-name {
  text-decoration: none;
  text-transform: uppercase;
}

The benefit of using <u> for this is the family name will be indicated even when CSS is disabled, ensuring the annotation isn’t lost. Assistive technology may also be able to inform the user of this in the future.

But do we need <u>? #

A lot of people bitten by the web standardista bug have somewhat of an allergic reaction to ex-presentational elements in HTML5, after influential articles like Tantek Çelik’s “<b>ed and <br>eakfast markup”. Given <u>’s ignoble past, I expect the reaction to its return will also lead to some poo-pooing. As we already mentioned, however, if it imparts meaning, it should be in HTML. These use cases involve semantic meaning, and even without assistive technology support, <u> conveys some meaning to sighted users via the browser-default style text-decoration: underline;.

Regardless of whether an element is deprecated (HTML 4, XHTML 1) or non-conforming (HTML5) or just plain uncool, browser makers still have to support it for backward compatibility with all those awesome web pages from the days when <blink> was hawt. Because of this, if there’s a semantic use case for an ex-presentational element, it’s definitely better to reform it rather than minting a new element with no backward compatibility. You might think <mark> sounds pretty similar, but the default browser styling would be completely wrong for proper name marks, and semantically less appropriate for spelling errors too.

As Ian Hickson explains:

The presentational markup that was <u>, <i>, <b>, <font>, <small>, etc, is gone. However, there are certain use cases that did not yet have elements yet were important enough to warrant us supporting them. By reusing existing elements, we are able to support them without having to wait for new elements to be implemented. By doing so in a way that closely matches how those elements were actually used in practice (at least to the same extent as other elements have been correctly used in practice) we can not only have older UAs support these new elements automatically, but we can do so in a way that does not introduce an undue volume of invalid pages.

Conclusion

Given the potential to confuse underlined text with links, using text-decoration: underline; on anything other than <a> is bad pretty much all the time. Generally <u> is not the element you’re looking for, even for Chinese book name marks (<cite> would be more appropriate). However, for at least these three use cases, it’s good to have a semantic option, something better than <span>.

So…in a hypothetical world where you did need to code for one of these situations, would you use <u> or something else like <span>? Let us know in the comments!

Isn’t this bad practice?

For years, we’ve been told (and have actively told others) to separate content and presentation layers. So why would we introduce something that seems to go against everything we’ve been preaching?

The separation of these layers is still vitally important, but let’s look at a few use cases to shed some light on why this attribute has been introduced. Scoped style provides a W3C-approved way to:

• Add one-off CSS styles.
• Add user-defined styles to wiki or CMS content.
• Add theme-defined styles via CMS plugins.
• Keep syndicated content together (e.g., keeping example code together with the example).

How does it work?

In this section, I’ll show you how this new attribute will work when it gets rolled out to browsers.

<article>
  <h1>Style Scoped</h1>
  <p>The scoped attribute for the style element will eventually allow for you to include style elements mid-document. To do this, you must mark up your style element with the scoped attribute.</p>
  <section>
    <h2>How does it work?</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </section>
</article>

Adding the scoped attribute

In the next example, we’ll change the foreground color of the second paragraph to red (from whatever was defined in the master CSS file):

<article>
  <h1>Style Scoped</h1>
  <p>The scoped attribute for the style element will eventually allow for you to include style elements mid-document. To do this, you must mark up your style element with the scoped attribute.</p>
  <section>
    <style scoped>
      p { color: red; }
    </style>
    <h2>How does it work?</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </section>
</article>

This screenshot shows how things might render in the browser:

Can I apply scoped to <link>?

While I was writing this article, Dr. Rich asked whether it was possible to add this attribute to <link> elements. Turns out you can’t, but I stumbled across this tidbit in the WHATWG mailing list:

You can use <style scoped>@import url(whatever);</style>

And this even enables you to add some specific styles ([be they embedded] or from another external sheet) on a per-use basis if the need arises. For example, a long dissertation relying on many quotes may benefit from adding stronger visual highlights on the <em> elements within the last quote to reinforce the final conclusion.

Backwards compatibility

Unfortunately, scoped style isn’t all puppy dogs and kittens.

Since this newly introduced attribute isn’t understood by current browsers, CSS rules in <style scoped> are just added to the page’s CSS. Therefore, if you were to include a scoped style block mid-page, its declarations would be applied to every matching element in the document, regardless of whether the element were inside or outside of the scope’s range.

For the sake of backwards compatibility, Louis Lazaris has suggested a brand new element called <scopedstyle>. This new element would only be recognised by supporting browsers and ignored by everything else. This way, scoped styles wouldn’t be added to the whole document. Instead, the browser would just throw away the unrecognised <scopedstyle> element and move on.

Browser support

Currently, the scoped attribute isn’t working in any of the browser alpha versions (Opera.Next, Mozilla Aurora, or WebKit nightly builds). There’s work in progress by Roland Steiner for support in WebKit.

Using <style scoped> today

So you’ve read this article and decided that you need scoped style in your life. What now? Well, just like every other new HTML5 thing, we have a polyfill for it. Simon Madine has created a jQuery scoped CSS plugin on GitHub.

You could also assign a CSS prefix to target the section of your document you want to style. You’d still be able to stick your styles inline, but you’ve also provided a fallback for the older browsers. In fact, Dr. Oli has done just that on his latest article. (View source and search for <div class="faint">.)

Opinions

There’s no denying that we’re breaking backwards compatibility by introducing <style scoped>. To me, this just doesn’t make any sense. I feel this needs to be addressed by either creating a new element like <scopedstyle> or using some protective mechanism like the <!-- and --> delimiters that have been used within <style> and <script> elements.

Let’s not end this article with negative sentiment, though. As with anything, it’s what you make of it. Scoped style is pretty plain vanilla, but if people abuse it, it’ll end up with a bad rap. Dr. Oli has spoken at length about his love for this attribute as it allows him to have live code examples with the CSS in <pre> and also in a <style scoped> within a <figure>.

So now it’s time for you to express your views. What do you think about the new scoped attribute? Do you think it has a future? Should it be fast-tracked into the spec? Or do you think it’s a waste of time that could ultimately end up mixing our content and presentation layers together again? Let us know in the comments!

Quoting with <blockquote> #

We’ve become pretty familiar with <blockquote> here, as most of our articles feature excerpts from the HTML5 specification. Look, here’s one right now:

The blockquote element represents a section that is quoted from another source.

Easy peasy, right? Nothing has really changed. Remember that as <blockquote> is a ‘block-level element’ (flow content) we can put most anything in it, including headers, images and tables, in addition to the usual paragraphs of text.

There are a couple of slight differences in HTML5 though. <blockquote> is a sectioning root, meaning that any <h1>-<h6> elements it contains don’t become part of the document’s outline. Also, adding a single paragraph of text with no enclosing <p> tags is now completely kosher.

Here are some simple <blockquote> examples (apologies for the fake content):

<blockquote>This is a short block quote — look Ma, no paragraph tags!</blockquote>

<blockquote><p>This is a longer block quote.</p>
  <p>It uses paragraph elements.</p>
</blockquote>

<blockquote><h1>OMG a heading!</h1>
  <ul><li>Block quotes can contain more than just paragraphs…</li></ul>
</blockquote>

Historically, adding the source of a <blockquote> was a semantic conundrum. If you add it as content of the <blockquote>, then semantically it would become part of the quote, right? <blockquote> (and <q>) have a cite attribute for the URL of the quote’s source, to provide context. That’s hidden data, however, and despite the potential for exposing the cite attribute via CSS and/or JS, that’s not as useful as a visible link.

<blockquote>
  <p>You know the golden rule, don’t you boy? Those who have the gold make the rules.</p>
  <footer>— Crazy hunch-backed old guy from the movie Aladdin</footer>
</blockquote>

<blockquote cite="http://www.imdb.com/character/ch0000672/quotes">
<p>You know the golden rule, don’t you boy? Those who have the gold make the rules.</p>
<footer>— <a href="http://www.imdb.com/character/ch0000672/quotes">Crazy hunch-backed old guy in Aladdin</a></footer>
</blockquote>

Even then, the cite attribute is probably only worth it if you can automate it (or you're just crazy OCD . We’ll return to <blockquote> in a bit, but let’s first probe into <q>.

Inline quotations with <q> #

<q> is for quoting something inline within a section of prose:

The q element represents some phrasing content quoted from another source.

This means we can’t use <q> for sarcasm or other non-quotation uses of quote marks (“”). In those cases, add punctuation manually.

The spec continues:

Quotation punctuation (such as quotation marks) that is quoting the contents of the element must not appear immediately before, after, or inside q elements; they will be inserted into the rendering by the user agent.

As with <blockquote>, you can also add a cite attribute with a URL for the quotation’s source (subject to the above caveats against hidden data). If you’re not using these extra features though, it’s a toss-up as to whether <q> is any better than just adding punctuation characters like “” as you type.

Okay, let’s see some specimens:

<p>Luke continued, <q>And then she called him a <q>scruffy-looking nerf-herder</q>! I think I’ve got a chance!</q> The poor naive fool…</p>

<ul>
<li lang="ja">彼女は<q>猫は『にゃん』と鳴く</q>と言った。</li>
<li><i lang="ja-latn">Kanojo wa <q>Nihongo ni neko wa “nyan” to naku</q> to itta.</i></li>
<li>She said <q>In Japanese cats say <i lang="ja-latn">nyan</i></q>.</li>
</ul>

<p><a href="http://www.imdb.com/character/ch0000672/quotes">The Aladdin character Jafar</a> presents an eloquent treatise on the recent global economic meltdown when he states <q cite="http://www.imdb.com/character/ch0000672/quotes">You know the golden rule, don’t you boy? Those who have the gold make the rules.</q></p>

Let’s examine how to style these elements next.

Styling <q> and <blockquote> #

Historically, browser support has been patchy for controlling the punctuation used by <q>. Things have settled down now, so we can define nested, language-specific and even author-defined punctuation via CSS.

1. Default <q> support requires on :before and :after
2. Webkit support has been weak, with "" and '' hard-coded until Safari 5.1 and Chrome 11. Ref: WebKit bugs 6503 (fixed) and 3234 (new).
3. Opera is buggy if you nest <q> to a greater depth than quote pairs in your quotes property (test case)

“Correct” punctuation is an intricate topic and varies depending on language, but it generally involves these characters:

If you’re using the charset UTF-8 (and you should be), we recommend you use the actual characters if possible, rather than the Unicode escapes in CSS or the entities in HTML. You can enter most of these using the keyboard — e.g. “ is Opt-[ on Mac, Alt + 0147 on Windows, and AltGr + V on Linux. Avoid using ", ' or ` in place of “” and ‘’. The “narrow no-break space” is used inside French guillemets.

Most languages alternate between two kinds of punctuation as quotes are nested, such as “” and ‘’ in English. To specify nested quote pairs in CSS, we would write this:

q {quotes: '“' '”' '‘' '’';} /* opening followed by closing quote pairs */
/* The equivalent using Unicode escapes:
  q {quotes: '\201C' '\201D' '\2018' '\2019';} */
q:before {content: open-quote;}
q:after {content: close-quote;}

Unfortunately, browsers use the last quote pair in the quotes property for more deeply nested quotations. In addition, Opera will use the wrong quote characters if you have more nested <q> than your quotes property defines quoting levels for (Opera quotes bug test case). Make sure you have enough levels by repeating quote pairs as necessary:

/* four levels of nested quotes */
q {quotes: '“' '”' '‘' '’' '“' '”' '‘' '’';}

WebKit had "" and '' hard-coded in the browser stylesheet until Safari 5.1 and Chrome 11, which prevented q:before {content: open-quote;} and q:after {content: close-quote;} from working. The workaround is to define opening and closing punctuation manually, then override with open-quote and close-quote. While it’s a little more involved, that’s why we use this CSS on HTML5 Doctor:

/* for two levels of nested quotations */
q {quotes: '“' '”' '‘' '’';}
 /* extra content definitions for pre-2011 WebKit */
q:before {content: '“'; content: open-quote;}
q:after {content: '”'; content: close-quote;}
q q:before {content: '‘'; content: open-quote;}
q q:after {content: '’'; content: close-quote;}
  /* q in blockquote */
blockquote q:before {content: '‘'; content: open-quote;}
blockquote q:after {content: '’'; content: close-quote;}
blockquote q q:before {content: '“'; content: open-quote;}
blockquote q q:after {content: '”'; content: close-quote;}
  /* blockquote hanging opening quote */
blockquote:before {display: block; height: 0; content: "“"; margin-left: -.95em; font: italic 400%/1 Cochin,Georgia,"Times New Roman",serif; color: #999;}

A more traditional English <blockquote> style uses an opening quote character before each paragraph of the quotation and a closing quote character on the last paragraph. You can do that with this CSS, but you’ll need to use <p> for the <blockquote>’s content.

/* alternative blockquote style */
blockquote {quotes: '“' '”';}
blockquote p:before {content: '“'; content: open-quote;}
blockquote p:after {content: ''; content: no-close-quote;}
blockquote p:last-child:after {content: '”'; content: close-quote;}

When quoting a foreign language, we use the quotation marks of the surrounding language, so a Japanese quote in an English sentence still uses English quotation marks:

All he knows how to say in Japanese is 「わかりません」 “わかりません” (I don’t understand).

If you’re dealing with multilingual content, you can specify the quotes property per-language:

/* quotes for French, German (two kinds) and Japanese */
:lang(fr) > q {quotes: '« ' ' »' '“' '”';}
:lang(de) > q {quotes: '„' '“' '‚' '‘';}
:lang(de) > q {quotes: '»' '«' '›' '‹';} /* alternative style */
:lang(ja) > q {quotes: '「' '」' '『' '』';}

You can learn more about this CSS in the specification: CSS Generated Content Module Level 3.

Okay, it’s time to put the rubber gloves on: <cite> is up next.

The rise and fall of <cite> #

<p><cite>Aladdin</cite> is a great movie, even after 73 viewings. Aren’t kids great?</p>

<p><cite><a href="http://en.wikipedia.org/wiki/Aladdin_(1992_Disney_film)">Aladdin</a></cite> is a great movie, even after 73 viewings. Aren’t kids great?</p>

<p><cite>A Game of Thrones</cite>, by George R. R. Martin</p>

<p><cite>A Game of Thrones</cite>, by <span class="hcard"><span class="fn n"><span class="given-name">George</span> <span class="additional-name">R. R.</span> <span class="family-name">Martin</span></span></span></p>

All together now #

Oay, let’s start mixing things up on the operating table and show some examples of <cite> with <blockquote> and <q>:

<blockquote>
<p>You know the golden rule, don’t you boy? Those who have the gold make the rules.</p>
<footer>— Crazy hunch-backed old guy in <cite><a href="http://en.wikipedia.org/wiki/Aladdin_(1992_Disney_film)">Aladdin</a></cite></footer>
</blockquote>

<blockquote cite="http://www.imdb.com/character/ch0000672/quotes">
<p>You know the golden rule, don’t you boy? Those who have the gold make the rules.</p>
<footer>— <a href="http://www.imdb.com/character/ch0000672/quotes">Crazy hunch-backed old guy</a> in <cite><a href="http://en.wikipedia.org/wiki/Aladdin_(1992_Disney_film)">Aladdin</a></cite></footer>
</blockquote>

<p>I wonder if feedback on <code>&lt;cite&gt;</code> prompted this:</p>
<blockquote><p>A person's name is not the title of a work — even if people call that person a piece of work</p>
<footer><cite><a href="http://developers.whatwg.org/text-level-semantics.html#the-cite-element">HTML5 for Web Developers</a></cite></footer>
</blockquote>

<ol>
<li>The information capacity of the human motor system in controlling the amplitude of movement, Paul M. Fitts (1954). <cite>Journal of Experimental Psychology</cite>, volume 47, number 6, June 1954, pp. 381–391</li>
</ol>

<blockquote>
<p>Citations … all include the following: author (or editor, compiler, or translator standing in place of the author), title (and usually subtitle), and date of publication.</p>
<footer><cite><a href="http://www.chicagomanualofstyle.org/">The Chicago Manual of Style</a></cite>, 15th Edition (Chicago: University of Chicago Press, 2003), 596</footer>
</blockquote>

Conclusion #

If you’ve made it this far, congratulations! You’ve now learned more about citing and quoting in HTML5 than you wanted to know But don’t keep the knowledge to yourself — let us know in the comments what you think. We’d also love to hear how you’re using <blockquote>, <q>, and <cite> in HTML5. If you share your code snippets, remember to escape them!

Updates #

1. 2011-06-29: It seems our long-running convention at HTML5 Doctor of using <footer> for attribution inside a <blockquote> is in keeping with the <footer> part of the spec, but not with the <blockquote> part. We’re investigating…
2. 2011-07-03: Hixie confirmed that our use of <footer> is currently non-conforming — <footer> can currently only be included in <blockquote> if it’s quoted content. However, the phrase “content inside a blockquote must be quoted from another source” also forbids other common changes and additions to block quotes, so I’m going to see if it can be changed.
3. 2011-07-10: I wrote an article <blockquote> problems and solutions about these problems, and initial feedback from Hixie is that there are legitimate issues, and he’ll review feedback via the WHATWG email list. So, please do that! You can also leave feedback in the comments here or ping me on Twitter (@boblet). Also, don’t miss Jeremy Keith’s excellent commentary “Citation needed” on the issue (watch out for those <cite>s though )
4. 2011-09-23: I’ve added keyboard shortcuts for punctuation characters to the punctuation table, for default (typically US) keyboards.