Lengthy Stay the Q Tag – A Checklist Aside

by

The Q tag has been round for practically 9 years, ever because the first model of HTML 4.0. Its goal is to deal with brief, inline quotations that don’t require paragraph breaks.  The Q tag is often related to the blockquote tag, which is used for lengthy, block-level quotations.  Because the Q tag’s inception, it has by no means been totally appropriate with Microsoft Web Explorer for Home windows.

Article Continues Beneath

Citation marks are presupposed to render with use of the Q tag however not with use of the blockquote tag (it’s not obligatory because the blockquote tag separates its enclosed content material from its surrounding content material).  Nonetheless, IE/Win doesn’t render these citation marks, and due to this, most net authors select to not use the Q tag.  I’m right here to alter all that!

I’m certain everyone knows the difficulties in making a site that has legitimate CSS and XHTML, is totally accessible and usable, is constant in its visible show and is in accordance with the W3C HTML 4.01 Specification, together with every part else.  With this specific repair, the W3C HTML 4.01 Specification is jeopardized ever so barely; accessiblity and constant visible show rank larger on my precedence record than excellent compliance with the W3C HTML 4.01 Specification. I’ll advocate some alternate options on the finish of this text for these with totally different priorities.

Instance: Do you know The short brown fox jumps over the lazy canine accommodates each letter of the alphabet?

Within the above instance, it’s best to see citation marks round “The short brown fox jumps over the lazy canine.”  For those who don’t, you’re utilizing IE/Win, am I proper? No, I’m not psychic (I want!)—IE/Win doesn’t render the citation marks which might be presupposed to be rendered with use of the Q tag.

For these of us Looking Comfortable, and even looking with Lynx (a text-only browser), we see the citation marks (straight citation marks in Lynx).  The issue lies with solely IE/Win.  Allow us to see what IE/Win sees:

Instance: Do you know The short brown fox jumps over the lazy canine accommodates each letter of the alphabet?

It’s grammatically incorrect gibberish, and there’s no visible indication of a citation though the Q tag is getting used.  Preposterous! I’ll repair this.

Due to IE/Win’s lack of assist for the Q tag, the Q tag will not be utilized by many net designers or net authors.  This can be as a result of there was no stable resolution to rectify IE/Win’s defective assist for the tag. Many of the articles I’ve learn on the Q tag (Simon Willison’s “Fixing quotes with Javascript”, Mark Pilgrim’s “The Q tag” and “The Q tag revisited”, and Richard Rutter’s “Citations and quotes”) depend on a number of of the next:

  • Utilizing CSS to italicize the Q tag in IE/Win.
  • Utilizing JavaScript to render the citation marks.
  • Ceasing to make use of the Q tag altogether.

Different fixes (not from the above articles) I’ve examine embody:

  • Utilizing the blockquote tag as a substitute.
  • Utilizing the Q tag, but additionally together with your personal citation marks.

The difficulty with these fixes#section3

  1. Utilizing CSS to italicize the Q tag in IE/Win.
    • This might trigger confusion: I wouldn’t assume italicized textual content to be a quote until I noticed citation marks round it.

  2. Utilizing JavaScript to render the citation marks.

    • Many individuals disable JavaScript, so the folks utilizing IE/Win with JavaScript disabled nonetheless received’t see the citation marks.
    • Double citation marks will seem if and when IE/Win fixes the issue in a future launch.

  3. Ceasing to make use of the Q tag altogether.

    • Why? The Q tag is neccessary for semantic markup and for display screen readers.

  4. Utilizing the blockquote tag as a substitute.

    • Utilizing an incorrect tag will not be the answer.

  5. Utilizing the Q tag, but additionally together with your personal citation marks.

    • This can end in double citation marks in browsers apart from IE/Win.

Then what’s the resolution?#section4

I’m cussed, so I didn’t wish to use any of the above fixes—I wished to make use of the Q tag and have it work for everybody, even sooner or later when IE/Win helps the tag.

After a lot thought, I spotted I ought to attempt to alter the different browsers as a substitute of IE/Win. That’s after I got here up with the next CSS code.

q:earlier than, q:after {
    content material: ""; }

IE/Win doesn’t acknowledge :earlier than and :after pseudo-elements, however it isn’t neccessary for IE/Win to acknowledge them for this repair.

As you may see within the CSS code, the content material property is clean.  This overrides the browser’s default fashion for the Q tag and replaces it in order that no citation marks are proven.  All browsers will now act like IE/Win does when it comes throughout the Q tag.

Merely add the above CSS code to your stylesheet and add citation entities outdoors the Q tag and now all of the browsers, together with IE/Win, will show citation marks—and we received’t have to fret in regards to the different browsers having double citation marks as a result of we overrode the Q fashion with our personal.  It could be annoying to have so as to add the citation entities, but it surely’s value it to your IE/Win customers.

Citation entities:

Left double citation mark (eg. “): “
Proper double citation mark (eg. ”): ”
left single citation mark (eg. ‘): ‘
Proper single citation mark (eg. ’): ’
Straight citation mark (eg. “): "

Instance code:

Do you know “The short brown fox jumps over the lazy canine” accommodates each letter of the alphabet?

Returns:

Do you know “The short brown fox jumps over the lazy canine” accommodates each letter of the alphabet?

What are the downsides?#section5

In accordance with the W3C HTML 4.01 Specification:

Visible person brokers should make sure that the content material of the Q component is rendered with delimiting citation marks. Authors shouldn’t put citation marks at first and finish of the content material of a Q component.

As talked about above, authors shouldn’t put citation marks contained in the Q tag. With this repair, I counsel the citation mark entities be placed on the skin of the Q tag, thus not disobeying the W3C HTML 4.01 Specification (the XHTML 1.0 specs depend on HTML4.01 for the meanings of XHTML parts and attributes). If it’s worthwhile to use a quote inside a quote, you’ll have to put the one citation mark entities contained in the Q tag, which isn’t in accordance with the W3C HTML 4.01 Specification.

Hooray! Now we’ve a manner to make use of the Q tag to keep up semantic markup and accessibility and cater to IE/Win customers. So far as future assist for the Q tag goes, it’s not but recognized if the builders of IE/Win will acknowledge and handle the browser’s lack of assist for the Q tag. As of IE/Win 7 Beta 3, the Q tag remains to be unsupported. To strengthen this, the Q tag will not be even talked about on IEBlog (apart from in feedback from customers).

When the Q tag is lastly supported by IE/Win, the above repair received’t harm the expertise of customers with new browsers, and it’ll nonetheless repair the issue for customers of older, damaged variations of IE/Win.
So there you will have it of us, a backward- and forward-compatible repair for the Q tag. Take pleasure in!

Addendum: alternate options#section7

The Q has been written about by many and listed here are a couple of extra options it’s possible you’ll wish to attempt:

I’d advocate Simon Willison’s “Fixing quotes with Javascript” because the second-best resolution to the Q tag.  At the moment it really works wonderful, although it clearly depends on JavaScript. Additionally, this repair isn’t ahead appropriate: as soon as IE/Win helps the Q tag, Simon Willison’s repair will trigger double citation marks for customers with the brand new model of IE/Win.

Leave a Comment