Use real content, not CSS, to add Example labels.

Use real content, not CSS, to add Example labels.

Diffs for this change per section: 
http://people.w3.org/mike/diffs/html5/html-design-principles/Overview.1.26.html#degrade-gracefully
http://people.w3.org/mike/diffs/html5/html-design-principles/Overview.1.26.html#pave-the-cowpaths
http://people.w3.org/mike/diffs/html5/html-design-principles/Overview.1.26.html#support-existing-content
http://people.w3.org/mike/diffs/html5/html-design-principles/Overview.1.26.html#support-world-languages
http://people.w3.org/mike/diffs/html5/html-design-principles/Overview.1.26.html#evolution-not-revolution
http://people.w3.org/mike/diffs/html5/html-design-principles/Overview.1.26.html#media-independence
http://people.w3.org/mike/diffs/html5/html-design-principles/Overview.1.26.html#do-not-reinvent-the-wheel
http://people.w3.org/mike/diffs/html5/html-design-principles/Overview.1.26.html#accessibility
http://people.w3.org/mike/diffs/html5/html-design-principles/Overview.1.26.html#dom-consistency
http://people.w3.org/mike/diffs/html5/html-design-principles/Overview.1.26.html#interoperability
http://people.w3.org/mike/diffs/html5/html-design-principles/Overview.1.26.html#secure-by-design
http://people.w3.org/mike/diffs/html5/html-design-principles/Overview.1.26.html#separation-of-concerns
http://people.w3.org/mike/diffs/html5/html-design-principles/Overview.1.26.html#conformance
http://people.w3.org/mike/diffs/html5/html-design-principles/Overview.1.26.html#acknowledgments
http://people.w3.org/mike/diffs/html5/html-design-principles/Overview.1.26.html#utility

http://people.w3.org/mike/diffs/html5/html-design-principles/Overview.diff.html
http://dev.w3.org/cvsweb/html5/html-design-principles/Overview.html?r1=1.25&r2=1.26&f=h

===================================================================
RCS file: /sources/public/html5/html-design-principles/Overview.html,v
retrieving revision 1.25
retrieving revision 1.26
diff -u -d -r1.25 -r1.26
--- Overview.html 26 May 2009 07:45:49 -0000 1.25
+++ Overview.html 26 May 2009 10:37:00 -0000 1.26
@@ -6,7 +6,6 @@
 
   <style type="text/css">
       .example { padding-left: 1em; border-left: 3px solid green }
-      .example:before { content: "Example: "; font-weight: bold; }
       .note { font-style: italic; }
       dfn { font-style:normal; font-weight:bold }
       code { color:orangered }
@@ -296,14 +295,15 @@
    that something is part of the supported language does not by itself mean
    that relying on it is condoned or encouraged.
 
-  <p class=example>Many sites use broken markup, such as badly nested
-   elements (<code>&lt;b>a&lt;i>b&lt;/b>c&lt;/i></code>), and both authors
-   and users have expectations based on the error handling used by legacy
-   user agents. We need to define processing requirements that remain
-   compatible with the expected handling of such content.
+  <p class=example><b>Example:</b> Many sites use broken markup, such as
+   badly nested elements (<code>&lt;b>a&lt;i>b&lt;/b>c&lt;/i></code>), and
+   both authors and users have expectations based on the error handling used
+   by legacy user agents. We need to define processing requirements that
+   remain compatible with the expected handling of such content.
 
-  <p class=example>Some sites rely on the <code>&lt;u&gt;</code> element
-   giving the presentational effect of an underline.
+  <p class=example><b>Example:</b> Some sites rely on the
+   <code>&lt;u&gt;</code> element giving the presentational effect of an
+   underline.
 
   <h3 id=degrade-gracefully><span class=secno>2.2 </span>Degrade Gracefully</h3>
 
@@ -362,31 +362,32 @@
   <p>This list is not exhaustive; in some cases slightly more complicated
    approaches are more effective.</p>
   <!--
-    <p class="example">The default presentation of the
+    <p class="example"><b>Example:</b> The default presentation of the
     proposed <code>&lt;section&gt;</code> element can be emulated
     through the CSS rule <code>section { display: block; }</code>.</p>
     -->
 
-  <p class=example>The default presentation of the proposed
+  <p class=example><b>Example:</b> The default presentation of the proposed
    <code>hidden</code> attribute can be emulated through the CSS rule
    <code>[hidden] { display: none; }</code>.
 
