CSS Page Composition: Setting Up Pages, Headers, and Page Numbers with Antenna House V5, Study notes of Web Design and Development

Download CSS Page Composition: Setting Up Pages, Headers, and Page Numbers with Antenna House V5 and more Study notes Web Design and Development in PDF only on Docsity!

Introduction to page

composition with CSS

Shinyu MURAKAMI

Antenna House, Inc.

September 4th, 2008

(1) (^) CSS3 is not a monolithic specification, but devided into functional modules. Major modules are listed at

(Chapter 19. Reference specifications). In order to study CSS3, the knowledge about CSS2.1 (CSS Level 2 Revision 1, Candidate Recommendation), on which CSS3 is based, is necessary.

Preface

CSS (Cascading Style Sheets) is a type of style sheet which can be

used for not only Web designs but also variety of printing uses and page

media such as PDF.

Especially, CSS Level 3, which is being developed by W3C, specifies

various functions necessary for professional quality formatting such as

complicated page composition, multi-column layout, vertical writing and

character layout for multi-lingual.(1)

This document will explain CSS page composition with the Preview

Version of Antenna House Formatter V5, which implements CSS3.

Chapter 1. Setup of page

1.1 @page rule

@page rule sets basic settings such as page size, margin, and page header/footer.

@page { size: A4; margin: 25mm; @top-center { content: "Sample"; } @bottom-center { content: counter(page); } }

1.2 Size setting: size property

Width and height of a page should be set with size property.

@page { size : 182mm 230mm; }

@page { size : 4in 6in; }

Keywords such as A5, A4, A3, B5, B4, letter, legal and ledger can be used for the value of size

property. AH Formatter supports other originally defined page names.

@page { size: A4 ; /* ISO/JIS A4 (210mm×297mm) */ }

@page { size: B5 ; /* ISO B5 (176mm×250mm) */ }

@page { size: JIS-B5 ; /* JIS B5 (182mm×257mm) */ }

Landscape orientation can be specified with a keyword “landscape”.

Chapter 1. Setup of page

@page { size: A4 landscape ; /* A4 landscape (297mm×210mm) */ }

1.3 Margin

Page margin can be specified with margin property in @page rule.

@page { margin : 10%; /* top, bottom, left, and right margins will be 10% of the page width respectively */ }

@page { /* top and bottom margins are 2cm, left and right margins are 3cm */ margin-top : 2cm; margin-bottom : 2cm; margin-left : 3cm; margin-right : 3cm; }

1.4 Margin boxes

Page header/footer will be assigned to margin box which is the area around a page. Margin boxes are named after the location such as @top-left, @top-center, @top-right,

@bottom-left, @bottom-center, @bottom-right.

@page { @top-right { /* Page header / content : "Sample"; } @bottom-center { / Page footer */ content : counter(page); } }

Chapter 1. Setup of page

@bottom-right { /* page number */ content: counter(page); } }

@page :first { /* setting of the first page of a document / / hide page header */ @top-right { content: normal } @top-left { content: normal } }

Chapter 2. Running header and page number

2.1 Running header setting ： stringt-set property and string()

function

Words from headings in the body can be displayed in the page header.

@page { @top-left { content: string(Chapter) ; } }

h1 { string-set: Chapter self ; }

2.2 Page number: counter(page)

counter(page) is used for generating page numbers.

@page { @top-right { content: "Page " counter(page) ; } }

2.3 Total pages: counter(pages)

Total pages may be output with current page number as Page 8 of 27.

@page { @top-right { content: "Page " counter(page) " of " counter(pages) ; } }

Chapter 4. Cross reference

4.1 Reference to counter (chapter and page numbers): target-

counter() function

Chapter and/or page number which is referred to can be automatically added such that “Please

refer to Chapter 3. Counter (page 9)”.

.ChapterRef::before { content: "Chapter " target-counter(attr(href, url), ChapterNo) ". "; } .PageRef::after { content: "(page " target-counter(attr(href, url), page) ")"; } ... Please refer to Counter.

