Dyslexia friendly Site Skin

A clean dyslexia skin for Ao3.
I made this following the British Dyslexia Association Style Guide and then tweaked with requests and ideas dyslexic readers brought forth.
There's a guide inside on how to further tweak everything from font to size to color so that you can customize it for your needs.
Dark mode available in chapter 3!

Notes:

So,
I'm not dyslexic. I'm just a designer who loves this website and would like people to have the best experience of it.
Which is why I'm posting it here before it's even completed, I need feedback from people who actually have dyslexia to shout at me what I'm doing wrong and tell me stuff like 'hey the tags like these are less readable than they usually are' or 'no, there's too much space between the letters'.
I know that there is not a one size fit it all for dyslexia and people will have preferences of fonts and colors and other stuff. In the second chapter you'll find a guide to change a lot of stuff about the skin even if you know nothing about css!
Also, go to chapter 3 for dark mode!

(See the end of the work for more notes.)

Chapter 1: Light Mode - Presentation and Installation guide

Summary:

This is the light mode, Dark Mode is in chapter 3. While the guide for customization is on chapter 2

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:

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.

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

The actual skin

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

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:

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!

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

You just go in your preferences
check "hide work skins" by default.
click on Update.

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.

Chapter 2: Detailed guide on how to change stuff in the skin even if you know nothing about CSS

Notes:

I Updated the code (links are all in the first chapter) and I made sure everything in the skin is full of comments and explanation on what is and what it does, so, for people with limited css understanding you can go and dive in and change stuff.
For people with no understanding whatsoever of css I will list here a few things you can change and explain how to change them! So, if you need to change the font because Trebuchet MS is terrible for you, if you need to make the font bigger, the space between words smaller etc etc you can scroll down.

(See the end of the chapter for more notes.)

Chapter Text

A strong suggestion:

Ao3 deletes code comments when you save a skin. So if you need to do modifications of any sort I strongly suggest you copy/paste the code somewhere (like google docs) and work on it. Then at the end you copy and paste it into ao3 as usual. Because otherwise all my explanations will be deleted.

So, if you have already installed the skin, I suggest going back to the original code, copy that one, modify it somewhere and copy it in place of the code you already installed. Not the smoothest riding, but unfortunately I can't do anything about the fact that Ao3 deletes comments.

A couple of things for css:

always remember the semicolon ; at the end of the line
Be careful not to delete the brackets I made { }
em as a size measurement changes A LOT by single digits. If you need to change sizes try decimals firsts and use the dot.

Contents of this page

How to change the font
How to change the text size
- And on mobile
- How to change the text size only in works (and not the rest of the interface)
How to change only the size of the fic tags on mobile
How to change the space between letters and words
How to change the space between lines of text
How to change the width of the paragraph
How to change the background color
How to change the text color
How to change the link color
How to remove the underline
How to have back the italics
How to remove the border around the tags
- and on mobile only

Also, consider giving a look at the comments because several things and changes get discussed there too! You might also find a solution to your problems in there.

How to change the font

There are two places where the font is set in this skin. They are both fairly at the beginning of the main skin (not the mobile one, changing it in the main skin it will carry in the mobile one too!) so this should be one of the first things you see, in both the Light Skin and the Dark Skin.

  /*
    -----------------TITLE FONT-----------------
  This is the font for the titles, not for the body of text. 
  If you want to change it remember to provide fallback fonts 
  (something like 'serif' or 'sans-serif', separated by a comma)
  */
  font-family: "Trebuchet MS", Calibri, sans-serif;
  border-bottom: none;
  font-weight: 700; 
}

And

    /*
  -----------------MAIN FONT-----------------
  This is the font for the entire body of text. If you need to change it please do it here
  Please also remember to provide fallback fonts 
  (something like 'serif' or 'sans-serif', separated by a comma)
  */
  font-family: "Trebuchet MS", Calibri, sans-serif; 
}

These two sections, the one called "Title Font" and "Main Font" set respectively the font for the titles and the font for basically everything else. You can have two different font for title and text or you can have the same one like I did.

It is slightly different in the light skin and the dark skin because I realized that Trebuchet MS didn't have enough differences with the bold if used on a dark background, so the line you'll see in the dark skin version will be something like this instead:

    font-family: Verdana, "Trebuchet MS", Calibri, sans-serif;

