Wikipedia の記事を外国語読解練習用に印刷するためのカスタム CSS

Wikipedia には pdf を出力する機能があるし、そうでなくても大抵のブラウザで 右クリック → 印刷 → 出力先を pdf に設定 とすることで pdf に落とせる。だけれど紙に印刷して赤ペンとかでゴリゴリ書き込んだりしたいからわりと行間が空いていてほしいし、本文以外にいろいろと余計なものがあって邪魔だったりすることがある。

そこで、紙に印刷して書き込みまくって読解をやっていくのに最適な印刷ページを吐くためのカスタム CSS を書いた。Stylus などに入れておいて、印刷時に有効化し、ブラウザの右クリック印刷機能で印刷する。

/* 余計な情報を削って余白をいい感じに調整する */
#mw-page-base,
#mw-head-base,
#mw-head,
#mw-panel,
.navbox,
.plainlinks,
.noprint,
#catlinks,
#footer
{
    display: none !important;
}

#content.mw-body
{
    margin: 2rem !important;
}

/* 基準の文字サイズを設定する */
html
{
    font-size: 16px !important;
}

/* 相対的な文字サイズ・行間幅を設定する */
p
{
    font-size: 1rem !important;
    line-height: 3rem !important;
}

h1
{
    font-size: 2rem !important;
    line-height: 2rem !important;
}

h2
{
    font-size: 1.5rem !important;
    line-height: 1.5rem !important;
}

h3
{
    font-size: 1.2rem !important;
    line-height: 1.2rem !important;
}

/* リンクを示す色付けとかはいらないので消す */
a:link
{
    color: #000000 !important;
    text-decoration: none !important;
    border-bottom: 0px !important;
}

ロシア語のように屈折しまくる言語や中国語のように文字に音の情報が含まれない言語なんかは、慣れるまでは至るところ書き込みたいので、文字サイズや行間の余白を大きくしたいところ。中国語なんかは文字サイズを 24px くらいにしたほうがいいかもね。あるいは印刷設定でスケールを弄ってもいい。


Print Wikipedia を思い出したんだけどあれ英語版だけらしい。