4.2 Reference of text contents: target-text() function

Text which is referred to can be inserted. E.g.) “Chapter 4. Cross reference”

.TitleRef { content: target-text(attr(href, url), before) target-text(attr(href, url), content) ; } ... E.g.) “This chapter”

Chapter 5. Creation of table of contents

5.1 Cross reference and table of contents

Table of contents can be created with target-counter() which can refer to chapter and page

number (please refer to Chapter 4. Cross reference), as following example:

Chapter 1. Page setup............................................ 4 Chapter 2. Running header and page number........................... 8 Chapter 3. Counter.............................................. 9

.TOC a::before { /* add chapter number to the table of contents / content: "Chapter " target-counter(attr(href, url), ChapterNo) ". "; } .TOC a::after { / add page number to the table of contents */ content: leader(dotted) " " target-counter(attr(href, url), page) ; } ...

Page setup Running header and page number Counter

5.2 Leader: leader() function

With leader() function, leader (such as dots) can be added between title and page number in

table of contents to right-align page numbers.

• leader(dotted).......................................... leader(dotted)
• leader(solid) ___________________________________________________ leader(solid)
• leader(space) leader(space)
• leader("-") ------------------------------- leader("*-")

Chapter 7. Named page

7.1 Named page: page property

Several types of @page rules with specific names can be created and switched as appropriate.

@page Landscape { /* named page with Landscape definition / size: A4 landscape; } @page Appendix { / named page with Appendix definition / @top-center: "Appendix"; } table.WideTable { page: Landscape; / place a large table on the side of a Landscape page / } div.Appendix { page: Appendix; / add Appendix to Appendix page */

Chapter 8. Multi-column layout

8.1 Multi-column setup: column-count, column-gap, column-rule

The current block is set as the column-count

to be 2. column-gap and column-rule are

specified as well.

div.MultiCol { column-count : 2; column-gap : 5mm; column-rule : dotted green 1mm; }

Alternative method is to specify column-

width instead of column-count. The number of

columns will be automatically set based on the width of page and column. column-rule is a shorthand and has the same effect as the following example:

column-rule-style : dotted; column-rule-color : green; column-rule-width : 1mm;

(2) (^) Footnote is the note which is written on the bottom of a page. (3) (^) 'float: page bottom' from Chapter 9. Page float is used for the footnote alignment. @footnote rule in @page

rule can be used to set footnote area. Pseudo elements such as ::footnote-call, ::footnote-marker will be used to set style for note number.

Chapter 10. Footnotes

10.1 Footnotes: float: footnote

Content of the element on which 'float: footnote' is specified will be output as a footnote(2)(3).

When footnote is specified in float property, the contents will be noted as footnote footnote is the note which is written on the bottom of a page. ...

Chapter 11. PDF bookmark

11.1 Bookmark setup: bookmark-level, bookmark-label

PDF bookmark can be created. Set level in bookmark-level property to create a bookmark

item. The level corresponds to the level of h1-h6 headings in

HTML. Titles in bookmark contents may be set with bookmark-

label property. Text contents will be used for bookmark-label if

label is not specified.

h1 { bookmark-level: 1 } h2 { bookmark-level: 2 } h3 { bookmark-level: 3 } h4 { bookmark-level: 4 } h5 { bookmark-level: 5 } h6 { bookmark-level: 6 }

Chapter 13. Rounded borders

13.1 Radius of rounded border: border-radius

To round border corners, the radius should be set with border-radius property.

Border-radius...

Border-radius (rounded border) is set.

Radii of each corner can be set individually. Corners can be set as ellipse by setting different sizes for horizontal and vertical directions of radius.

**Chapter 14. Shadowed boxes**

14.1 Shadowed box setup: box-shadow

To add shadow to boxes, set box-shadow property with width, height, and color of shadow.

...

Box-shadow (shadowed boxe) is set.

...

Multiple shadows can be specified in box-shadow property. Corners of the shadow can be rounded with border-radius property.