-  <p class=example>Proposed new multimedia elements like <code>&lt;canvas>
-   fallback &lt;/canvas></code> or <code>&lt;video> fallback
-   &lt;/video></code> allow fallback content. Older user agents will show
-   "fallback" while user agents supporting <code>canvas</code> or
+  <p class=example><b>Example:</b> Proposed new multimedia elements like
+   <code>&lt;canvas> fallback &lt;/canvas></code> or <code>&lt;video>
+   fallback &lt;/video></code> allow fallback content. Older user agents will
+   show "fallback" while user agents supporting <code>canvas</code> or
    <code>video</code> will show the multimedia content.
 
-  <p class=example>The proposed <code>getElementsByClassName()</code> method
-   can be made considerably faster than pure ECMAScript implementations found
-   in existing libraries, but a script-based implementation can be used when
-   the native version is not available.
+  <p class=example><b>Example:</b> The proposed
+   <code>getElementsByClassName()</code> method can be made considerably
+   faster than pure ECMAScript implementations found in existing libraries,
+   but a script-based implementation can be used when the native version is
+   not available.
 
-  <p class=example>The <code>&lt;datalist></code> element can be associated
-   with an <code>&lt;input></code> element and may contain a hidden
-   <code>&lt;select></code> element. This way the fallback for the intended
-   "combo box" control can be a text field or a text field with an associated
-   pop-up menu in existing mainstream browsers
+  <p class=example><b>Example:</b> The <code>&lt;datalist></code> element can
+   be associated with an <code>&lt;input></code> element and may contain a
+   hidden <code>&lt;select></code> element. This way the fallback for the
+   intended "combo box" control can be a text field or a text field with an
+   associated pop-up menu in existing mainstream browsers
 
   <h3 id=do-not-reinvent-the-wheel><span class=secno>2.3 </span>Do not
    Reinvent the Wheel</h3>
@@ -397,17 +398,18 @@
    cases may call for a new approach instead of more extensions on an old
    approach.
 
-  <p class=example><code>contenteditable=""</code> was already used and
-   implemented by user agents. No need to invent a new feature.
+  <p class=example><b>Example:</b> <code>contenteditable=""</code> was
+   already used and implemented by user agents. No need to invent a new
+   feature.
 
   <h3 id=pave-the-cowpaths><span class=secno>2.4 </span>Pave the Cowpaths</h3>
 
   <p>When a practice is already widespread among authors, consider adopting
    it rather than forbidding it or inventing something new.
 
-  <p class=example>Authors already use the <code>&lt;br/></code> syntax as
-   opposed to <code>&lt;br></code> in HTML and there is no harm done by
-   allowing that to be used.
+  <p class=example><b>Example:</b> Authors already use the
+   <code>&lt;br/></code> syntax as opposed to <code>&lt;br></code> in HTML
+   and there is no harm done by allowing that to be used.
 
   <h3 id=evolution-not-revolution><span class=secno>2.5 </span>Evolution Not
    Revolution</h3>
@@ -421,8 +423,8 @@
    add new features to existing code, rather than having to develop whole
    separate modes.
 
-  <p class=example>Switching to XML syntax requires a global change, so
-   continue supporting classic HTML syntax as well.
+  <p class=example><b>Example:</b> Switching to XML syntax requires a global
+   change, so continue supporting classic HTML syntax as well.
 
   <h2 id=utility><span class=secno>3 </span>Utility</h2>
 
@@ -453,10 +455,10 @@
   <p>Ensure that features work with the security model of the web.
    Preferrably address security considerations directly in the specification.
 
-  <p class=example>Communicating between documents from different sites is
-   useful, but an unrestricted version could put user data at risk.
-   Cross-document messaging is designed to allow this without violating
-   security constraints.
+  <p class=example><b>Example:</b> Communicating between documents from
+   different sites is useful, but an unrestricted version could put user data
+   at risk. Cross-document messaging is designed to allow this without
+   violating security constraints.
 
   <h3 id=separation-of-concerns><span class=secno>3.4 </span>Separation of
    Concerns</h3>
@@ -472,15 +474,16 @@
    may be pragmatic (for brevity, history, simplicity) rather than completely
    accurate.
 