Fonts work like this: the browser will use the first font in the list (Trebuchet MS in the light skin, Verdana in the dark skin) if it's installed in your computer (or phone) if it doesn't find it it will use the second in the list (Calibri) and if even at that point it hasn't found any font installed in your device it will just use any sans serif font. I suggest to just add a font before the first one, so that your browser will always have a fallback available. All the fonts are separated by a comma and, this is very important, if the font has a name with multiple words (such as Times New Roman) you need to use the quotation marks.

This dyslexia design guide suggests these fonts to try out:

Arial, "Comic Sans", Verdana, Tahoma, "Century Gothic", "Open Sans"

It is important that you have said font installed on all the devices you use Ao3 on. You can definitely use the font Dyslexie or OpenDyslexic but make sure it's installed on your phone as well if you read on that. Or it won't simply show up (and will use the second one in the list instead). To install fonts on phones you'll need to google that because every phone is different (and some do not allow installing fonts).

So, an example of a line you could use:

font-family: Arial, "Trebuchet MS", Calibri, sans-serif;

Another thing! you might want to adjust later the letterspacing and the wordspacing. Since those change a lot depending on the font!

Remember to keep the semi-colon and the curly bracket

How to change the text size

This skin sets two different sizes. Once in the main skin (Dark Mode or Light Mode) and one in the Mobile Fix. (the Mobile fix is the same for both Light and Dark)

How to change it on Dark and Light on desktop

    /*
  -----------------TEXT SIZE-----------------
  This sets the default text size
  if you need to increase or decrease, please keep in mind that "em"
  as a measurement changes A LOT between numbers, so you might want to try
  decimals like 1.1em, 1.2em, 1.15em before going a number up (or down)
  */
  font-size: 1.05em; 
}

Find the part in the code (it's titled TEXT SIZE, just find it by using the search option that basically every text editor has. If you are using google docs use ctrl F (or cmd F if you are on Mac)

You just change the number on the line font-size etc etc

Try small increments, don't just change it to 2 right away because this unit of measure is HUGE.

So, an example of a line you could use:

font-size: 1.2em;

If you are having trouble with the em measurements you can try px. So something like font-size: 16px;

remember to keep the semi-colon and the curly bracket

How to change it on mobile (valid for both Light and Dark skins)

Go to the mobile fix code

  /*
  -----------------TEXT SIZE-----------------
  This is the size of the body of the font on mobile.
  please increase or decrease by decimals
  like 1.2em 1.1em or 1.5em
  */
  font-size: 1.3em; 
}

Find the part in the code (it's titled TEXT SIZE, it's at the beginning)

You just change the number on the line font-size etc etc

Try small increments or decrements, don't just change it to 2 right away because this unit of measure is HUGE.

So, an example of a line you could use to make it smaller::

font-size: 1.2em;

If you are having trouble with the em measurements you can try px. So something like font-size: 16px;

How to change the text size only in works (and not the rest of the interface)

This is easier! just add this code at the end of the main file (you can also add it to the mobile code if you want it differently in there):

  #workspace {
  font-size: 120%; 
}

Change the percentage to what you prefer, 90% to make it smaller, 110% to make it larger.

How to change only the size of the fic tags on mobile

Go to your mobile fix skin and add this code at the end:

a.tag { font-size: 80%; }

You can play around with the percentage to find a text size you like!

remember to keep the semi-colon and the curly bracket

How to change the space between letters and words

    /*
  -----------------LETTER SPACING-----------------
  This sets the spacing between letters

  if you need to increase or decrease, please keep in mind that "em"
  as a measurement changes A LOT between numbers, so you might want to try
  decimals like 0.025em, 0.03em, 0.035em before going a number up (or down)
  */
  letter-spacing: 0.02em; 
}

And

    /*
  -----------------WORD SPACING-----------------
  This sets the spacing between words

  if you need to increase or decrease, please keep in mind that "em"
  as a measurement changes A LOT between numbers, so you might want to try
  decimals like 0.22em, 0.25em, 0.3em before going a number up (or down)
  */
  word-spacing: 0.21em; 
}

