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