ao3-styles/README.md

# ao3-styles

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:

 * 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](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 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](https://archiveofourown.org/faq/tutorial-creating-a-work-skin?language_id=en) 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 <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.
* ``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.