How to make the AO3 more readable!

[eleanorjane]

For ages, my only niggle with reading fic on the AO3 has been the fact that the reading area is too wide (94% of the window area, in fact), so to approximate a reasonable line length, I have to make my browser windows irritatingly narrow, which mucks up everything else.

No longer is this a problem! Here's how to fix it.

1. Sign into AO3 and go to the Skins page.

2. From the Skins page hit the "Create New Skin" link at the top right.

3. On the next screen, make sure 'Site Skin' is selected in the 'type' dropdown; enter a title and description for the skin and in the CSS box, paste the following:

#chapters {
margin-right: 12.5%;
margin-left: 12.5%;
}

and then change the values to a width you prefer. You can change the values to anything you like, based on your preferences for line length and your browser window width - 12.5% is just the value I liked after a bit of trial and error. (For comparison's sake, the default is 3%.)

That's it! That's all you have to change - because of the nature of stylesheets, and the way the AO3 is set up, any formatting that you don't explicitly overwrite in your skin is inherited from the default skin.

4. Hit the "Create" button. You can tick the "apply to make this a public skin" button if you like; if you do, I recommend that you reference the width you chose in the description field, so that other users know what they're getting.

I've actually applied for my skin to be a public skin, but it hasn't been approved or denied yet, so I figured I'd make this post in the meantime. (If you're coming to this later, the skin is called Narrow Reading - ETA, it's now been approved.)

Enjoy!

Comments

[senmut]

Funny, I actually like the width. But then AO3's ease on my near=sighted eyes was a huge clinching factor for me.

[eleanorjane]

That's what I love about the skins feature! Me, I find it much harder to read stuff with long lines because my eye gets distracted and wanders off halfway through the line. WTF, eyes.

I do love just about everything else about the interface, though. :)

[branchandroot]

Thank you for reminding me of the Skins! *wry* Of course, now I've spend several hours poking at one and am reduced to hammering on AO3 in incoherent rage because :before and :after are not allowed. But, hey, all in a day's css.

[eleanorjane]

Yeah, I deliberately steered away from even thinking about anything too complex, for a similar reason.

(What were you trying to do?)

[branchandroot]

*rueful* Ever since beta started, I've wanted to separate the tags into their categories (warnings, relationships, characters, freeform), so they're easier for me to read. I did eventually figure out how to do this with some slightly complicated sibling element commands and float! But I had to sleep on it to come up with that; initially I was going to settle for just putting a /separator/ between the categories and I couldn't even do that. There was much argh.

In the end, I wound up putting anything that needs a :before or :after in Stylish and submitting a suggestion. If those were just allowed, I might be willing to make this a public skin, but to put labels on each tag section I really need :before.

[eleanorjane]

Oh my god that would be amazingly awesome and useful. Even if they don't allow the selectors, would you be willing to share the code so I can whack it in my own skin? :)

[branchandroot]

Sure thing! Here's what separates the categories:

ul.tags {
padding-top: .5em;
}

ul.tags li.warnings,
ul.tags li.relationships,
ul.tags li.characters,
ul.tags li.freeforms {
float: left !important;
}

li.warnings + li.relationships,
li.relationships + li.characters,
li.characters + li.freeforms,
li.warnings + li.characters,
li.warnings + li.freeforms,
li.relationships + li.freeforms {
clear: left;
}

And here's the formatting that makes it all one line high and sets the bolding properly

ul.tags li {
padding-left: .5em;
line-height: 1 !important;
font-weight: bold !important;
}

a.tags,
.tags a {
line-height: 1;
}

/* to undo the weight above */
ul.tags a.tag {
font-weight: normal !important;
}

ul.tags li.warnings a.tag {
font-weight: bold !important;
}

And then you have to clear what's under it; I also made the summary just a titch bigger.

blockquote.summary {
font-size: 1.10em !important;
clear: both;
padding-top: .25em !important;
}

dl.stats {
background: none !important;
clear: both;
}

And then if you want to label each of those categories, you whack this into Stylish or user.css or whatever:

ul.tags li.warnings:first-child:before { content: "Archive Warnings: "; }
li.warnings + li.relationships:before { content: "Relationships: "; }
li.relationships + li.characters:before { content: "Characters: "; }
li.characters + li.freeforms:before { content: "Freeform: "; }
li.warnings + li.characters:before { content: "Characters: "; }
li.warnings + li.freeforms:before { content: "Freeform: "; }
li.relationships + li.freeforms:before { content: "Freeform: "; }

[eleanorjane]

Brilliant - thankyou so much :)