veniasilente/ao3-styles
1
0
Fork 0
Code Issues Pull requests Releases Activity

Update 2025-05: baseline styles and documentation.

Browse source
This commit is contained in:
veniasilente 2025-05-12 15:28:48 -04:00
parent cf7e182c5f
commit 67c364b980
3 changed files with 731 additions and 264 deletions

30
README.md
View file

@ -1,6 +1,6 @@
# ao3-styles
A few style templates and models I'm using for Work Styles in my AO3 profile. They are built on top of the site's default "Basic" style.
A few style templates and models I'm using for [Work Skins](https://archiveofourown.org/admin_posts/1370) in my AO3 profile. They are built on top of the site's default "Basic" style.
Styles here cover primarily three aspects:
@ -8,14 +8,16 @@ Styles here cover primarily three aspects:
* Prefering Libre / free resources (eg.: Liberation fonts before Microsoft's fonts).
* Adding styles that emphasize a 1/3rd or 2/3rd column design (tables, floatboxes, etc).
There is a lot of repetition and granularity in the templates, not beause of themselves but because AO3 (as of this last push) does *not* support ``<tag style="...">`` or [Data Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/data-*), thus personalizing style in AO3 requires a level of CSS involvement and granularity not too dissimilar to that of CSS frameworks like Tailwind. As of 2025-05 [I've already officiated AO3](https://fandom.ink/@VeniaSilente/114492965701227802) on ways to fix this issue.
## Installation
Create a new CSS file and ``cat`` or copy over the styles from the files you want.
Create a new CSS file and concat or copy over the styles from the files you want.
Copy the resulting file into a named Work Skin.
Copy the resulting file into a named Work Skin. Adjust as needed. Take note that the AO3 parser might arbitrarily remove some elements, according to what support for CSS is like in a given year and month.
Adjust as needed.
AO3's parser will automatically prepend each style with the prerequisite ``#workskin`` element.
## Usage
@ -24,14 +26,13 @@ Decorate the elements of the chapter's HTML with the styles as needed. The [offi
## Contents
* [ao3-sitestyle-basicimproved.css] — General layout and typography styles used by default in my stories.
* [ao3-sitestyle-resets.css] — Construction to reset some formatting options, similar to eg.: Normalize.css.
Some impirtant class names that are defined:
Some important class names that are defined:
* ``print``: Applied to a ``div``, will format its children ``p`` with spacing between paragraphs.
* ``print``: Applied to a ``div``, will format its children ``p`` with spacing between paragraphs, similar to a print medium.
* ``flashback`` for flashback sections, has left indent and wavy left border.
* ``epistolary`` for IU documents, has side margin and straight side borders.
* ``REDACTED`` for spans of lines and sections that are redacted over.
* ``EVIL`` for spans of red-speak as it's used in WAAPT.
* ``newspaper`` for <hX> elements with style.
* ``newsreel`` for <hX> elements with style.
* ``font-{fallback}``: styles general font fallbacks (eg.: "sans-serif") preferring Libre fonts where available. See [./Fonts.md] for more information.
@ -42,11 +43,22 @@ Some impirtant class names that are defined:
Each file in ``styles/`` contains a selection of styles that can be added together to realize various effects. These effects include:
* ``color-x11.css``: gives class name to X11 / SVG colours. Not needed if colour is used sparingly. (background-colors is pending)
* ``color-x11.css``: gives class name to X11 / SVG colours. Not needed if colour is used sparingly. (background-colors is pending). Deprecable if AO3 allows style/data-attr.
* ``dl-sidenote.css``: implements paragraph-level footnotes by styling definition lists (``<dl>``).
* ``ruby.css``: Ruby presentation fallback, obsolete since late 2023.
* ``terminal.css``: styles content as if it were computer terminal output.
* ``waapt.css``: Presentation styles inherited from my time in WAAPT, including EVIL text and Spectrumized text.
## Deprecation
As of last edit of this document, the following files and features are deprecated:
* ``ruby.css``: AO3 added native support for Ruby, making a ``span.ruby`` fallback unnecessary.
The following files or features would (hopefully) become deprecated as AO3's CSS and HTML support advances, in particular if they add support for ``style`` or ``data-*`` attributes:
* ``color-x11.css``: All the per-``<named-color>`` classes are removed, with only the ``data-color`` and ``data-bgcolor`` attribute-aware classes remaining.
* ``zlayout.css``: Exploded graularity of the ``z-index`` property. Only ``with-z`` would remain.
## License

552
ao3-sitestyle-basicimproved.css
View file

@ -2,38 +2,161 @@
* Basic Improved
* Inherits from "Basic Formatting"
*
* Revision 3
* 2024-02-29
* Revision 4
* 2025-05-11
*
* */
#workskin span.htab {
/*
* Styles of the AO3 work UI
* */
.preface { }
h2.title.heading { }
h3.byline.heading { }
/*
* Before Notes and After Notes
* */
div.notes.module > blockquote:only-child {
border: 2px dotted #ccc;
}
/*
* Element resets
* */
#workskin {
font-size: 100%;
line-height: 1.2em;
--var-test: 1;
}
sub, sup {
line-height: 0;
position: relative;
}
blockquote {
margin: 0 2em;
border-left: 0.5ch solid gray;
}
table {
table-layout: fixed;
margin: 0 auto;
min-width: 40%;
border-collapse: collapse;
border: 2px solid gray;
}
table > tbody > tr > th {
border-collapse: separate;
text-align: center;
}
hr {
box-sizing: content-box;
color: gray;
}
abbr[title] {
text-decoration: underline dotted;
}
details {
display: block;
}
[hidden] {
display: none;
}
/*
* visual marking for heading sections
* */
h1, h2, h3, h4 {
position: relative;
}
h1:hover::before,
h2:hover::before,
h3:hover::before,
h4:hover::before
{
position: absolute;
content: '¶';
left: -1ch;
}
/*
* General Styles
* */
.with-color-scheme {
color-scheme: light dark;
/* when using this class, define 'color' and 'background-color' in the <style> */
}
.with-light-scheme {
color-scheme: light;
}
.with-dark-scheme {
color-scheme: dark;
}
span.htab {
display: inline-block;
width: 4ex;
width: 4ch;
}
#workskin span.vtab {
span.htab8 {
display: inline-block;
height: 4ex;
width: 8ch;
}
#workskin p.print {
white-space: pre-line;
span.htab-percent {
display: inline-block;
width: 12.5%;
}
#workskin div.print p {
white-space: pre-line;
span.vtab {
display: inline-block;
height: 4ch;
}
#workskin .indent {
/* hide empty paragraphs, usually from double-generation */
/* CSS 4 */
p:blank, p:-moz-only-whitespace {
display: none;
}
p.blank {
display: none;
}
p.print {
}
div.print p + p {
margin-top: 3ex;
margin-top: 2lh; /* not in FF ESR yet */
}
.indent {
text-indent: 3em;
}
#workskin .indent-percent {
.indent-percent {
text-indent: 12%;
}
#workskin .book {
/* adds a book-like margin */
.book {
margin: 0 auto;
text-indent: 3em;
}
@ -50,8 +173,7 @@
* Caladea from: https://fontlibrary.org/en/font/caladea
* */
#workskin .font-serif {
font-family: 'Gentium Plus', 'Gentium Basic', 'Libra Serif', 'Libra Serif Modern', 'Liberation Serif', 'Nimbus Roman', 'FreeSerif', 'DejaVu Serif', 'Caladea', 'Cambria', 'Tinos', 'Constantia', 'Palatino', 'Times New Roman', 'Georgia'
, serif;
font-family: 'Gentium Plus', 'Gentium Basic', 'Libra Serif', 'Libra Serif Modern', 'Liberation Serif', 'Nimbus Roman', 'FreeSerif', 'Charis', 'DejaVu Serif', 'Caladea', 'Cambria', 'Tinos', 'Constantia', 'Palatino', 'Times New Roman', 'Georgia' , serif;
}
/*
@ -59,14 +181,17 @@
*
* Due to AO3 limitations, these fonts must be installed user-side.
*
* Extra fonts in stack:
* Isabella from: https://fontlibrary.org/en/font/isabella-sans
* Metropolitano from: https://fontlibrary.org/en/font/metropolitano
* Gidole from: https://fontlibrary.org/en/font/gidole-regular
* Caladea from: https://fontlibrary.org/en/font/carlito
* Lucida Grande is the default font on AO3
* GNU Unifont, Lucida Grande: used by AO3 itself
* Carlito from: https://fontlibrary.org/en/font/carlito / ChromeOS
* */
#workskin .font-sansserif {
font-family: 'Isabella Sans', 'Metropolitano', 'Gidole', 'Open Sans', 'Nimbus Sans', 'Liberation Sans', 'Libra Sans', 'DejaVu Sans', 'Charis', 'Lucida Grande', 'Carlito', 'Calibri', 'Arimo', 'Verdana', 'Helvetica', 'Arial'
font-family: 'Isabella Sans', 'Metropolitano', 'Open Sans', 'Liberation Sans', 'Nimbus Sans', 'Libra Sans', 'Andika', 'DejaVu Sans', 'Gidole',
'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', 'Carlito',
'Arimo', 'Calibri', 'Verdana', 'Helvetica', 'Arial'
, sans-serif;
}
@ -77,10 +202,11 @@
*
* Iosevka from: https://typeof.net/Iosevka/ / Debian package fonts-iosevka
* Monoid from: https://github.com/larsenwork/monoid
* Source Code Pro from: https://github.com/adobe-fonts/source-code-pro
* Inconsolata from: Debian package fonts-inconsolata
* */
#workskin .font-monospace {
font-family: 'Iosevka', 'Monoid', 'Liberation Mono', 'Inconsolata', 'Source Code Pro', 'Consolas', 'Courier Prime', 'Courier New', 'Courier'
font-family: 'Iosevka', 'Monoid', 'Liberation Mono', 'Source Code Pro', 'Inconsolata', 'Consolas', 'Courier Prime', 'Courier New', 'Courier'
, monospace;
}
@ -90,12 +216,12 @@
* Due to AO3 limitations, these fonts must be installed user-side.
*
* Allura from: https://www.1001fonts.com/allura-font.html
* Sofia from: http://www.latinotype.com/
* Feltpen from: https://fontlibrary.org/en/font/feltpen
* Sofia from: http://www.latinotype.com/
*
* */
#workskin .font-cursive {
font-family: 'Allura', 'Sofia Regular', 'Cursive', 'Feltpen Regular'
font-family: 'Allura', 'Feltpen Regular', 'Leopold Medium', 'Sofia Regular', 'Cursive'
, cursive;
}
@ -109,37 +235,41 @@
font-family: fantasy;
}
/*
* Modified to prefer libre/free distributable fonts.
*
* Due to AO3 limitations, these fonts must be installed user-side.
*
* */
#workskin .font-system-ui {
font-family: system-ui;
}
/* Metric compatibility; Prefers libre fonts */
#workskin .metric-arial {
.metric-arial {
font-family: 'Liberation Sans', 'Albany', 'Arimo', 'Arial', sans-serif;
}
#workskin .metric-courier {
.metric-courier {
font-family: 'Nimbus Mono', 'Liberation Mono', 'Cumberland', 'TeX Gyre Cursor', 'Cousine', 'Courier New', monospace;
}
#workskin .metric-helvetica {
.metric-helvetica {
font-family: 'Nimbus Sans', 'FreeSans', 'Helvetica', sans-serif;
}
#workskin .metric-times {
.metric-times {
font-family: 'TeX Gyre Termes', 'Nimbus Roman', 'Tinos', 'Times', serif;
}
#workskin .metric-cambria {
.metric-cambria {
font-family: 'Caladea', 'Cambria', sans-serif;
}
#workskin .metric-calibri {
.metric-calibri {
font-family: 'Carlito', 'Calibri', serif;
}
/*
* Typographical Styles
* Apply to eg.: <p class="name">, <span class="name">, etc.
@ -147,37 +277,43 @@
* The section order is: size, color, weight, form variant, stretch, etc.
* */
.with-font-size[data-fsz] {
font-size: attr(data-fsz);
}
/* relative sizes */
#workskin .font-big {
font-size: 120%;
.font-big {
font-size: 125%;
}
#workskin .font-x-big {
font-size: 155%;
.font-x-big {
font-size: 150%;
}
#workskin .font-little {
.font-little {
font-size: 85%;
}
#workskin .font-x-little {
font-size: 65%;
.font-x-little {
font-size: 70%;
}
/* absolute sizes */
#workskin .font-large {
.font-large {
font-size: large;
}
#workskin .font-x-large {
.font-x-large {
font-size: x-large;
}
#workskin .font-small {
.font-small {
font-size: small;
}
#workskin .font-x-small {
.font-x-small {
font-size: x-small;
}
/* relative keywords */
#workskin .font-larger {
.font-larger {
font-size: larger;
}
#workskin .font-smaller {
.font-smaller {
font-size: smaller;
}
@ -188,318 +324,224 @@
*
* Official listing from:
* * https://en.wikipedia.org/wiki/X11_color_names
* * https://en.wikipedia.org/wiki/X11_color_names
* */
#workskin .color-red {
.with-color[data-color] {
color: attr(data-color);
}
.with-color[data-bg-color] {
background-color: attr(data-bg-color);
}
.color-red {
color: red;
}
#workskin .color-orange {
.color-orange {
color: orange;
}
#workskin .color-yellow {
.color-yellow {
color: yellow;
}
#workskin .color-green {
.color-green {
color: green;
}
#workskin .color-blue {
.color-blue {
color: blue;
}
#workskin .color-purple {
.color-purple {
color: purple;
}
/* intentionally different */
#workskin .color-white {
color: #eee;
}
/* intentionally different */
#workskin .color-black {
color: #111;
}
#workskin .color-pink {
.color-pink {
color: pink;
}
#workskin .color-teal {
.color-teal {
color: #008282;
}
#workskin .fontweight-normal {
/* intentionally different */
.color-white {
color: #eee;
}
/* intentionally different */
.color-black {
color: #111;
}
.fontweight-normal {
font-weight: normal;
}
#workskin .fontweight-lighter {
.fontweight-lighter {
font-weight: lighter;
}
#workskin .fontweight-bolder {
.fontweight-bolder {
font-weight: bolder;
}
#workskin .fontstretch-normal {
.with-fontstretch[data-fstr] {
font-stretch: attr(data-fstr);
}
.fontstretch-normal {
font-stretch: normal;
}
#workskin .fontstretch-condensed {
.fontstretch-condensed {
font-stretch: condensed;
}
#workskin .fontstretch-expanded {
.fontstretch-expanded {
font-stretch: expanded;
}
/*
* Decorates nested <kbd> as keyboard combos, and <kbd>s denoting inputs inside <samp> output samples. Recommended by MDN.
* */
kbd:not(kbd *):not(pre *) > kbd,
.txt-kbd > kbd {
background-color: #eef;
padding: 2px;
border: 1px solid #444;
border-radius: 4px;
}
/* inherited */
samp:not(samp *):not(pre *),
.txt-samp {
background-color: rgba(94, 90, 128, 0.36);
}
#workskin .caps {
samp > kbd {
color: #040f04;
text-decoration: underline;
}
ins:not(ins *), .txt-ins {
background-color: rgba(22, 188, 22, 0.32);
margin: auto 0.22ex;
}
del:not(del *), .txt-del {
background-color: rgba(196, 20, 20, 0.32);
margin: auto 0.22ex;
}
/*
* Two forms of caps
* */
.caps, .small-caps {
font-variant-caps: small-caps;
}
#workskin .all-small-caps {
.all-small-caps {
font-variant-caps: all-small-caps;
}
#workskin .spoiler {
background: #333;
color: #333;
.text-shade {
text-shadow: 1px 1px 1px gray;
}
/* Prefers libre fonts */
#workskin .dropcap {
.dropcap {
font-family: 'Liberation Serif', 'DejaVu Serif', 'Bitstream Serif', Georgia, serif;
font-size: 3em;
}
/*
* Narrative layout sections
* Narrative layout / decoration sections
* */
/* Prefers libre fonts */
#workskin .flashback {
.flashback {
font-family: 'Lato', 'Nimbus', 'Palatino', serif;
border-left: 8pt wavy gray;
padding-left: 12%;
/* disable (comment) the following for print versions */
opacity: 75%;
padding-left: 2ch;
opacity: 80%;
}
#workskin .epistolary {
.epistolary {
font-family: 'Book Antiqua', serif;
margin-left: 2ex;
margin-right: 2ex;
}
.spoiler {
background: #333;
color: #333;
}
/* More "TLA"-like version of spoiler */
#workskin .REDACTED {
background: #333;
color: #333;
font-family: monospace;
margin: auto 1em;
}
/* WAAPT's version of EVIL */
#workskin .EVIL {
.REDACTED {
display: inline-block;
padding: auto 2em;
padding: auto 0.5ch;
background-color: #333;
color: red;
color: #333;
font-family: monospace;
}
/*
* heading sections
* apply as eg.: <h3 class="class1 class2">
* */
#workskin h3.title.shadow1 {
text-shadow: 2pt -3pt gray;
}
#workskin h3.title.shadow2 {
text-shadow: -2pt -2pt #bee;
}
#workskin h3.title.newspaper {
/* pending */
}
/*
* Text and Element Layout, Ordering
* */
#workskin .invisible {
.invisible {
visibility: hidden;
}
/* title and byline shadows */
h3.title.shadow1, h4.title.shadow1 {
text-shadow: 2pt -3pt gray;
}
h3.title.shadow2, h4.title.shadow2 {
text-shadow: -2pt -2pt #bee;
}
h3.title.newspaper, h4.title.newspaper {
/* pending */
}
.centered {
margin: 0 auto;
min-width: 20vw;
}
/* sometimes this is needed explicitly */
#workskin .align-left {
.align-left {
text-align: left;
}
/* inherited */
#workskin .align-right {
.align-right {
text-align: right;
}
/* inherited */
#workskin .align-center {
.align-center {
text-align: center;
}
/* inherited */
#workskin .align-justify {
.align-justify {
text-align: justify;
}
#workskin .valign-top {
.align-top {
vertical-align: top;
}
#workskin .valign-middle {
.align-middle {
vertical-align: middle;
}
#workskin .valign-bottom {
.align-bottom {
vertical-align: bottom;
}
/*
* Line and Border markers
* */
#workskin .border {
border: 2px solid;
}
#workskin .border-dotted {
border: 2px dotted;
}
#workskin .border-dashed {
border: 2px dashed;
}
#workskin table.border1 {
border: 2px solid #222;
outline: 1px solid #222;
}
#workskin table.border2 {
border: 4px outset #442;
outline: 1px solid #442;
}
#workskin hr.third {
width: 33%;
margin: auto;
}
#workskin hr.half {
width: 50%;
margin: auto;
}
#workskin hr.twothirds {
width: 66%;
margin: auto;
}
/* inherited with name "full" rather than eg.: "auto" */
#workskin hr.full {
width: auto;
margin: auto;
}
#workskin hr.solid {
border-style: solid;
}
#workskin hr.dashed {
border-style: dashed;
}
#workskin hr.double {
border-style: double;
.initial {
}
/*
* layout for boxes.
* Boxes are floated to be either the leftmost 1/3rd of content, or the rightmost 1/3rd of content, with an inner padding.
*
* */
#workskin .box-clear {
float: clear;
}
#workskin .box-left {
float: left;
max-width: 33%;
margin-right: 8pt;
}
#workskin .box-right {
float: right;
max-width: 33%;
margin-left: 8pt;
}
#workskin .box-left.box-border {
border-right: 4pt dotted #333;
}
#workskin .box-right.box-border {
border-left: 4pt dotted #333;
}
#workskin table tr th.cell-important1 {
background-color: #ddd;
}
/* For "visible" tabs */
#workskin span.tab {
display: inline-block;
width: 4em;
}
#workskin .Newsreel {
}
#workskin .initial {
}
#workskin .line-decoration-solid {
text-decoration-style: solid;
}
#workskin .line-decoration-dotted {
text-decoration-style: dotted;
}
#workskin .line-decoration-double {
text-decoration-style: double;
}
#workskin .line-decoration-wavy {
text-decoration-style: wavy;
}
#workskin a.reflink[href*="wikipedia.org/"] {
text-decoration-style: double;
}
#workskin a.reflink[href*="veniasilente.user.tropi.us/"] {
color: forestgreen;
}
#workskin a.reflink[href*="suoceverse.tropi.us/"] {
color: green;
}

413
ao3-sitestyle-basicimproved.html Normal file
View file

@ -0,0 +1,413 @@
<!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 &lt;style&gt; <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: &nbsp;</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: &nbsp;</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>&lt;blink&gt;</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>&lt;br/&gt;</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">&lt;div class="print"&gt;</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">&lt;/div&gt;</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> &nbsp; </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>
&lt;style>
#workskin hr.marker1::after { content: '@'; font-weight: bold; }
&lt;/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>