(those measurements are different in the dark skin and light skin! what looks good on white doesn't read as well on dark, so the dark one has a bigger space between letters)

Very similar to how to change the font size, first find the two parts titled 'LETTER SPACING' and 'WORD SPACING' by using ctrl F in your text editor (or cmd F if you are on a Mac) and then change by A TINY BIT the values around. Em measurements will do A LOT in this case!
Modifying this will work on both desktop and mobile.

So, examples:

letter-spacing: 0.005em;

word-spacing: 0.25em;

remember to keep the semi-colon and the curly bracket

How to change the space between lines of text

      /*
  -----------------LINE HEIGHT-----------------
  This is the line height of the text.
    if you need to increase or decrease, please keep in mind that "em"
  as a measurement changes A LOT between numbers, so you might want to try
  decimals like 1.7em, 1.5em, 1.65em before going a number up (or down)
  */
  line-height: 1.8em; 
}

Very similar to how to change the letter and word spacing, first find the part titled 'LINE HEIGHT' by using ctrl F in your text editor (or cmd F if you are on a Mac) and then change by A TINY BIT the values around. Em measurements will do A LOT in this case!
Modifying this will work on both desktop and mobile.

So, example:

line-height: 1.65em;

remember to keep the semi-colon and the curly bracket

How to change the width of the paragraph

Paragraph width are different in the base skin and the mobile skin. In the mobile skin the width is 100% by default because otherwise the paragraphs would be too short. In the default skin the paragraph are 70% of the screen size and a max width of 45em.

To change it go to the base skin and search this part titled "PARAGRAPH WIDTH" (by searching it with ctrl+F or cmd+F on mac):

      /*
  -----------------PARAGRAPH WIDTH-----------------
  This sets the width of the reading paragraphs.
  It sets a percentage according to the width of the screen 
  (reduce or increase the percentage of width: 70%; to change this. remember the semicolon.)
  but it doesn't allow it to go over a certain amount of width, so that even HUGE screens
  will have a maximum width for the text.
  (reduce or increase this by changing the number on the max-width: 45em; remember the semicolon.)
  It is reset on the mobile skin to 100%
  */
  width: 70%;
  max-width: 45em; 
}

Now you can reduce or increase both values by a small amount or by a huge amount.

So, example:

    width: 60%;
  max-width: 40em; 
}

If you want to make it screen-wide and remove the feature alltogether just go with 100% on the width and remove the line about the max-width but be careful not to delete the bracket } or you'll break the skin!

The code for this case would be:

width: 100%; }

remember to keep the semi-colon and the curly bracket

instead, if you want to change it on mobile, the part you are looking for is this one:

      #workskin, .collection blockquote.userstuff {
  /*
  This resets the main page width to a decent size for mobile
  */
  width: 100% !important; 
}

Just make the percentage smaller in this case! :) Remember to keep the !important, the semicolon and the brackets!

How to change the background color

    /*
  -----------------BACKGROUND COLOR-----------------
  This sets the main background color
  Use a hex color picker to change this!
  */
  background-color: #f7f7f9;
  background: #f7f7f9; 
}

As always, use ctrl+F to find in the main skin code the part with the title 'background color'. You do not need to change the mobile skin for this. If you modify the main one the colors will carry on mobile as well.

You'll need to change both those lines (background-color and background) to change the background color.

CSS uses HEX color codes to identify colors. Those usually have 6 letters or numbers and a hashtag symbol before them. If you need a way to find the hex color of a color you want as a background you can just google 'color picker' and google will have it functional for you in the result (the same way it has a calculator) and it will provide you with the HEX code. Or Colorable is incredible. It will allow you to play around with text and background and give a vote on how much contrast is there, so if it's readable or not.

So, an example:

  background-color: #cededa;
background: #cededa; 
}

remember to keep the semi-colons and the curly bracket

How to change the text color

    /*
  -----------------TEXT COLOR-----------------
  This is the main text color for all the body of text
  Use a hex color picker to change this!
  */
  color: #373a3c; 
}

As always, use ctrl+F to find in the main skin code the part with the title 'text color'. You do not need to change the mobile skin for this. If you modify the main one the colors will carry on mobile as well.

