ツイート
« 2009年03月30日 | メイン | 2009年04月02日 »
2009年03月31日
「PDFを出力」の動作とCSS3をご紹介
ブログページを「PDFに出力」のボタンを押した時の動作は次の図のようになります。
ブログを閲覧している人が「PDFに出力」ボタンを押すと、Formatterサーバにその要求が伝わります。Formatterサーバは、ブログサーバから現在表示しているブログのページ（XHTML)＋CSSスタイルシートをもってきて組版し、PDFを出力します。
PDFファイルのURLをセットしてhttp://cssfo.antenna.co.jp/demo2.phpページを表示します。
印刷用CSSの部分をご紹介します。
@media print {
::footnote-call {
content: counter(footnote, decimal);
font-size: 60%;
vertical-align: super;
}
::footnote-marker {
content: counter(footnote, decimal);
font-size: 60%;
vertical-align: super;
-ah-margin-end: 0.5em;
text-indent: 0;
}
@page {
size: A4;
margin-top: 25mm;
margin-bottom: 20mm;
margin-left: 20mm;
margin-right: 25mm;
@top-center {
content: "I Love Software! Blog, PDF generated by AH Formatter V5.0 with CSS3";
font-style: italic;
border-bottom: solid 0.1pt black;
margin-bottom: 10mm;
}
@bottom-center {
content: "- " counter(page) " -";
}
@footnote {
counter-increment: footnote;
float: page bottom;
border-top: thin solid black;
border-length: 30%;
margin-top: 0.5em;
padding-top: 0.2em;
}}
body {
margin: 0;
padding-left: 100pt;
font-family: serif;
background-color:white;
-ah-punctuation-trim:start end adjacent;
-ah-text-autospace:ideograph-numeric ideograph-alpha;
-ah-text-autospace-width: 25%;
-ah-text-justify-trim: punctuation;
-ah-punctuation-spacing: 50%;
-ah-hanging-punctuation: none;
}
a {
text-decoration: none;
color: blue;
}
div.content > a:first-child {display: none}
.content {
padding: 0;
}
.content p {
color: black;
font-family: Times New Roman, serif;
font-size: 10.5pt;
font-weight: normal;
line-height: 1.2;
text-align: justify;
margin: 0;
}
.content p a:after {float: footnote;
content: attr(href) ;
font-size: 0.9em;
}
div.content > p[align=right] {display:none}
.content p a img {
float: left;
padding: 1em;
}
div.content h2 {
clear: left;
margin-top: 1.5em;
margin-bottom: 0;
margin-left: -35mm;
font-family: serif;
font-size: 10.5pt;
page-break-after: avoid
}
div.content h2:first-of-type {
margin-top: 0em;
}
.content h3 {
margin-top: -1.3em;
page-break-after: avoid
}
#container { width:100% }
#center {
width: 100%;
float:none;
overflow: visible;
}
#right, .sidebar, .vote, .posted,
#banner, .banner, a:first >img {display:none }
}
対症療法的に、印刷時に非表示にしている要素が沢山あります。ブログのテンプレートを書き換えて出力するHTMLのタグをもっと綺麗にするとCSSの方を整理できるかもしれません。とりあえず、ブログテンプレートの方は変更していません。
投票をお願いいたします