印刷時の幅を制限する

印刷時には幅制限を解除して、用紙いっぱいに文字が並ぶようにしていた。しかしこのウェブサイトでも採用している45から75文字のルールはそもそも紙媒体での話だし、レスポンシブ・ウェブ・デザインの観点からもディスプレイと紙で折り返し幅を合わせた方が一貫性がありそう。ということでと同じ幅で折り返すように変えた。

$width-content: 36rem;

main {
  max-width: $width-content;
}

@media print {
  body {
    margin-right: auto;
    margin-left: auto;
    max-width: $width-content;
  }

  main {
    max-width: none;
  }
}

レイアウトがそこそこ複雑なので、main要素に対する幅制限の解除はそのままにして、body要素の幅を制限するようにした。併せて印刷位置をセンタリングするためにmargin-(right|left)プロパティーも指定しておく。

印刷時にユーザーに余白を調整してもらうという考え方でも悪くない気がすると思うけど、それはディスプレイ向けスタイルシートで幅を制限せずにウィンドウを調整してもらうという考え方と同じ。ユーザビリティには優れるところはあるけれども、コンテンツに最適化されるというわけじゃない。もしディスプレイ向けスタイルシートでコンテンツに合わせた幅制限を行っているのなら、印刷向けスタイルシートでもそれをそのままかもう少し最適化して利用してやるのが正しいアプローチのはず。