CSS uses HEX color codes to identify colors. Those usually have 6 letters or numbers and a hashtag symbol before them. If you need a way to find the hex color of a color you want as a background you can just google 'color picker' and google will have it functional for you in the result (the same way it has a calculator) and it will provide you with the HEX code. Or Colorable is incredible. It will allow you to play around with text and background and give a vote on how much contrast is there, so if it's readable or not.

So, example:

color: #293330;

remember to keep the semi-colon and the curly bracket

How to change the link color

The bluish accent color is a bit more difficult to change because it is scattered all over the code. There are borders, buttons, links, text with this color and it's not easy to identify. To modify them you'll need to use ctrl+f and search for this value: #4675C0 (for light mode) and #3AACFF (for dark mode) and change it with a HEX color you like.

Remember to only change the hex code, do not delete semicolons, or other words unless you know what you are doing.

How to remove the underline

I've read that some people will have problems with underlined stuff. I made a separated line that is as far away from the text as possible but it might still be irritating for someone. You can remove that.

    /* 
    --------UNDERLINE---------
    To remove the colored underline from the skin just remove 
    the following 2 lines (border-bottom etc etc and padding-bottom etc etc)
    This will leave a nice, readable bold text 
    */
  /* start deleting here -> */
  border-bottom: 2px solid #4675C0;
  padding-bottom: 4px;
  /* <- stop deleting here for the underline thingy! Leave the rest*/
  text-decoration: none;
  font-weight: 700; 
}

Again, search this part in the main skin code titled "UNDERLINE" by using ctrl + F in your text editor and then delete all the code that is between the comments "start deleting here -->"

And "<-- Stop deleting here"

This will leave the underlined things as bold instead.

How to have back the italics

One of the things the Dyslexia Style Guide said was that italics create a visual mess for dyslexia, so I changed all the italics to bold. You can revert this if you don't mind italics!

  /*
--------ITALICS---------
The following code remove all the italics and changes 
them into bold instead for easier dyslexia reading. 
This will override what the fic author's decided to use.
If you prefer you can delete it and all will return to normal 
*/
/* start deleting here -> */
i,
em,
cite {
  font-style: normal;
  font-weight: 700; }

/* <- Stop deleting here for the italics thingy*/

Again, search this part in the main skin code titled "italics" by using ctrl + F in your text editor and then delete all the code that is between the comments "start deleting here -->"

And "<-- Stop deleting here"

How to remove the border around the tags

I was surprised that this was very much appreciated by a lot of people. The little border around tags was an experiment of mine, I didn't know if people would find it readable or not. Anyway it can be removed!

  /*
-----------------TAGS-----------------
This is what makes the tag having a border!
If you want to remove the border please delete all these lines 
*/
/* start deleting here -> */
a.tag,
a.tag:visited,
a.tag:link {
  display: inline-block;
  padding: 4px 7px;
  margin: 4px 0px;
  border: 2px solid #4675C0;
  border-radius: 5px;
}

.commas li:after {
  content: "";
}

.favorite a.tag {
  border: none;
}

/* <- stop deleting here for the tag thingy */

Again, search this part in the main skin code titled "TAGS" by using ctrl + F in your text editor and then delete all the code that is between the comments "start deleting here -->"

And "<-- Stop deleting here"

How to remove the border around the tags only on Mobile

(but keep it on desktop)

Go to your mobile fix skin (so, not the main one!) and add at the end this code:

a.tag, a.tag:visited, a.tag:link, a.tag:hover { border: none !important; }

Notes:

I'm starting to work on dark mode now that this is finished, and the code is sort of ordered (not really, but as ordered as I'm able to make it). I will add it as an extra chapter, so if you are waiting for it you can follow this work and you'll be notified.
Please if you have further questions ask away!

Chapter 3: Dark Mode - Presentation and Installation guide

Notes:

From notes on tumblr I gather that this was something a lot of people are waiting for.
The guide on how to customize and change stuff you can find in chapter 2 is applicable to this dark mode skin as well! So, for any modification you can refer to that one.

(See the end of the chapter for more notes.)

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

Things about this skin:

I'm using Verdana as a font, 18px as a font size, differently from the light version of the skin (and the previews! I'll update those asap), because on dark the bold wasn't very clear. You can still revert it to "Trebuchet MS" by following the instructions in the guide in chapter 2
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.

There is a guide on how to customize a lot of stuff

Install the skin

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

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.

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