-  <p class=example>The <code>&lt;article></code> element defines an
-   individual article, but not the details of how it is displayed. A journal
-   article may be the only article on a page, formatted in multiple columns,
-   while a blog post may share a page with multiple other articles and be
-   presented in a box with a border.
+  <p class=example><b>Example:</b> The <code>&lt;article></code> element
+   defines an individual article, but not the details of how it is displayed.
+   A journal article may be the only article on a page, formatted in multiple
+   columns, while a blog post may share a page with multiple other articles
+   and be presented in a box with a border.
 
-  <p class=example>The <code>&lt;b></code> and <code>&lt;i></code> elements
-   are widely used &mdash; it may be better to give them good default
-   rendering for various media including aural than to try to ban them.
+  <p class=example><b>Example:</b> The <code>&lt;b></code> and
+   <code>&lt;i></code> elements are widely used &mdash; it may be better to
+   give them good default rendering for various media including aural than to
+   try to ban them.
 
   <h3 id=dom-consistency><span class=secno>3.5 </span>DOM Consistency</h3>
 
@@ -494,9 +497,9 @@
    deployed content, gratuitous difference in syntactic appearance should be
    avoided as well.
 
-  <p class=example>The HTML (<code>text/html</code>) parser puts elements in
-   the <code>http://www.w3.org/1999/xhtml</code> namespace in the DOM for
-   compatibility with the XML syntax of HTML&nbsp;5.
+  <p class=example><b>Example:</b> The HTML (<code>text/html</code>) parser
+   puts elements in the <code>http://www.w3.org/1999/xhtml</code> namespace
+   in the DOM for compatibility with the XML syntax of HTML&nbsp;5.
 
   <h2 id=interoperability><span class=secno>4 </span>Interoperability</h2>
 
@@ -539,12 +542,13 @@
    example, interactive features should not be omitted merely because they
    can not be represented in a printed document.
 
-  <p class=example>The general reflowability of HTML text makes it more
-   suitable to variable screen dimensions than a representation of exact
-   glyph positions.
+  <p class=example><b>Example:</b> The general reflowability of HTML text
+   makes it more suitable to variable screen dimensions than a representation
+   of exact glyph positions.
 
-  <p class=example>A hyperlink can not be actuated in a printed document, but
-   that is no reason to omit the <code>a</code> element.
+  <p class=example><b>Example:</b> A hyperlink can not be actuated in a
+   printed document, but that is no reason to omit the <code>a</code>
+   element.
 
   <h3 id=support-world-languages><span class=secno>5.2 </span>Support World
    Languages</h3>
@@ -554,18 +558,20 @@
    all of them. Features for packing multiple translations of a document in a
    single file are out of scope.
 
-  <p class=example>Supporting Unicode allows text in most of the world's
-   languages, including mixing of text in different languages.
+  <p class=example><b>Example:</b> Supporting Unicode allows text in most of
+   the world's languages, including mixing of text in different languages.
 
-  <p class=example>Italic text is useful because it applies to many bicameral
-   scripts, even though some scripts have no such concept. Similarly, ruby is
-   useful for many scripts, even though it has a CJK focus.
+  <p class=example><b>Example:</b> Italic text is useful because it applies
+   to many bicameral scripts, even though some scripts have no such concept.
+   Similarly, ruby is useful for many scripts, even though it has a CJK
+   focus.
 
-  <p class=example>Text in element content has better language support than
-   text in attribute content; in element content ruby annotations can be
-   inserted, as well as <code>&lt;dir></code> attributes and
-   <code>&lt;bdo></code> elements in case the Unicode bidirectional algorithm
-   is insufficient to correctly order adjacent runs of mixed direction text.
+  <p class=example><b>Example:</b> Text in element content has better
+   language support than text in attribute content; in element content ruby
+   annotations can be inserted, as well as <code>&lt;dir></code> attributes
+   and <code>&lt;bdo></code> elements in case the Unicode bidirectional
+   algorithm is insufficient to correctly order adjacent runs of mixed
+   direction text.
 
   <h3 id=accessibility><span class=secno>5.3 </span>Accessibility</h3>
 
@@ -574,13 +580,14 @@
    features should be omitted entirely if not all users can make full use of
    them, but alternate mechanisms should be provided.
 
-  <p class=example>The image in an <code>&lt;img></code> may not be visible
-   to blind users, but that is a reason to provide alternate text, not to
-   leave out images.
+  <p class=example><b>Example:</b> The image in an <code>&lt;img></code> may
+   not be visible to blind users, but that is a reason to provide alternate
+   text, not to leave out images.
 
