Chapter Text
The guide I've been following is the British Dyslexia Association Style Guide.
The guide featured suggestions such as:
- Use a Sans Serif font
- a fairly big font size
- larger space between words
- larger space between letters
- left align for paragraphs, never justify
- the paragraphs shouldn't be too wide
- the paragraphs should be well separated
- do not use optical white for background but a light grey
- avoid underlining and italics and use bold instead
- headings should be bigger and bolder
All of which I tried to follow with this skin. Most of which are used in the workskin for this particular work, so it might be easier to read the instructions.
If you wish to change any of these things I have a guide on chapter 2 on how to personalize this skin, explained in a way that's easy to follow for people who know nothing about coding or CSS.
Sample images
Click on the images to see them bigger
Here an example of the blurb and the tags. I reduced the summary width as well as the text in everything else.
Example of a title fic.
(of course, fic by Astolat). The text column is not too wide as to span for the entirety of the screen.
Example of comments, I reduced the width here as well.
Examples on mobile:
Things about this skin:
- I'm using Trebuchet MS as a font, 18px as a font size.
- I've visually separated tags by using a border (I explain in the second chapter how to remove it if you don't want the tags like these)
- it has a mobile fix, so that a lot of weird things that happen on mobile look better. The font is also bigger on there.
- Most of text has a smaller width now. Not only the fanfic text, but also comments and fanfic summaries
- buttons are lighter unless you hover them with the mouse
- it overhauls all the italics. So in fics where you see Oh. as emphasis, you'll have it Oh. instead.
- experimentally (please let me know if they make it illegible) I have used colored underline like this:
- Make sure you're logged in your account on AO3
- go to my dashboard and then click on Skins (in the menu on the right)
- click on the button create new skin
- Make sure Type is Site Skin
- Add a Title to your skin, making sure you write that it's the mobile fix! Those titles should be unique across the site so, something like 'YOURUSERNAME-mobile-fix' should do fine. Remember it!
- Select and Copy ALL the code you'll find in here
- Paste the code in the field 'CSS'
- Click on Advanced 'Show'
- You know the part where there's "Media" and a lot of options? Scroll down the list until you find only screen and (max-width: 42em), it should be one of the last in the list and check it!
- click SUBMIT
- Make sure you're logged in your account on AO3
- go to my dashboard and then click on Skins (in the menu on the right)
- click on the button create new skin, yes, a second one.
- Make sure Type is Site Skin
- Add a Title to your skin. Those titles should be unique across the site so, something like 'YOURUSERNAME-dyslexia' should do fine.
- Select and Copy ALL the code you'll find in here
- Paste the code in the field 'CSS'
- Click on Advanced 'Show'
- There's a part where you have Parent Skins. Click on the button "Add parent skin". It should add a field called 'Parent #1' where you can type stuff.
- type the name of the mobile fix skin you used before 'YOURUSERNAME-mobile-fix' and select it.
- click SUBMIT
- click USE
- That you actually installed a second skin for the mobile fix following the steps I talked about earlier
- That you didn't misplace accidentally the two different codes for the mobile fix and the actual skin! They are two different codes and you might get them confused! (I did it tons of times myself!)
- That the mobile-fix skin is set as only screen and (max-width: 42em) in the Media Advanced option.
- That the mobile-fix skin is set as a parent in the actual dyslexia skin. They need to be linked!
- You just go in your preferences
- check "hide work skins" by default.
- click on Update.
There is a guide on how to customize a lot of stuff
In the second chapter you'll find explanation on how to change text/font/bold/tags and other stuff you might want to change to make your reading experience better. The guide is specifically written for people who have never coded anything and are not familiar with css.
There's a Dark Mode in the 3rd chapter!
In the third chapter you'll find preview and installation guide for dark mode! I know a lot of people were waiting for it!
Install the skin
Ok, this is a tiny bit longer than your usual 'install skin' tutorial, because it has a separate skin for mobile. But I wanted to make the best experience possible for reading on mobile as well and this is the simplest way to do it.
Don't worry if you mess it up at ANY point. You can go back to the default ao3 skin by going down to the bottom of the page and click on 'choose skin'.
This is the light mode, for Dark mode, go to chapter 3. I know I've said it like 5 times already, but it bears being repeated.
Mobile Fix
You'll need to do this first! Both Mobile and Actual Skins need to be installed even if you only browse via Mobile.
The actual skin
AND you should be grand.
Check on the mobile if it looks good! The menu shouldn't be all wonky but when you click on it it should be wide like this:
If you are having problems like these:
Suggestions
In chapter 2 of this fic there's a Guide on how to customize
It explains step by step in excruciating details how to customize stuff if you have no knowledge of coding and css! Stuff like font change, how to reduce/increase spacing, how to change colors, width of paragraphs, the border around the tags, and so on.
You'll find everything in chapter 2 of this "fic"
Install it while working on desktop
This guide is not that difficult, but copying and pasting code is definitely easier to do on a desktop computer than on mobile, I swear. Once it's set up it should work on mobile just fine.
Workskins
Ao3 allows writers to use workskins. Workskins are stylesheets that change the formatting of individual works, it is in the hand of said work's author and they are often used to create some quirky and fun things (look at this, I used a workskin to create a faux-fanfic header. Or look at this web article. )
They are great and fun, but might override the skin you are using for legibility.
So: I suggest turning them off.
To turn workskins off
On top of every fic there's a button "Show Creator's style" (or "Hide Creator Style") to toggle the workskins at any time by the way! You'll be able to switch it on right away without having to go to your preferences every time.