413 lines
22 KiB
HTML
413 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>Demo for basic-improved</title>
|
||
<link href="./ao3-sitestyle-basicimproved.css" rel="stylesheet" />
|
||
<link href="./feature-tests.css" rel="stylesheet" />
|
||
|
||
<link href="./styles/color-x11.css" rel="stylesheet" />
|
||
<link href="./styles/terminal.css" rel="stylesheet" />
|
||
<link href="./styles/decorative.css" rel="stylesheet" />
|
||
<link href="./styles/interwiki.css" rel="stylesheet" />
|
||
<style>
|
||
body {
|
||
margin: 0 4vw;
|
||
}
|
||
|
||
section {
|
||
margin: 0 auto; width: 88%;
|
||
font-size: 1.4rem;
|
||
}
|
||
|
||
section + hr {
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<section id="headers" style="background-color: #eee; margin: 0 auto; width: 84%; border: 2px solid black;">
|
||
<h1>Demo</h1>
|
||
|
||
<p>A demo for my <code>basic-improved</code> work skin, featuring a number of additions and a few style fixes to make more direct use of standard CSS capabilities. This also serves as a general sample of what CSS does AO3 allow.</p>
|
||
|
||
</section>
|
||
<hr/>
|
||
<!-- BEGIN work -->
|
||
<div id="workskin" style="">
|
||
<div class="notes module"><h3 class="heading">Pre Notes</h3><blockquote>
|
||
Pre Notes
|
||
</blockquote>
|
||
</div>
|
||
<section>
|
||
<div class="seclinks">
|
||
<a href="#typography">Typography</a> | <a href="#additional-typography">Additional</a> | <a href="#interwiki">Interwiki</a>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section id="support-status">
|
||
<h2>Support Status</h2>
|
||
|
||
<p>As of this last edit, AO3 does/not support some things as show in this table. The following tests assume your browser supports the requires features in the first place, so each one is linked to their corresponding MDN page or other documentation so you can also check support for your browser.</p>
|
||
|
||
<div class="feature-tests">
|
||
<table border=1>
|
||
<thead>
|
||
<tr><th>Note:</th> <td>As of last edit, AO3 only supports providing properties for these styles in CSS / classes; not in <code>style</code> or <code>data-*</code>. </td></tr></thead>
|
||
<tbody>
|
||
<tr><th>Character Sets</th> <td>Latin: <span>abcd efgh ijkl</span>;<br/> Greek: <span>αβγδ ΑΒΓΔ πενυσ</span>;<br/> Japanese: <span>ファッション</span>;<br/> </td>
|
||
</tr>
|
||
<tr><th>Basic Typography</th> <td ><span> In this section we test:<br/> <i>italics</i> (i), <b>bold</b> (b), <u>underline</u> (u), <s>strike</s> (s), <em>emphasis</em> (em), <strong>strong emphasis</strong> (strong), <sup>superscript</sup> (sup), <sub>subscript</sub> (sub)</span> . </td>
|
||
</tr>
|
||
<tr>
|
||
<th>Color Notations </th> <td>
|
||
These test boxes have border decoration if AO3's CSS supports the color formulas: <br/>
|
||
<span class="test-colorfn-rgb">rgb()</span>, <span class="test-colorfn-hsl">hsl()</span> and <span class="test-colorfn-oklab">oklab()</span>. <br/>
|
||
These test boxes have border decoration if AO3's CSS supports system color notations: <br/>
|
||
<span class="test-colorfn-button">ButtonText + ButtonFace</span>, <span class="test-colorfn-accent">AccentColorText + AccentColor</span>. <br/>
|
||
</td>
|
||
</tr>
|
||
<tr><th>Length Notations</th> <td>These lines have specific sizes if AO3 allows the render to set them; should be empty otherwise:<br/>
|
||
<span class="tests-length cm"></span> 5cm <br/>
|
||
<span class="tests-length ch"></span> 4ch (~4 '0' characters together)<br/>
|
||
<span class="tests-length vw"></span> 25vw (~25% of window width) <br/>
|
||
<span class="tests-length" style="width: 30px;"></span> Test with <style> <br/>
|
||
</td></tr>
|
||
<tr><th><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme">Media Color Scheme</a></th> <td class="with-color-scheme" style="color: CanvasText; background-color: Canvas;">This test box <span class="test-colorscheme">test: </span> <br/> says "light" or "dark" if AO3 supports checking the preference for Light/Dark Mode, and the cell is decorated for the color scheme.</td>
|
||
</tr>
|
||
<tr>
|
||
<th><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation">Media Orientation</a> </th> <td>This test box <span class="test-orientation">test: </span> <br/> says "landscape" or "portrait" if AO3 supports checking the screen orientation. </td>
|
||
</tr>
|
||
<tr><th>Tagging languages</th> <td>If <span lang="fr">this text is marked</span>, AO3 supports adding the <code>lang</code> attribute to elements. <br/> Example: a dialogue paragraph tagged with <code>lang="it"</code> for Italian.</td>
|
||
</tr>
|
||
<tr><th> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ruby">Ruby</a> </th> <td>If <span ><ruby>this text <rt>that text</rt></ruby> </span> has a fancy ruby / furigana , AO3 supports the <code>ruby</code> element.<br/>I was <a href="https://fandom.ink/@VeniaSilente/107222395366917702">among the ones</a> to petition for support. </td>
|
||
</tr>
|
||
<tr><th><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/calc">Variables</a> </th> <td>If <span class="test-variable">this text is marked</span>, AO3 supports CSS variables eg.: <br/><code>--var: blue;</code> , and reading them via the <code>var()</code> function. </td>
|
||
</tr>
|
||
<tr><th>Attributes in styles</th> <td>If <span lang="es">this text is marked</span>, AO3 supports setting and styling data attributes, eg.: <br/><code>span data-item="value"</code>.</td>
|
||
</tr>
|
||
<tr><th><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/attr"><code>attr()</code></a> in <code>content:</code></th> <td>If <span class="test-content" data-checkmark="✓">there is a checkmark here→</span>, AO3 supports attribute values for <code>content:</code>.</td>
|
||
</tr>
|
||
<tr><th><code>attr()</code> in properties</th> <td>If <span class="test-property" data-border="blue">this text is marked</span>, AO3 supports setting attribute values for properties other than <code>content:</code>.</td>
|
||
<tr><th><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/calc"><code>calc()</code> function</a> </th> <td>If <span data-opacity="yes">this text is marked</span>, AO3 supports the <code>calc()</code> function. <br/>(In this test, that also requires <b>Variables</b>)</td>
|
||
</tr>
|
||
<tr><th>@keyframes aka <br/> <code><blink></code> emulation!</th> <td>If <span data-blink="yes">this text is marked</span> and blinking in your browser, AO3 supports CSS animations!</td>
|
||
</tr>
|
||
</tbody></table>
|
||
</div>
|
||
|
||
</section>
|
||
<hr/>
|
||
|
||
|
||
<h2>Typography</h2>
|
||
<section id="typography">
|
||
<p>A normal paragraph of content. Paragraphs are formed as strings of words, each word is made of letters. Examples of letters include: abcdef ghijkl mnñopq rstuvw xyz and π who is cool.</p>
|
||
|
||
<p>A following paragraph. Demonstrate use of basic HTML: A <code><br/></code> tag <br/>stands for a linebreak as as shown here<br/> at the end of the line.</p>
|
||
|
||
<p>There is a difference between <em>emphasis</em> and <i>italics</i>.</p>
|
||
|
||
<p>There is a difference between <strong>strong</strong> and <b>bold</b>.</p>
|
||
|
||
|
||
|
||
<p>Example headings from levels 1 to 4:</p>
|
||
|
||
<h1>Header level 1</h1>
|
||
<h2>Header level 2</h2>
|
||
<h3>Header level 3</h3>
|
||
<h4>Header level 4</h4>
|
||
|
||
<h3>Font Size</h3>
|
||
|
||
<p>These classes wrap the CSS selectors for font size:</p>
|
||
|
||
<p><span class="font-x-large">font-x-large</span> <br/> <span class="font-large">font-large</span> <br/> <span>normal</span> <br/> <span class="font-small">font-small</span> <br/> <span class="font-x-small">font-x-small</span></p>
|
||
|
||
<p><span class="font-larger">font-larger</span> <br/> <span>normal</span> <br/> <span class="font-smaller">font-smaller</span></p>
|
||
|
||
<p>These classes are specific to <code>basic-improved</code>, which are defined in terms of % of the base font size: +25% points for big, -15% for little.</p>
|
||
|
||
<p><span class="font-x-big">font-x-big</span> <br/> <span class="font-big">font-big</span> <br/> <span>normal</span> <br/> <span class="font-little">font-little</span><br/> <span class="font-x-little">font-x-little</span>
|
||
</p>
|
||
|
||
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length">normal CSS measurements for <code>length</code></a> can be used inline in AO3 as well with <code>style="font-size: [...];"</code>. These include: <tt>em</tt>, <tt>ex</tt>, <tt>ch</tt>, <tt>pt</tt> and <tt>rem</tt>.</p>
|
||
|
||
<table class="fixed" style="margin: 0 auto; border-collapse: separate;" border="1">
|
||
<tr><th>Example</th><th>Notes</th></tr>
|
||
<tr> <td><span style="font-size: 2em;">2 em</span></td> <td>size relative to inherited width of letter 'M'</td>
|
||
</tr>
|
||
<tr> <td><span style="font-size: 2ex;">2 ex</span></td> <td>size relative to inherited height of letter 'x'</td>
|
||
</tr>
|
||
<tr> <td><span style="font-size: 2ch;">2 ch</span></td> <td>size relative to width of number '0'</td>
|
||
</tr>
|
||
<tr><td><span style="font-size: 2rem;">2 rem</span></td> <td>size relative to document <code>::root</code></td>
|
||
</tr>
|
||
<tr><td><span style="font-size: 5vh;">5 vh</span></td> <td>size relative to height of viewport, in %</td>
|
||
</tr>
|
||
<tr><td><span style="font-size: 1.0cm;">1.0 cm</span></td> <td>absolute size in metric units, as Arceus intended</td>
|
||
</tr>
|
||
<tr><td><span style="font-size: 10pt;">10 pt</span></td> <td>absolute size in points; the "usual" is something like 14pt</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h3>Font Color</h3>
|
||
|
||
<p>A demo paragraph. Shows use of CSS modifier classes: <span class="color-red">color-red</span>, <span class="color-green">color-green</span> and <span class="color-blue">color-blue</span>. The effect depends on the render medium. There is one shortcut for every base CSS 2.1 color.</p>
|
||
|
||
<p>Most of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/named-color">X11 keywords for <code>color</code></a> can also be used in AO3 with named classes (<code></code>). Unfortunately, not with inline style as of last edit.</p>
|
||
|
||
<details>
|
||
<summary>Example of many named-color classes for this workskin</summary>
|
||
|
||
<table border=1 class="fixed narrow">
|
||
<colgroup>
|
||
<col class="with-light-scheme align-center" style="background-color: Canvas;" />
|
||
<col class="with-dark-scheme align-center" style="background-color: Canvas;" />
|
||
</colgroup>
|
||
|
||
<tbody>
|
||
<tr><td> <span class="color-blue">Color blue</span></td> <td><span class="color-blue">Color blue</span></td></tr>
|
||
<tr><td> <span class="color-green">Color green</span></td> <td><span class="color-green">Color green</span></td></tr>
|
||
<tr><td> <span class="color-red">Color red</span></td> <td><span class="color-red">Color red</span></td></tr>
|
||
|
||
<tr><td> <span class="color-x11-coral">color-x11-coral</span></td> <td><span class="color-x11-coral">color-x11-coral</span> </td></tr>
|
||
<tr><td> <span class="color-x11-forestgreen">color-x11-forestgreen</span></td> <td> <span class="color-x11-forestgreen">color-x11-forestgreen</span> </td></tr>
|
||
<tr><td> <span class="color-x11-fuchsia">color-x11-fuchsia</span></td> <td> <span class="color-x11-fuchsia">color-x11-fuchsia</span> </td></tr>
|
||
<tr><td> <span class="color-x11-indigo">color-x11-indigo</span></td> <td> <span class="color-x11-indigo">color-x11-indigo</span> </td></tr>
|
||
<tr><td> <span class="color-x11-lime">color-x11-lime</span></td> <td> <span class="color-x11-lime">color-x11-lime</span> </td></tr>
|
||
<tr><td> <span class="color-x11-orange">color-x11-orange</span></td> <td> <span class="color-x11-orange">color-x11-orange</span> </td></tr>
|
||
<tr><td> <span class="color-x11-plum">color-x11-plum</span></td> <td> <span class="color-x11-plum">color-x11-plum</span> </td></tr>
|
||
<tr><td> <span class="color-x11-royalblue">color-x11-royalblue</span></td> <td> <span class="color-x11-royalblue">color-x11-royalblue</span> </td></tr>
|
||
<tr><td> <span class="color-x11-sandybrown">color-x11-sandybrown</span></td> <td> <span class="color-x11-sandybrown">color-x11-sandybrown</span> </td></tr>
|
||
<tr><td> <span class="color-x11-sienna">color-x11-sienna</span></td> <td> <span class="color-x11-sienna">color-x11-sienna</span> </td></tr>
|
||
<tr><td> <span class="color-x11-violet">color-x11-violet</span></td> <td> <span class="color-x11-violet">color-x11-violet</span> </td></tr>
|
||
|
||
</tbody>
|
||
</table>
|
||
</details>
|
||
|
||
<h3>Font Effects</h3>
|
||
|
||
<p>A demo table that shows examples of giving effects to text, such as stretching and condensing. Each effect is accompanied with its class name. A more generalistic approach is to use <code>style="...;"</code> to decorate: <br/><span style="letter-spacing: 0.125ex;">some text expanded about 1/8th of an x</span> .</p>
|
||
|
||
<table class="fixed">
|
||
<tr><th>fonstretch-expanded</th> <td><span class="fontstretch-expanded">some text example</span></td>
|
||
</tr>
|
||
<tr><th>fonstretch-condensed</th> <td><span class="fontstretch-condensed">some text example</span></td>
|
||
</tr>
|
||
<tr><th>caps, small-caps</th> <td><span class="caps">Some text Example</span></td>
|
||
</tr>
|
||
<tr><th>all-small-caps</th> <td><span class="all-small-caps">Some text Example</span></td>
|
||
</tr>
|
||
<tr><th>text-shade</th> <td style="color: Canvas; background-color: CanvasText; " >
|
||
<span style="color-scheme: light; color: CanvasText; background-color: Canvas; " class="text-shade">some text example</span><br/>
|
||
<span style="color-scheme: dark; color: CanvasText; background-color: Canvas; " class="text-shade">some text example</span><br/>
|
||
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h3>Paragraph Breaking</h3>
|
||
|
||
<div class="print">
|
||
<pre class="demo"><div class="print"></pre>
|
||
|
||
<p>Paragraphs in this section are separated by a spacing area that imitates "double-enter" paragraph breaking used on print medium. The spacing is defined by the <tt>lh</tt> measurement for line-height in CSS4, and faked with <tt>ex</tt> before.</p>
|
||
|
||
<p>Second paragraph.</p>
|
||
|
||
<p>The third and final paragraph for such a paragraph-separation section.</p>
|
||
|
||
<pre class="demo"></div></pre>
|
||
</div>
|
||
|
||
<p>Some text. <span class="htab"></span>← A tab. The tab is done with an empty <code>span</code> marked <code>class="htab"</code>. A tab is around 4-chars wide, the only true value for a tab indent. 8-char tabs is <em>heresy</em>.</p>
|
||
|
||
<p>When one writes on a word processor for print, one tendency is to insert empty paragraphs between paragraphs (aka "double-tapping" the <kbd>Enter</kbd> key). Those would be preserved on the code when exported to another render via Rich Text editor or similar, and on AO3 they usually result on a paragraph with a non-breaking space inserted or in a paragraph with inernal line breaks.</p>
|
||
|
||
<p>For example, between this paragraph and the next there should be an inserted paragraph with only whitespace (exported from LO 7.x and from Google Docs):</p>
|
||
|
||
<p> </p>
|
||
|
||
<p>Then, between this paragraph and the next there will be a paragraph with only line breaks (exported from LO 6.x and MS Word 2013):</p>
|
||
|
||
<p><br/><br/></p>
|
||
|
||
<p>And right after this one there will be a paragraph that is <em>actually</em> empty (ie.: it should match <code>:empty</code>):</p>
|
||
|
||
<p></p>
|
||
|
||
<p>See? Blanks are not so "blank" after all.</p>
|
||
|
||
<p>The first and second test paragraphs should be matched with <code>:blank</code> starting CSS4, but until that's widely available they can be hidden by assigning them <code>class="blank"</code> or deleting them via regex. For example, between this paragraph and the next one this example replicates the empty paragraph with line breaks from MS Word export:</p>
|
||
|
||
<p class="blank"><br/><br/></p>
|
||
|
||
<p>With the <code>basic-improved</code> stylesheet, that inserted paragraph has been hidden away.</p>
|
||
|
||
|
||
</section>
|
||
<hr/>
|
||
|
||
<h2>Additional typography</h2>
|
||
<section id="additional-typography">
|
||
|
||
<p class="indent">A bit more of content, this time with indent of around 3 ems (3× the widest letter). The modifier is <code>class="indent"</code>.</p>
|
||
|
||
<p class="indent-percent">Another example of indent, but this time it's relative to the width of the surrounding box, at approximately 1/8th stop. The modifier is <code>class="indent-percent"</code>.</p>
|
||
|
||
<p>The CSS also decorates <kbd>keyboard input</kbd>, <samp>terminal output</samp>, <del>edit deletions</del> and <ins>edit insertions</ins>. The following special cases are also distinguished as per <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd">MDN recommendations</a>:</p>
|
||
|
||
<ul>
|
||
<li>Nesting <code>kbd</code> for keyboard combos.</li>
|
||
<li>Sample output including user input.</li>
|
||
</ul>
|
||
|
||
<p>The effect for nesting key combos is styled here: <br/>an (in)famous key combo is <kbd><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd></kbd>. </p>
|
||
|
||
<p>The effect for sample output including user input shows here:</p>
|
||
|
||
<pre class="output"><output><samp>
|
||
Choose an option: <kbd>Peace</kbd>
|
||
|
||
Peace was never an option.
|
||
</samp></output></pre>
|
||
|
||
<h3>Font families</h3>
|
||
|
||
<p>A paragraph demonstrating the use of the <code>font-serif</code> class. <span class="font-serif">This is styled with serif fonts and is configured to prefer libre fonts if they are available on the reader.</span></p>
|
||
|
||
<p>A paragraph demonstrating the use of the <code>font-sansserif</code> class. <span class="font-sansserif">This is styled with sans serif fonts and is configured to prefer libre fonts if they are available on the reader.</span></p>
|
||
|
||
<p>A paragraph demonstrating the use of the <code>font-cursive</code> class. <span class="font-cursive">This is styled with cursive fonts and is configured to prefer libre fonts if they are available on the reader.</span></p>
|
||
|
||
<p>A paragraph demonstrating the use of the <code>font-fantasy</code> class. <span class="font-fantasy">This is styled with fantasy fonts and is configured to prefer libre fonts if they are available on the reader.</span></p>
|
||
|
||
<h3>Paragraph alignment</h3>
|
||
|
||
<div style="width: 90%; margin: 0 auto; padding: auto 1em; border-left: 2px dotted gray; border-right: 2px dotted gray;">
|
||
|
||
<p>Examples of wrappers for CSS paragraph alignment.</p>
|
||
|
||
<p class="align-left">A paragraph aligned left with <code>"align-left"</code>. This is what one usually finds in the Americas.</p>
|
||
|
||
<p class="align-center">A paragraph aligned center with <code>"align-center"</code>. <br/>Draws attention in a tidy manner. <br/>Maybe useful for tables and poetry, too? <br/>Alas poor Yorrick, this doesn't rhyme.</p>
|
||
|
||
<p class="align-right">A paragraph aligned right with <code>"align-right"</code>. Useful for math in tables or lists. Maybe uuuuh, for signatures too? <br/>– The Author, © 2024.</p>
|
||
|
||
<p class="align-justify">A paragraph aligned justified with <code>"align-justify"</code>. Justified alignment is awesome and <u>everyone</u> should use it, opinion unbiased I swear. it imitates the old times of newspapers and it even has "just" in the name because it is so righteous.</p>
|
||
|
||
</div>
|
||
|
||
<h3>Section rulers / breakers</h3>
|
||
|
||
<p class="linknote">Link / concat <code>styles/decoration.css</code> file to enable.</p>
|
||
|
||
<p>Examples of section breakers: </p>
|
||
|
||
<p><code>"third"</code> + <code>"dashed"</code></p>
|
||
<hr class="third dashed" />
|
||
|
||
<p><code>"twothirds"</code> + <code>"double"</code></p>
|
||
<hr class="twothirds double" />
|
||
|
||
<p><code>"dashed"</code> + <code>"with-marker"</code></p>
|
||
<hr class="dashed with-marker" />
|
||
|
||
<p><code>"with-marker"</code> setting a custom marker "<code>@</code>"</p>
|
||
<style>
|
||
#workskin hr.marker1::after { content: '@'; font-weight: bold; }
|
||
</style>
|
||
<hr class="wavy half with-marker marker1" />
|
||
|
||
<p>To set up a custom marker you have to do it in the HTML if AO3 allows it, or import and extend a work style otherwise. The style rule for te above marker is as follows:</p>
|
||
|
||
<pre>
|
||
<style>
|
||
#workskin hr.marker1::after { content: '@'; font-weight: bold; }
|
||
</style>
|
||
</pre>
|
||
|
||
</section>
|
||
<hr/>
|
||
|
||
<section id="interwiki">
|
||
<h2>Interwiki</h2>
|
||
|
||
<p class="linknote">Link / concat <code>styles/interwiki.css</code> file to enable.</p>
|
||
|
||
<p>This work skin automatically decorates links that reference select domains to better identify them, emulating the "interwiki" practice, and also provides a <code>class="interwiki"</code> shortcut to explicitly enable the styling (and a <code>class="no-interwiki"</code> shortcut to disable).</p>
|
||
|
||
<p>Normal link: <a class="reflink" href="https://www.example.com/">link</a>.</p>
|
||
|
||
<p>Examples of automatically decorated links:</p>
|
||
|
||
<p>Link to Wikipedia: <a href="https://en.wikipedia.org/wiki/HTML">link to "HTML"</a>. Links to Wiktionary and Wikiquote are also styled this way.</p>
|
||
|
||
<p>Link to AO3: <a href="https://archiveofourown.org/users/VeniaSilente">link to the author's profile</a>.</p>
|
||
|
||
<p>Links to author sites: <a href="https://veniasilente.user.tropi.us/dw/">user site</a>, <a href="https://suoceverse.tropi.us/dw/">Suocéverse Wiki</a> .</p>
|
||
|
||
<p>Anchor (internal) links: <a class="reflink" href="#anchor">to #anchor</a>.</p>
|
||
|
||
<p>To disable auto-decorating just add the <tt>no-interwiki</tt> class, for example: <a class="no-interwiki" href="https://en.wikipedia.org/wiki/Nothing">non-decorated link to Nothing</a>.</p>
|
||
|
||
</section>
|
||
<hr/>
|
||
<section id="complex-formatting">
|
||
<h3>Complex Formatting</h3>
|
||
|
||
<p>The <code>basic-improved</code> stylesheet adds a few decorations to tables to make them more legible:</p>
|
||
|
||
<ul>
|
||
<li>Tables are centered and set to a viable minimum size by default.</li>
|
||
<li>Tables are set up with <code>table-layout: fixed</code> by default.</li>
|
||
<li>TH cells are decorated distinctively by default.</li>
|
||
<li>A table's first row, if having the class <code>"colid"</code>, is decorated distinctively by default.</li>
|
||
<li>A table's first column, if having the class <code>"rowid"</code>, is decorated distinctively by default.</li>
|
||
</ul>
|
||
|
||
<p>Example table:</p>
|
||
|
||
<table class="none" >
|
||
<caption>Example Table</caption>
|
||
<colgroup><col class="rowid" /><col/>
|
||
</colgroup>
|
||
<tbody>
|
||
<tr class="colid"><th scope="col">-</th> <th scope="col"><span>C2</span></th> <th scope="col">C3</th> <th>C4</th></tr>
|
||
<tr><th scope="row"><span>R2</span></th> <td><span>2,2</span></td> <td>2,3</td> <td><span>2,4</span></td></tr>
|
||
<tr><th scope="row">R3</th> <td>3,2</td> <td>3,3</td> <td>3,4</td></tr>
|
||
<tr><th scope="row">R4</th> <td><span>4,2</span></td> <td>4,3</td> <td><span>4,4</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<p>The following example decorates a table with <code>class="zebra"</code> for legibility. Two select cells are also "un-decorated" with <code>class="unzebra"</code> as an example.</p>
|
||
|
||
<table class="zebra" >
|
||
<tbody>
|
||
<tr><th>-</th> <th><span>C2</span></th> <th>C3</th> <th>C4</th></tr>
|
||
<tr><th>R2</th> <td><span>2,2</span></td> <td>2,3</td> <td><span>2,4</span></td></tr>
|
||
<tr><th>R3</th> <td class="unzebra">3,2</td> <td>3,3</td> <td>3,4</td></tr>
|
||
<tr><th>R4</th> <td><span>4,2</span></td> <td class="unzebra">4,3</td> <td><span>4,4</span></td></tr>
|
||
<tr><th>R5</th> <td>5,2</td> <td>5,3</td> <td>5,4</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
|
||
</section>
|
||
|
||
<section id="the_end">
|
||
<p class="ending">The End.</p>
|
||
</section>
|
||
<!-- END work -->
|
||
|
||
<div class="notes module"><h3 class="heading">After Notes</h3><blockquote>
|
||
After Notes
|
||
</blockquote>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|
||
|