The actual skin

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

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:

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!

Suggestions

In chapter 2 of this fic there's a Guide on how to customize

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

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

You just go in your preferences
check "hide work skins" by default.
click on Update.

Notes:

I hope you'll find this useful!
I think I'm going to do a low contrast one next and then focus on other skins!

Chapter 4: Sepia - Presentation and Installation guide

Notes:

Someone on tumblr a long time ago said that a sepia mode would be nice as well.
The guide on how to customize and change stuff you can find in chapter 2 is applicable to this dark mode skin as well! So, for any modification you can refer to that one.

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

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.

There is a guide on how to customize a lot of stuff

Install the skin

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

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.

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

The actual skin

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

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:

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!

Suggestions

In chapter 2 of this fic there's a Guide on how to customize

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

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

You just go in your preferences
check "hide work skins" by default.
click on Update.

Notes:

Dark mode in chapter 3!

Series this work belongs to:

← Previous Work Part 5 of CSS code scripts for Ao3 Next Work →

Actions

Kudos

Comments

Pages Navigation

Addleton on Chapter 1 Fri 30 Apr 2021 06:59PM UTC

I love that you're doing this! If haven't looked into the code yet, but the one comment I do have straight off is that I feel the border around the tags could use a touch more padding on the left/right sides. The top/bottom look fine, but the borders at the left/right visually run into the first and last letters for me. A bit more space between the border and the text should fix that though.
I've also never had issues with underlines myself, but you may want to consider nudging the underline down a touch so it doesn't come in contact with any of the descenders. Right now, it's almost touching the bottom of the descenders, and a distance more like the top/bottom borders of the tags would be better, though I'm not sure how it will affect the line spacing.

Comment Actions
- Reply
- Thread
1. ElectricAlice on Chapter 1 Sat 01 May 2021 10:01AM UTC
  
  Hey! Thank you so much for the suggestions!
  The padding is very easy to do, let me know if this is better or the line should be even more farther away:
  (click on the images to see them bigger)
  I increased the left and right border from 4px to 7px. I can increase it even more if needed.
  For the underline thing I have two options!
  An underline that's farther away like you said:
  or, a colored background, highlighter style.
  Which one would you think would be best?
  
  Comment Actions
2. 1. ElectricAlice on Chapter 1 Sat 01 May 2021 10:13AM UTC
    
    (the code in the link is updated with the modifications to the tags by the way if you want to go ahead and use it)
    
    Comment Actions
  2. 1. Addleton on Chapter 1 Sun 02 May 2021 11:51PM UTC
      
      The tags are a lot more readable now!
      I think the increased distance with the underline is better. The colored background reduces the contrast a bit too much for me, which makes the highlighted words harder to read, though you could adjust the text and highlight colors so that isn't an issue.
      
      Comment Actions
Erdariel on Chapter 1 Fri 30 Apr 2021 10:43PM UTC

I don't have dyslexia so I'm not at all qualified to give feedback on whether or not this is useful for its intended purpose, but I want you to know that as a person who has poor eyesight but also likes reading fics on my phone lying in weird positions where wearing glasses is super awkward, the big font and everything in this makes my life so much easier! Now I don't have to have my phone like an inch from my nose when I want to read fics 😂 It's a small thing compared to what you're actually aiming for here, but still, I just wanted to let you know and thank you for this as well :)

Comment Actions
- Reply
- Thread
1. ElectricAlice on Chapter 1 Sat 01 May 2021 10:04AM UTC
  
  for real, the first thing I did when I found out about skins was make the font WAY bigger on mobile devices lol!
  I am actually working on other skins by the way, and mobile font-size is a big feature in those as well.
  
  Comment Actions
2. 1. Erdariel on Chapter 1 Sat 01 May 2021 05:52PM UTC
    
    Oh that's great! :D Honestly it never ceases to amaze me that there are people like you in fandoms who have the technical understanding to create all these skins and stuff for Ao3 - I wouldn't have the faintest idea of where to even start if it were up to me!
    
    Comment Actions
In Joke Taken (In_Joke_Taken) on Chapter 1 Sun 02 May 2021 03:50AM UTC

Thank you, thank you, thank you for this so much. AO3 is already such a well done site I've never bothered to tweak it but everything with the skin makes such a difference. I especially love the boarders around the tags.

