(choco/印刷対応案 より移動)


Category:Design

印刷対応案

PukiWiki 1.3.xでの印刷対策についての試案

関連

第一段階:スキンでの名前付け

印刷時の対象要素を細かく制御できるようにするために、PukiWikiのページの構成要素にそれぞれ名前をつける。

例えばこのPukiWiki.orgのスキンであれば、

のように分割できる。

具体的にはskinのファイルのそれぞれの要素を囲むように

<div class="header_logo">  ...  </div>

をいれていく。

body_subとbody_mainについてだけは特別で、tdのクラスとして 指定する必要がある(body_subのtdはwidth=120としてあるので、 tdの中身を印刷しないようにしても白い空間になってしまうため、 tdごと印刷対象から外す必要がある)。

第二段階:印刷用CSSの適用

skinでCSSを指定している場所の、

<link rel="stylesheet" href="skin/default.ja.css" type="text/css" media="screen,print" charset="shift_jis">

の次の行に

<link rel="stylesheet" href="skin/default.print.css" type="text/css" media="print" charset="shift_jis">

を追加する。

第三段階:印刷抑制要素を指定するCSSを作る

こんな感じで、印刷したくない要素を指定するだけのCSSになる。

div.header_logo {display: none;}
div.header_url {display: none;}
div.header_menu {display: none;}
td.body_sub {display: none;}
div.footer_attach {display: none;}
...

# 個人的には今のスキンだとアンカー文字列が印刷時に判別できないので

a:link {text-decoration: underline;}
a:visited {text-decoration: underline;}

# も追加しています。

なにが嬉しいか

私が印刷する時は、極端な話、

欠点


以下の内容はちょっと古いです

普段の見た目は変わりませんが、印刷した時だけ、Menuなど本体以外の部分の出力が抑制されます。

なんでこんなものをアップしてるのかというのは dev:BugTrack/110 をご覧ください。



質問箱でこの話に答えたものですが、通常の画面構成を印刷する場合と本文のみを印刷する場合の両方に対応したいときは alternate stylesheet の機能を使ってスタイルシートを切り替えてから印刷するしかないように思います。

ただ、そうした場合、IE など標準でスタイルシートを切り替える機能を持っていないブラウザでの扱いが面倒になります。


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2011-10-14 (金) 15:50:41
Site admin: PukiWiki Development Team

PukiWiki 1.5.3+ © 2001-2020 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u10. HTML convert time: 0.310 sec.

OSDN