-  <p class=example>The <code>&lt;progress></code> element is intrinsically
-   accessible as it has unambiguous progress bar semantics which permits
-   mapping to accessibility APIs that can represent progress indicators.
+  <p class=example><b>Example:</b> The <code>&lt;progress></code> element is
+   intrinsically accessible as it has unambiguous progress bar semantics
+   which permits mapping to accessibility APIs that can represent progress
+   indicators.
 
   <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
 

Index: Overview.src.html
===================================================================
RCS file: /sources/public/html5/html-design-principles/Overview.src.html,v
retrieving revision 1.25
retrieving revision 1.26
diff -u -d -r1.25 -r1.26
--- Overview.src.html 26 May 2009 07:45:49 -0000 1.25
+++ Overview.src.html 26 May 2009 10:37:00 -0000 1.26
@@ -4,7 +4,6 @@
     <title>HTML Design Principles</title>
     <style type="text/css">
       .example { padding-left: 1em; border-left: 3px solid green }
-      .example:before { content: "Example: "; font-weight: bold; }
       .note { font-style: italic; }
       dfn { font-style:normal; font-weight:bold }
       code { color:orangered }
@@ -219,13 +218,13 @@
     part of the supported language does not by itself mean that
     relying on it is condoned or encouraged.</p>
 
-    <p class="example">Many sites use broken markup, such as badly nested
+    <p class="example"><b>Example:</b> Many sites use broken markup, such as badly nested
     elements (<code>&lt;b>a&lt;i>b&lt;/b>c&lt;/i></code>), and both authors and
     users have expectations based on the error handling used by legacy user
     agents. We need to define processing requirements that remain compatible
     with the expected handling of such content.</p>
 
-    <p class="example">Some sites rely on the <code>&lt;u&gt;</code> element giving
+    <p class="example"><b>Example:</b> Some sites rely on the <code>&lt;u&gt;</code> element giving
     the presentational effect of an underline.</p>
 
     <h3 id="degrade-gracefully">Degrade Gracefully</h3>
@@ -284,29 +283,29 @@
     complicated approaches are more effective.</p>
 
     <!--
-    <p class="example">The default presentation of the
+    <p class="example"><b>Example:</b> The default presentation of the
     proposed <code>&lt;section&gt;</code> element can be emulated
     through the CSS rule <code>section { display: block; }</code>.</p>
     -->
 
-    <p class="example">The default presentation of the
+    <p class="example"><b>Example:</b> The default presentation of the
     proposed <code>hidden</code> attribute can be emulated
     through the CSS rule <code>[hidden] { display: none; }</code>.</p>
 
-    <p class="example">Proposed new multimedia elements
+    <p class="example"><b>Example:</b> Proposed new multimedia elements
     like <code>&lt;canvas> fallback &lt;/canvas></code>
     or <code>&lt;video> fallback &lt;/video></code> allow fallback
     content. Older user agents will show "fallback" while user agents
     supporting
     <code>canvas</code> or <code>video</code> will show the multimedia content.</p>
 
-    <p class="example">The
+    <p class="example"><b>Example:</b> The
     proposed <code>getElementsByClassName()</code> method can be made
     considerably faster than pure ECMAScript implementations found in
     existing libraries, but a script-based implementation can be used
     when the native version is not available.</p>
 
-    <p class="example">The <code>&lt;datalist></code> element can be
+    <p class="example"><b>Example:</b> The <code>&lt;datalist></code> element can be
     associated with an <code>&lt;input></code> element and may contain
     a hidden <code>&lt;select></code> element. This way the fallback
     for the intended "combo box" control can be a text field or a text
@@ -320,7 +319,7 @@
     cases may call for a new approach instead of more extensions on an old
     approach.</p>
     
-    <p class="example"><code>contenteditable=""</code> was already used and
+    <p class="example"><b>Example:</b> <code>contenteditable=""</code> was already used and
     implemented by user agents. No need to invent a new feature.</p>
 
     <h3 id="pave-the-cowpaths">Pave the Cowpaths</h3>
@@ -328,7 +327,7 @@
     <p>When a practice is already widespread among authors, consider adopting it
     rather than forbidding it or inventing something new.</p>
 
-    <p class="example">Authors already use the <code>&lt;br/></code> syntax as
+    <p class="example"><b>Example:</b> Authors already use the <code>&lt;br/></code> syntax as
     opposed to <code>&lt;br></code> in HTML and there is no harm done by
     allowing that to be used.</p> 
 