Comment Actions
- Thread
1. ElectricAlice on Chapter 1 Thu 27 May 2021 06:55AM UTC
  
  Thank you! hugs!
  
  Comment Actions
CrazySmith on Chapter 1 Wed 26 May 2021 11:29PM UTC

As someone who has dyslexia, I think this is a really cool skin! However, I find I have a problem with the tags when it comes to the mobile version of the skin. I like the box around the tags as it makes it easier to read them. Yet, when tags get too long, some of the text will move down to the next line and the box doesn't end until that next line. Originally, I thought the tags were cutting off on mobile, until I realized they were moving to the next line. It's a bit harder to read some of longer tags because of that. I also think that the tags might be a bit too big, but that could just be a me thing. If I'm searching for a fic to read, it might take a while to scroll through the tags to get to the summary depending on how many the author has put in. Now personally, I like to read the summary then look at the tags. So, scrolling past the tags for a while is an issue for me.
I don't know If you'll be able to do anything about what I pointed out, I just wanted to let you know! I appreciate all the effort you put into making this skin and I thank you for it!

Last Edited Wed 26 May 2021 11:31PM UTC

Comment Actions
- Reply
- Thread
1. ElectricAlice on Chapter 1 Thu 27 May 2021 06:55AM UTC
  Hey! yes, they go in the next line when they are too long, it's the nature of having borders around text and I've tried to find a solution but even if I did put a border mid-tag it would be more confusing.
  What would you be interested in? just having it removed from the mobile skin? because I can do that and add it to the chapter about personalizations, that might be helpful for other people!
  anyway to make only the tags on mobile shorter, go ahead and edit the mobile fix skin you saved and add this code at the end:
```
a.tag {
    font-size: 80%;
}
```
  You can change the percentage further and have a 70% or 60% (or 90%)
  Comment Actions
2. ElectricAlice on Chapter 1 Wed 14 Jul 2021 11:19AM UTC
  
  Hey! this is probably very late, but I ended up solving the tags-going-in-a-new-line on mobile. At least visually less disruptive.
  
  I've updated the code if you are still interested and if it's what you were looking for.
  
  Comment Actions
Jupanuma on Chapter 1 Mon 31 May 2021 05:08PM UTC

Hello. Seems I've messed up somewhere on the mobile version, and can't figure out what I did wrong. I don't think I have it installed as a second skin, but I don't know how you can find out if you have or not. I've checked multiple times that it's set as "only screen and (max-width: 42em)", and that only the desktop version is the parent one.
Am I doing something wrong?

Last Edited Mon 31 May 2021 05:11PM UTC

Comment Actions
- Reply
- Thread
1. ElectricAlice on Chapter 1 Mon 31 May 2021 05:27PM UTC
  
  Hey!
  uhm. ok, first, let's make sure you do have two separate skins here: https://ao3-rd-8.onrender.com/users/Jupanuma/skins do you have both the mobile and the general dyslexia skin saved? they should count as two separate skins like this:
  
  The mobile one needs the "only screen and (max-width: 42em)" (and ONLY the mobile one)
  The general dyslexia one needs to have the mobile one as parent (not the other way around)
  Also, to check: are you sure you copied the right code? they got switched (god knows I've done that SO MANY TIMES) and maybe you just installed the same code on both skins?
  if this doesn't help can you send me a screenshot of the problem? maybe I can guess what went wrong!
  
  Comment Actions
2. 1. Jupanuma on Chapter 1 Mon 31 May 2021 05:34PM UTC
    
    Thank you. I didn't realize that it was two different codes, so I just used the same code for both skins. It's now fixed.
    
    Comment Actions
Eiiri on Chapter 1 Mon 28 Jun 2021 07:54PM UTC

Very helpful, thank you!

Comment Actions
- Reply
- Thread
Novaeanglia on Chapter 1 Sat 07 Aug 2021 06:57PM UTC

I have the utmost respect for you

Comment Actions
- Reply
- Thread
JustSomeNinjahWriter on Chapter 1 Wed 03 Nov 2021 03:47PM UTC

This is wonderful thank you so much for making it

Comment Actions
- Reply
- Thread
eightelevenpm on Chapter 1 Wed 10 Nov 2021 11:27AM UTC

This is so helpful, thank you!

Comment Actions
- Reply
- Thread
Wips on Chapter 1 Wed 24 Nov 2021 01:33PM UTC

Hey, I'm using your skin (thank you so much for doing this by the way!) and I've noticed that on the mobile, in the "chapter by chapter" mode, we can't access the chapter index, it cuts off. Did I do something wrong or is it something with the skin? I don't know

Comment Actions
- Reply
- Thread
1. ElectricAlice on Chapter 1 Thu 25 Nov 2021 09:30AM UTC
  nope you didn't do anything wrong, that's 100% my error, because on my phone it looked decent enough and I didn't check other sizes. I fixed it in the mobile skin, thank you!
  if you do not want to go and download it again you can just copy/paste this code at the end of the mobile fix skin:
```
.chapter .expandable.secondary, .chapter .expandable.secondary select {
    width: 90%;
}
```
  Comment Actions
2. 1. Wips on Chapter 1 Thu 25 Nov 2021 01:33PM UTC
    
    Thank you so much! Your skin really really helps me a lot :)
    The fix worked by the way! Thank you!
    
    Last Edited Thu 25 Nov 2021 01:40PM UTC
    
    Comment Actions
  2. Wips on Chapter 1 Fri 18 Feb 2022 12:37AM UTC
    
    Hello again! I'm still using your skin and it made my life a hundred times easier!
    I was wondering if there's a way to change the color of the page numbers...? Like, for example, when I'm on a tag and it has more pages to like, the number of the page I'm in changes color, like, if I'm in page 2, it has a different color from the other numbers.
    
    Comment Actions
