Paged media differ from continuous media in that the content of the document is split into one or more discrete pages. Paged media includes paper, transparencies, pages that are displayed on computer screens, etc.
The CSS2 standard introduces some basic pagination control features that let authors help the browser figure out how to best print their documents.
The CSS2 page model specifies how a document is formatted within a rectangular area -- the page box -- that has a finite width and height. These features fall into two groups −
- CSS2 features that define a particular page layout.
- CSS2 features that control the pagination of a document.
Defining Pages : the @page rule
The CSS2 defines a "page box", a box of finite dimensions in which content is rendered. The page box is a rectangular region that contains two areas −
-
The page area − The page area includes the boxes laid out on that page. The edges of the page area act as the initial containing block for layout that occurs between page breaks.
-
The margin area − It surrounds the page area.
You can specify the dimensions, orientation, margins, etc., of a page box within an @page rule. The dimensions of the page box are set with the 'size' property. The dimensions of the page area are the dimensions of the page box minus the margin area.
For example, the following @page rule sets the page box size to 8.5 × 11 inches and creates '2cm' margin on all sides between the page box edge and the page area −
<styletype="text/css"><!-- @page { size:8.5in 11in; margin: 2cm } --></style>
You can use the margin, margin-top, margin-bottom, margin-left, and margin-right properties within the @page rule to set margins for your page.
Finally, the marks property is used within the @page rule to create crop and registration marks outside the page box on the target sheet. By default, no marks are printed. You may use one or both of the crop and cross keywords to create crop marks and registration marks, respectively, on the target print page.
Setting Page Size
The size property specifies the size and orientation of a page box. There are four values which can be used for page size −
-
auto − The page box will be set to the size and orientation of the target sheet.
-
landscape − Overrides the target's orientation. The page box is the same size as the target, and the longer sides are horizontal.
-
portrait − Overrides the target's orientation. The page box is the same size as the target, and the shorter sides are horizontal.
-
length − Length values for the 'size' property create an absolute page box. If only one length value is specified, it sets both the width and height of the page box. Percentage values are not allowed for the 'size' property.
In the following example, the outer edges of the page box will align with the target. The percentage value on the 'margin' property is relative to the target size so if the target sheet dimensions are 21.0cm × 29.7cm (i.e., A4), the margins are 2.10cm and 2.97cm.
<styletype="text/css"><!-- @page { size: auto; /* auto is the initial value */ margin: 10%; } --></style>
The following example sets the width of the page box to be 8.5 inches and the height to be 11 inches. The page box in this example requires a target sheet size of 8.5" × 11" or larger.
<styletype="text/css"><!-- @page { size: 8.5in 11in; /* width height */ } --></style>
Once you create a named page layout, you can use it in your document by adding the page property to a style that is later applied to an element in your document. For example, this style renders all the tables in your document on landscape pages −
<style type="text/css"> <!-- @page { size : portrait } @page rotated { size : landscape } table { page : rotated } --> </style>
Due to the above rule, while printing, if the browser encounters a <table> element in your document and the current page layout is the default portrait layout, it starts a new page and prints the table on a landscape page.
Left, Right, and First pages
When printing double-sided documents, the page boxes on left and right pages should be different. It can be expressed through two CSS pseudo-classes as follows −
<styletype="text/css"><!-- @page :left { margin-left: 4cm; margin-right: 3cm; } @page :right { margin-left: 3cm; margin-right: 4cm; } --></style>
You can specify the style for the first page of a document with the :first pseudo-class −
<styletype="text/css"><!-- @page { margin: 2cm } /* All margins set to 2cm */ @page :first { margin-top: 10cm /* Top margin on first page 10cm */ } --></style>
Controlling Pagination
Unless you specify otherwise, page breaks occur only when the page format changes or when the content overflows the current page box. To otherwise force or suppress page breaks, use the page-break-before, page-break-after, and page-break-inside properties.
Both the page-break-before and page-break-after accept the auto, always, avoid, left, and right keywords.
The keyword auto is the default, it lets the browser generate page breaks as needed. The keyword always forces a page break before or after the element, while avoid suppresses a page break immediately before or after the element. The left and right keywords force one or two page breaks, so that the element is rendered on a left-hand or right-hand page.
Using pagination properties is quite straightforward. Suppose your document has level-1 headers start new chapters with level-2 headers to denote sections. You'd like each chapter to start on a new, right-hand page, but you don't want section headers to be split across a page break from the subsequent content. You can achieve this using following rule −
<styletype="text/css"><!-- h1 { page-break-before : right } h2 { page-break-after : avoid } --></style>
Use only the auto and avoid values with the page-break-inside property. If you prefer that your tables not be broken across pages if possible, you would write the rule −
<styletype="text/css"><!-- table { page-break-inside : avoid } --></style>
Controlling Widows and Orphans
In typographic lingo, orphans are those lines of a paragraph stranded at the bottom of a page due to a page break, while widows are those lines remaining at the top of a page following a page break. Generally, printed pages do not look attractive with single lines of text stranded at the top or bottom. Most printers try to leave at least two or more lines of text at the top or bottom of each page.
-
The orphans property specifies the minimum number of lines of a paragraph that must be left at the bottom of a page.
-
The widows property specifies the minimum number of lines of a paragraph that must be left at the top of a page.
Here is the example to create 4 lines at the bottom and 3 lines at the top of each page −
<styletype="text/css"><!-- @page{orphans:4; widows:2;} --></style>
相关推荐
该存储库包含网站的资源。
3-paged-hotel-site-new
How to use CSS property references like universal values, visual media, paged media, and more Who this book is for This book is a handy, pocket quick syntax reference for experienced CSS developers ...
react-native-paged-contacts, 用于响应本机的分页联系人 响应本地分页联系人页面式联系人管理器,用于响应本机。目前只收取 ,只支持获取联系人。 安装 iOS将 RCTPagedContacts.xcodeproj 添加到项目中。在项目目标...
Updated to cover Internet Explorer7, Microsoft's vastly improved browser, this new edition includescontent on positioning, lists and generated content, table layout,user interface, paged media, and ...
CSS3 动画属性(Animation) CSS 边框属性(Border 和 Outline) CSS 背景属性(Background) Color 属性 Box 属性 ...Paged Media 属性 Marquee 属性 多列属性(Multi-column) CSS 表格属性(Table)
npm install paged-http-stream原料药var pages = pager(opts, next) 选项: method :默认为GET uri :要查询的网址。 包括查询字符串。 ...以及可以传递给典型的node.js http请求的任何其他内容(使用 )next = ...
Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, lists and generated content, table layout, user interface, paged media, ...
分页js 关于paged.js的教程
$ npm install --save paged-request 小心! 有关在v2.0中进行的更改的信息,请参见。 用法 只要用户提供的next()函数返回字符串(要获取的下一个URL),该库就会递归调用.get方法。 看。 例子 const request = ...
- 0000689: CustomFiles property for ServerModule to add custom CSS and JS files - 0000688: Bug in installer Environment setter - 0000687: "Script" property for TUniForm for adding Custom JS - 0000665...
Paged.js-分页媒体工具 ... Pagedmedia.org上提供了有关 Media CSS和Paged.js入门的快速概述。 NPM模块 $ npm install pagedjs import { Previewer } from 'pagedjs' ; let paged = new Previewer ( ) ; let flow =
SearchingSortingPagingTable 该项目是使用版本6.0.8生成的。 开发服务器 为开发服务器运行ng serve 。... 如果您更改任何源文件,该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name...
create proc p_paged1 @pageSize int,@currentPage int as select top (@pageSize) * from student where id not in (select top (@pageSize*(@currentPage-1)) id from student) go exec p_paged1 2,3 create proc ...
paged_query.sql
Cascading Style Sheets: The Definitive Guide, 2nd ... The book includes new content on positioning, lists and generated content, table layout, user interface, paged media, and more. It explores in deta
#分页画廊,v0.1 #执照信息版权所有 (c) 2010 蒂博米兰特此授予任何人免费获得本软件副本和相关文档文件(“软件”)的许可,不受限制地处理本软件,包括但不限于使用、复制、修改、合并的权利、发布、分发、再许可...
它导入DOCX或EPUB文件,将它们转换为单源HTML以进行在线编辑和校对,并使用CSS Paged Media在几秒钟内为打印,开放的网络以及几乎所有的电子书阅读器提供美观的输出。 Booktype促进跨时区和边界的协作,敏捷生产。 ...
PagedPool -- 内核模式内存,如有必要,可以交换到磁盘。 RamCensus 只计算当前在物理 RAM 中的分页池部分(未交换到磁盘)。 NonPagedPool -- 始终保留在物理 RAM 中的内核模式内存。 DriverCode——驱动程序可...
Internal paged datasource support IDataReader now. -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=Sharp-ORM公开源码地址: http://download.csdn.net/source/336341 -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- ...