@@ -343,7 +342,7 @@
     features to existing code, rather than having to develop whole separate
     modes.</p>
     
-    <p class="example">Switching to XML syntax requires a global change, so
+    <p class="example"><b>Example:</b> Switching to XML syntax requires a global change, so
     continue supporting classic HTML syntax as well.</p>
 
 
@@ -375,7 +374,7 @@
     <p>Ensure that features work with the security model of the web. Preferrably
     address security considerations directly in the specification.</p>
     
-    <p class="example">Communicating between documents from different sites is
+    <p class="example"><b>Example:</b> Communicating between documents from different sites is
     useful, but an unrestricted version could put user data at risk.
     Cross-document messaging is designed to allow this without violating
     security constraints.</p>
@@ -393,13 +392,13 @@
     pragmatic (for brevity, history, simplicity) rather than completely
     accurate.</p>
 
-    <p class="example">The <code>&lt;article></code> element defines an individual
+    <p class="example"><b>Example:</b> The <code>&lt;article></code> element defines an individual
     article, but not the details of how it is displayed. A journal article may
     be the only article on a page, formatted in multiple columns, while a blog
     post may share a page with multiple other articles and be presented in a box
     with a border.</p>
     
-    <p class="example">The <code>&lt;b></code> and <code>&lt;i></code> elements are widely
+    <p class="example"><b>Example:</b> The <code>&lt;b></code> and <code>&lt;i></code> elements are widely
     used &mdash; it may be better to give them good default rendering for various
     media including aural than to try to ban them.</p>
     
@@ -416,7 +415,7 @@
     and deployed content, gratuitous difference in syntactic appearance
     should be avoided as well.</p>
 
-    <p class="example">The HTML (<code>text/html</code>) parser puts
+    <p class="example"><b>Example:</b> The HTML (<code>text/html</code>) parser puts
     elements in the <code>http://www.w3.org/1999/xhtml</code> namespace in
     the DOM for compatibility with the XML syntax of HTML&nbsp;5.</p>
 
@@ -463,11 +462,11 @@
     interactive features should not be omitted merely because they can not be
     represented in a printed document.</p>
     
-    <p class="example">The general reflowability of HTML text makes it more
+    <p class="example"><b>Example:</b> The general reflowability of HTML text makes it more
     suitable to variable screen dimensions than a representation of exact glyph
     positions.</p>
     
-    <p class="example">A hyperlink can not be actuated in a printed document,
+    <p class="example"><b>Example:</b> A hyperlink can not be actuated in a printed document,
     but that is no reason to omit the <code>a</code> element.</p>
 
 
@@ -478,14 +477,14 @@
     apply to all of them. Features for packing multiple translations of a
     document in a single file are out of scope.</p>
     
-    <p class="example">Supporting Unicode allows text in most of the world's
+    <p class="example"><b>Example:</b> Supporting Unicode allows text in most of the world's
     languages, including mixing of text in different languages.</p>
     
-    <p class="example">Italic text is useful because it applies to many bicameral
+    <p class="example"><b>Example:</b> Italic text is useful because it applies to many bicameral
     scripts, even though some scripts have no such concept. Similarly, ruby is
     useful for many scripts, even though it has a CJK focus.</p>
     
-    <p class="example">Text in element content has better language support than
+    <p class="example"><b>Example:</b> Text in element content has better language support than
     text in attribute content; in element content ruby annotations can be
     inserted, as well as <code>&lt;dir></code> attributes and <code>&lt;bdo></code>
     elements in case the Unicode bidirectional algorithm is insufficient to
@@ -499,11 +498,11 @@
     features should be omitted entirely if not all users can make full use
     of them, but alternate mechanisms should be provided.</p>
 
-    <p class="example">The image in an <code>&lt;img></code> may not be visible to
+    <p class="example"><b>Example:</b> The image in an <code>&lt;img></code> may not be visible to
     blind users, but that is a reason to provide alternate text, not to leave
     out images.</p>
     
-    <p class="example">The <code>&lt;progress></code> element is intrinsically
+    <p class="example"><b>Example:</b> The <code>&lt;progress></code> element is intrinsically
     accessible as it has unambiguous progress bar semantics which permits
     mapping to accessibility APIs that can represent progress
     indicators.</p>

Received on Tuesday, 26 May 2009 10:38:07 UTC