Princessponies on Chapter 1 Thu 25 Nov 2021 11:44PM UTC

As a dyslexic person, this looks super cool. However, it does feel a lot harder to differentiate the bolded words from the normal text though. I dunno if there'd be some way to fix that without adding things like a colored background or underline to that text?

Comment Actions
- Reply
- Thread
1. ElectricAlice on Chapter 1 Tue 11 Jan 2022 09:18AM UTC
  
  Hey! (sorry for the lateness of my reply)
  mmmh, there is no coding way to make a font bolder than it is, the only solution is to change the font because how bold a character is is decided by the font itself and not by the skin. Which skin are you using? The light mode or the dark mode? Because I used two different fonts for the two different skins. the one I used on dark mode I chose exactly because the bold characters weren't bold enough, so I used Verdana instead of Trebuchet MS in there. Have you tried that one? Does it work better or worse?
  
  Comment Actions
2. 1. Princessponies on Chapter 1 Wed 12 Jan 2022 03:02AM UTC
    
    I've tried both - I'd say light mode bold looks slightly better to me but its difficult to tell still. It might just be how the text versus background contrast looks to me with both.
    
    Comment Actions
fraddit on Chapter 1 Mon 20 Dec 2021 05:38PM UTC

Hi, I don't have dyslexia, but I love this skin for the added readability it offers for many things, on mobile especially. (Although my sibling *does* have dyslexia, so I'll be showing this to them for sure) So thank you so much for making this.
However, I am wondering if it's possible to add a line or larger space between the author's notes and the start of the fic text on mobile for fics that are only one chapter? I love that the author's notes are now easier to read with the decreased indent, but now it's kind of confusing as to when the fic actually starts. Although this might be due to me fussing with the text sizes and such...
Also, is there a way to change the color of the scroll bar on mobile?
Again, this is such a wonderful project. Thank you!

Last Edited Mon 20 Dec 2021 06:28PM UTC

Comment Actions
- Reply
- Thread
1. ElectricAlice on Chapter 1 Tue 11 Jan 2022 09:56AM UTC
  No the foreword not being different enough it's a problem I've been having too while reading! it's definitely a problem of my skins I will have to tackle properly at one point.
  Ok this solution is a bit awkward and I haven't betatested it on every situation (one chapter works, works with multiple chapters, works with author notes and works without... etc) as a code but it should work.
  Add it to the mobile skin code:
```
div.preface.group:not(div.chapter):not(div.afterword) {
    border-bottom: 2px solid #4675c0;
}
```
  you can change color #4675C0 to any other (it's the blue I'm using for the light mode. if you are using the dark mode use this one instead: #3aacff ) you can use google's color picker to find the hex code, just google 'color picker'!
  
  ok for the scrollbar, beware, this feature doesn't work for every browser but it's worth a try because most of modern ones do indeed support it:
