打印网页


引自:https://drublic.de/archive/printing-the-web/?file=blog/printing-the-web/

链接

a[href]:after {
    content: " (" attr(href) ")";
}

a[href^="#"]:after,
a[href^="javascript"]:after {
    content: "";
}
abbr[title]:after {
    content: " (" attr(title) ")";
}

页面结构

@page 可以设置页面的结构

@page {
    margin: 2cm 1.5cm;
}

:first 可以定义打印的第一页,:left:right表示奇偶页.
这可以用在任何一个元素上,比如说你想横着打印表格

@page tables {
    size: landscape;
}

table {
    page: tables;
}

你可以设置打印大小,默认的大小是 DIN A4 (210 × 297) .你可以这样设置成 DIN A5:

@page {
    size: 148mm 210mm;
}

分页

h2 {
    page-break-after: avoid;
}

page-break-beforepage-break-after 的可能值如下:
auto – 默认值,没有特殊设置
always – 必有一个分页
avoid – 尝试不要分页
left/right – 使元素左起分页或者右起分页

page-break-inside 只支持 autoavoid

实验性的属性

实验性的属性 在 CSS Paged Media Specification

-webkit-print-color-adjust: exact;

这个用在 WebKit 浏览器上保证打印和屏幕一样,也就是说你可以打印背景,你可以用在图标上,不能用在body标签上.

寡行

p{
    orphans:3;
}

保证至少有连续的三行在页尾

article{
    widows:2;
}

保证至少有连续的两行在页首

Boxes On Page-Break

box-decoration-break没太看懂

slice – default value, literally “slices” the box into two parts
clone – dupicates the styles that are applied to a box on each page

页眉页脚

  1. body的伪类
  2. thead and tfoot 3.
@page {
    counter-increment: page;

    @top-center {
        content: "Headline, yo!"
    }

    @bottom-right {
        counter-increment: page;
        content: "Page " counter(page);
    }
}
  1. position: fixed;

手机

Apple’s AirPrint

服务器端技术