UDデジタル教科書体などを駆使してUserCSSでブラウザの文字を見易くする

自分はけっこう目が良い方だと思っていたけれど，だんだん悪くなっているようで，文字の模様は視えるけれどチカチカしたような感じになって文字列として認識できない，みたいになることがしばしばあって，仕方がないと諦めていた．

この症状は文字サイズを大きくしてもあまり変わることがなくて，なんか不思議な感じ．文字を構成する縦線同士横線同士が干渉してチカチカする，みたいな感覚になる．

ところで，ディスレクシアという読み書き系の障害の一種があって，その人達は，文字をうまく認識することができなかったり書けなかったりして困っているらしい．ディスレクシアの人たちのうち特に読むのが苦手な人は，色がついた下敷をかぶせるとか，特殊なフォントを使うなどしてうまく読めるようにしているらしい．

自分は子供の頃は普通に読み書きできていたはずなのでディスレクシアではないと思うけど，ディスレクシアの人でも読みやすい環境というのは自分でも読みやすい環境になるはず．そこで自分もUserCSSを使って読みやすい環境を作ることができないかと思った．

TL;DR

p:nth-child(even) {
    opacity: 30%;
}
p:nth-child(even):hover {
    opacity: 100%;
}
body, #container, article, div.body, #bodyContent, h1, h2, h3, h4, h5, h6, .editor {
    background-color: #002b36 !important;
    font-family: 'Oswald', 'UD デジタル 教科書体 NK-R' !important;
    color: #fdf6e3 !important;
}

pre, code {
    background-color: #fdf6e3 !important;
    color: #002b36 !important;
    font-family: "Source Han Code JP";
}

a {
    color: #859900 !important;
}

フォント

UDデジタル教科書体というフォントがある．これはUDというプレフィックスがついている通り，ユニバーサルデザインを意識して作られたもので，ディスレクシアの人でも読みやすいという話を聞いた．

そこでUserCSSでそのフォントを指定する．よく文章本体になりがちな要素を指定して，強制的にデジタル教科書体を使わせる．

英字は個人的に読みやすいと感じたOswaldというフォントを使った．

UDデジタル教科書体はWindowsには標準搭載されているし，OSXでも無償で入手することができる．OswaldはGoogle Fontで無償で入手することができる．

body, #container, article, div.body, #bodyContent, h1, h2, h3, h4, h5, h6, .editor {
    font-family: 'Oswald', 'UD デジタル 教科書体 NK-R' !important;
}

codeやpreの部分までUD教科書体になると読み辛いので，そこだけSouce Han Code JPを使った．

pre, code {
    font-family: "Source Han Code JP";
}

配色

色がついた下敷を使うことで，真っ白の背景ではなく色付きの背景にするとディスレクシアが改善するという面白い現象があるらしい．自分はSolarizedの配色が好きなので，効果があるかわからないが，Solarizedに準じた色彩を設定した．

body, #container, article, div.body, #bodyContent, h1, h2, h3, h4, h5, h6, .editor {
    background-color: #002b36 !important;
    font-family: 'Oswald', 'UD デジタル 教科書体 NK-R' !important;
    color: #fdf6e3 !important;
}

pre, code {
    background-color: #fdf6e3 !important;
    color: #002b36 !important;
    font-family: "Source Han Code JP";
}

a {
    color: #859900 !important;
}

リンク部分も同じ色にすると分かりにくいのでSolarizedの緑色を採用した．

ethanschoonover.com

段落ごとに色を変える

各行ごとに背景色を変化させて区別を付けられるようにするというのもよくあるテクニックらしい．CSSで各行の色を変えるのはちょっと大変なので，段落ごとに色を変えることにした．

p:nth-child(even) {
    opacity: 30%;
}
p:nth-child(even):hover {
    opacity: 100%;
}

奇数個目はそのまま，偶数個目の段落は色を薄くし，ホバーすることで色を戻すということにした．

こんな感じ

すると文章はこんな感じに表示される．

個人的には大満足で，長文を読むときはこれを使おうと思っている．ちなみにUserCSSの適用はStylusというChrome拡張を使っている．

chrome.google.com