```
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-thumb {
    background: #4675C0; 
}
```
  Same thing as the other with the color! change the #4675C0 as you want. Also you can change the 10px to whatever width you want for your bar.
  This scrollbar code can be inserted in the main code if you want the bar to change color both on desktop or in mobile. or it can be added in the mobile code if you want to change only the mobile one.
  Happy to be of help to you and your sibling! :D
  Comment Actions
2. 1. fraddit on Chapter 1 Tue 11 Jan 2022 06:54PM UTC
    
    Thanks so much!! <3
    
    Comment Actions
Wips on Chapter 1 Sun 30 Jan 2022 02:07AM UTC

Hi again! I've come here again to ask if there's a way to change the colors of the numbers of the pages we are in. Like, in ao3 original skin, when you're looking for a fic and change pages (from page 1 to page 2 for example), the numbers of the page you're in has a different color and I wanted to ask if there's a way to put it in this skin? It's totally okay if there isn't! It's just a small detail that doesn't really change the experience, but it would be nice to have.
Once again, thanks a lot for making this skin, it made the whole experience of reading fanfics so much more enjoyable to me :)

Comment Actions
- Reply
- Thread
1. ElectricAlice on Chapter 1 Fri 25 Mar 2022 11:56AM UTC
  Hey! SO sorry I replied with such lateness.
  Yes, there is a way, I actually have updated the code to include it right now, but if you don't want to update the whole code (if you have done other changes to it) you can just copypaste this code here at the end of the main skin:
```
#outer .pagination .current {
  color: #4675C0;
  background: #f2f2f6;
}
```
  these are the colors for the light mode, you can change them however you like.
  dark mode is this one instead:
```
#outer .pagination .current {
  color: #3aacff;
  background: #263343;
}
```
  and sepia:
```
#outer .pagination .current {
  color: #9e775b;
  background: #efe3cd;
}
```
  Comment Actions
2. 1. Wips on Chapter 1 Sat 26 Mar 2022 05:00PM UTC
    
    Thank you so much! Don't worry about the lateness! I'm sure you have a lot of things to do, and the fact that you took time of your day to answer to me warms my heart! You're a great person, this skin helps so many people, thank you! :D
    
    Comment Actions
ms0milk on Chapter 1 Tue 01 Feb 2022 11:47PM UTC

you're doing the lords work thank you thank you thank you so much!

Comment Actions
- Reply
- Thread
Jiggyro on Chapter 1 Mon 21 Feb 2022 07:50AM UTC

Dyslexic here! Thank you so so much for this. I appreciate it greatly <33

Comment Actions
- Reply
- Thread
pipiblake on Chapter 1 Thu 24 Feb 2022 01:40AM UTC

Thank you!
I don't have dyslexia, but I'm often reading AO3 with very tired eyes or glasses off.

Comment Actions
- Reply
- Thread
Iluker (Guest) on Chapter 1 Sun 03 Apr 2022 02:46AM UTC

I love this so much. Thank you, thank you for doing this!

Comment Actions
- Reply
- Thread
vile_reckoning on Chapter 1 Sun 17 Apr 2022 04:12PM UTC

1. I really appreciate this guide! I love the way this theme looks and how easy it was to implement
2. I edited the color scheme for the dark theme, and in doing so it looks like I made the dropdown menus in the "filter" tab the same color as the background. What do I look for in the code to fix this?
Thanks again, you're a godsend. I'm not dyslexic but a lot of the features in this skin really improve my reading experience and the step-by-step guides are fantastic

Comment Actions
- Reply
- Thread
TheWordsMagician on Chapter 1 Mon 23 May 2022 04:05PM UTC

Thank you so much!! This is a game-changer and I'm going to use the style guide you shared for my writing in general from now on x3

Comment Actions
- Reply
- Thread
vampshipman on Chapter 1 Sat 09 Jul 2022 07:40PM UTC

Hello, person with dyslexia here! It actually helped a LOT. Normally I have to focus a bunch to be able to read properly. But with this, not as much. Thank you!

Comment Actions
- Reply
- Thread