ao3-styles

A few style templates and models I'm using for Work Skins in my AO3 profile. They are built on top of the site's default "Basic" style.

Styles here cover primarily three aspects:

• Supplementing styles (eg.: cursive font) and typographical effects (indentation, small-caps, etc).
• 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, 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 on ways to fix this issue.

Installation

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. 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.

AO3's parser will automatically prepend each style with the prerequisite #workskin element.

Usage

Decorate the elements of the chapter's HTML with the styles as needed. The official AO3 FAQ on Work Skins covers the overall procedure.

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 important class names that are defined:

• 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.
• newspaper for elements with style.
• newsreel for elements with style.
• font-{fallback}: styles general font fallbacks (eg.: "sans-serif") preferring Libre fonts where available. See [./Fonts.md] for more information.
• metric-{font}: styles text with Libre fonts metric-compatible to proprietary fonts.
• reflink: styles links so they are distinguishable when they point to select targets such as Wikipedia.

Extensions

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). 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

Creative Commons BY-NC-SA 4.0. See [LICENSE] for details.