# Introduction to
CSS for Paged Media

Introduction to CSS for Paged Media

Antenna House, Inc.

## Introduction

CSS is widely used in browsers, editors, and other applications. CSS is used not only for web design but also as the stylesheet specification for a wide range of printing applications as well as for electronic paged media delivered as PDF.

CSS (Cascading Style Sheets) Level 1 became a W3C Recommendation in 1996. CSS 2 became a W3C Recommendation in 1998, and CSS 2.1 (Cascading Style Sheets Level 2 Revision 1), in 2011. As of early 2018, CSS 2.2 is currently under development.

CSS post-Level 2 is popularly known as CSS 3, but there will not be a single, monolithic CSS Level 3 specification. CSS beyond CSS Level 2 has been broken into multiple modules that each define a part of CSS. These modules are numbered individually. The first versions of modules that build on CSS Level 2 are denoted as Level 3, and each may be superseded a Level 4 version. For example, CSS Color Level 3 replaces several sections of CSS Level 2, and CSS Color Level 4, which is currently in development, will eventually replace CSS Color Level 3. Modules that do not build on CSS Level 2 features start at Level 1: for example, CSS Multi-Column Layout Level 1. There will not be a CSS Level 4 or beyond.

Individual modules are in varying stages of development and varying levels of stability. The stability levels for all W3C specifications range from Working Draft to Recommendation. The CSS Working Group maintains a separate stability categorization for its specifications that ranges from Rewriting and Exploring through to Stable and Completed.

The CSS Working Group compiles yearly snapshots of the current state of CSS at that point in time. CSS Snapshot 2017https://www.w3.org/TR/css-2017/ lists both Recommendation and Candidate Recommendation specifications as comprising the official definition of CSS as of 2017 (even though the document defines Candidate Recommendation as the test phase of a W3C specification).

CSS 2.1 (and CSS 2.2) provides only minimal support for paged media output, and its page layout features are not powerful enough. CSS 3, although still under development by the W3C, defines many of the features that are necessary for professional quality formatting, including: advanced page layouts; multiple columns; vertical writing; hyphenation; and multilingual character layout. Antenna House Formatter provides additional features for optimal formatting, including: custom-developed MathML 3 and SVG rendering; baseline grids; PANTONE® spot colors; and additional properties for controlling Japanese layout.

Using CSS in paged media design for XML and HTML is not yet common but its use is expected to increase as the development of CSS 3 progresses. This tutorial aims to make CSS for Paged Media easy to understand.

### Audience

Many people are familiar with CSS in the browser: some are very familiar, but others, not so much. Fewer people, however, are as familiar with using CSS for paged media.

Introduction to CSS for Paged Media is intended for you if you know CSS but have never written CSS for print media. You should already be familiar with CSS syntax and with using common properties such as border, padding, font-size, and so on. This tutorial does cover these, but not in great detail.

If you are already familiar with most aspects of CSS but not with paged media, then Colors, PDF Bookmarks, Page Setting, Headers and Footers, and PDF Output will be the most useful chapters to you.

Since this is just an introduction to CSS for paged media, it does not attempt to cover every property, selector, rule, or function of either CSS or of Antenna House Formatter. For more information on the full range of what is available to you, please consult the CSS specifications as well as the Online Manual for your version of Antenna House Formatter.

### Conventions used in this tutorial

- Property descriptions may include:
  - Initial value
  - Elements to which the property applies
  - Whether or not the property is inherited
  - Explanatory text
  - List of allowed values

  ### Incrementing Counters : counter-increment property

  Initial value : none Applies to : all elements Inherited : no

  Use the counter-increment property to increase the specified counter value.

  - none : Does not do count.
  - Counter Name : Increases the specified counter value by one.
  - Counter name, space, and integers : Increases the counter value with a specified number.
- The CSS level of a property or feature is indicated as follows:
  1. Defined by CSS 2.1: no mark
  2. Defined by CSS 3: CSS 3
  3. Antenna House Formatter extension: AH Original Extension

  CSS 3 is under development, so CSS 3 specifications may change in the future. CSS 3 properties can be used with or without an -ah- prefix. Antenna House Formatter extension properties will not operate properly unless you include the -ah- prefix. (From here on, Antenna House Formatter is abbreviated as AH Formatter).

- Emphasized text is shown as bold text with a yellow background.
- Samples of styled text are enclosed in a box:
  Optional title

  Number of this page =

  Total number of pages in this document =

- Blocks of sample markup or sample CSS are shown in monospace text:

      <p>Number of this page = <span style="content: counter(page)"></span>
      </p>
      <p>Total number of pages in this document=
        <span style="content: counter(pages)">
      </span></p>

## Web and Paged Media

### @media Rule

An @media rule delimits a set of CSS style sheet rules specific to a target medium. Specify @media print for rules specific to paged media and @media screen for rules specific to screen display.Since AH Formatter is print formatting software, it does not apply @media screen rules for the GUI screen but does apply @media print rules.

    @media print {        /* applies to paged media */
      body {
        margin: 0;
        font-size: 10pt }
      }
    @media screen {         /* applies to screen display */
      body {
        margin: 10%;
        font-size: 12px }
      }

    body {                  /* applies to all media */
      font-family: sans-serif;
    }

### Specifying a Print Style Sheet

#### <style> Element

A <style> element contains style information for the document. In HTML 4.01, <style> may only appear inside <head>. In HTML 5, <style> may also be used in the body of the document.

    <style type="text/css" media="print">
    …
    </style>

#### @import Rule

A print-only style sheet can be created in another CSS file by including it with @import.

    @import url("PrintOnly.css") print; /* PrintOnly.css printing */

#### Media attribute of <style> and <link> elements

Specifying print as the media attribute value links the print style sheet with the <style> or <link> element.

    <link rel="stylesheet" type="text/css" media="print" href="foo.css">

### Differences Between Screen and Print

#### Design approach

Screen display and printing require different approaches to designing the layout.

The size and aspect ratio of a screen display may change depending on the display environment, so it is hard to know how to accurately specify the size and arrangement of the layout target. The style specification should consider using relative dimensions to accommodate various environments.

In printing, there is an expectation that formatted objects are arranged neatly on fixed-sized paper, therefore, the layout specification should precisely control the layout by specifying absolute dimensions for the size and position of the formatting objects starting with the size of its characters.

#### Breaks

Breaks happen in both paged and unpaged documents. For example, text is broken into lines, and the text in a block that has column-count greater than 1 may be broken into columns. However, and unsurprisingly, breaks are more common, and more of a concern, when a run of text is also broken across pages. There are properties for forcing or avoiding breaks within or between elements. Additionally, the widows and orphans properties control the minimum number of lines of text before or after a break in a block of text.

#### Floats

In unpaged media, a box can float to the left or right. In paged media, it can also float to the top or bottom of the page (and AH Formatter implements more detailed control over floats). Items that you might float include graphics, sidebars, and footnotes.

#### Navigation

Paged media (i.e., books) have well-developed conventions for navigating between pages.

Pages are typically numbered, and, often, the frontmatter is numbered in a different style and sequence to the main text.

The page number and, often, the book, chapter or even section title may appear at the periphery of the page. Dictionaries have their own conventions for indicating the first and last entries on each page. CSS defines 16 regions around the edge of the page for presenting this sort of information.

The table of contents (or tables of contents) and index facilitate non-sequential access.

A chapter (or other significant division) will may start on a right-hand page (for left-to-right writing mode documents), and the chapter start may have a different appearance to other pages (and possibly different headers and footers).

#### Left and right pages

A document that is printed on both sides of the page and bound into a book-like form (even a document that is duplex-printed on an office printer and placed in a folder) will form two-page spreads with a left-hand and a right-hand page. Also, because the document is bound, as you leaf through the document, it is easier to see the details near the outer edges of the pages than at inner edges of the pages near the binding. Thirdly, the sequential reading order of the pages makes it easy to think of two-sided leaf of the document as having a ‘front’ and a ‘back’ side.

All of these aspects can affect the page design. For example, chapter openings are typically (but not exclusively) on the right-hand of a spread, since that is the ‘front’ side of a leaf. Page numbers and any other navigation aids on a page are more likely to be on or near the outer edge of each page so they can be seen more easily when leafing through the document. Thinking of the document as a sequence of two-page spreads also raises questions of whether the facing pages should be symmetrical around the gutter and whether items such as graphics can span across the two pages.

#### The printed book

Several things should be considered for a document that is to be printed rather than only viewed on screen.

There may be constraints on the page size. A document that is meant to be printed by the end user may be sized to suit the paper size of an office printer: Letter size in the USA; A4 in most of the rest of the world; or A4 or JIS-B5 in Japan. A car handbook, on the other hand, is conventionally a convenient size for a car glove compartment. Trade paperbacks have a range of conventional sizes, and choosing an unconventional page size could affect the sales of a book.

If the paper is not sufficiently opaque, the text on the opposite side of the paper may show through. The effect is made worse if the text on each side of the paper is not aligned.

Effect of show-through with non-aligned and aligned text

Graphics, and other design elements, that extend to the edge of the page may need to be printed so they extend past the edge of the page. If they don't extend past the edge of the page, then any inaccuracy when trimming the page to its correct size after printing and binding could result in a white strip between the graphic and the edge of the page. Conversely, the graphic should not have significant details close to the edge of page in case the trimming takes off too much rather than too little.

Even the binding method may need to be considered when designing the book. Perfect binding or a wire binding may reduce the visible or usable area of the gutter between pages. If the pages of a book are gathered into signatures and then trimmed, the pages in the middle of the signature may have more trimmed from their fore-edge than is trimmed from the pages on the outside of the signature.

## Box Layout

### Box Model

In CSS, everything is a box. The tree of elements and text that makes up the document is transformed into a tree of boxes. Some elements generate multiple boxes (for example, an <li>), and some generate none (for example, elements such as <col> or any element with display: none;). The broadest classification of boxes is that there are block-level boxes, line boxes, and inline-level boxes. A block-level box contains, such as a paragraph, either other block-level boxes or it contains line boxes. When, for example, a paragraph contains text plus a list, one or more anonymous boxes are created around the line boxes for the text so that no box contains both block-level boxes and line boxes. A line box contains one or more inline-level boxes, since every change of font or style generates a separate inline-level box.

Areas and edges of a typical box

Every box has a content area, and the bounds of the content area are the content edge. The padding area is around the content area, and it is bounded by the padding edge. Similarly, the border surrounds the padding, and the margin surrounds the border. Some boxes have zero-width padding, border, or margin on one or more sides, either because of the CSS definition of the areas generated for a box type or because the corresponding properties are set to zero.

### Box Display and Printing

In CSS, formatting objects such as text, images, and tables are arranged as boxes. Boxes are laid out in a hierarchical structure starting with a box containing the lowest character string up to a box at the top of the root element. When the output destination is the screen, the root element box is displayed on the screen. If the output destination is a paged media, set the page template in the page box and place another box on the page.

Interaction between box screen display and printing

### Box Arrangement

Boxes other than tables have a content area, surrounded by padding, border, and margin areas. Layout characteristics are specified according to their specific properties. When the hierarchical structure is laid out as page box, root element box, and block box, the content, padding, and border are arranged as shown in the figure below. For information on tables, please refer to “Tables.”

Box Arrangement

### Box Dimensions

The size of the box is the sum of the specific values of the content width, height, padding, border, and margin.

#### Content width : width property

Initial value : auto Applies to : all elementsThe inline element width including table rows, strings, etc, is not applicable because it is set automatically. It does apply to image elements of inline elements. The same applies to min-width and max-width properties. Inherited : no

Specifies content width.

#### Content minimum width : min-width property

Initial value : 0 Applies to : all elements Inherited : no

#### Content maximum width : max-width property

Initial value : none Applies to : all elements Inherited : no

#### Content height : height property

Initial value : auto Applies to : all elementsThe inline element height including table columns, character strings, etc, is not applicable because it is set automatically. It does apply to the image of inline elements. Inherited : no

Specifies content height.

#### Content minimum height : min-height property

Initial value : 0 Applies to : all elements Inherited : no

#### Content maximum height : max-height property

Initial value : none Applies to : all elements Inherited : no

#### Padding width : padding property

Initial value : 0 Applies to : all elementsNot applicable to table rows, columns, table headers, or footers. Inherited : no

Specifies the padding width to padding-top, padding-bottom, padding-left, and padding-right. Allows you to simultaneously specify padding for four sides.

#### Border width (thickness) : border-width property

Initial value : 0 Applies to : all elements Inherited : no

Specifies the border width of the top and bottom and left and right to border-top-width, border-bottom-width, border-left-width, border-right-width. Allows you to simultaneously specify the border-width for four sides.

Specifies color with border-color and line type (style) with border-style for border.

Simultaneously specifies the border width, color, and line type of the top and bottom and left and right with border-top, border-bottom, border-left, and border-right. Allows you to simultaneously specify the four sides of width, color, and line type with border.

Please refer to “Object Decoration” for details on how to specify width, color, or line type of a border.

#### Margin thickness : margin property

Initial value : 0 Applies to : Most elementsInherited : no

Specifies the thickness of the top and bottom and left and right margins for margin-top, margin-bottom, margin-left, and margin-right. Simultaneously allows you to specify the margin for four sides.

The margin value may be negative. The edge with a negative margin extends out from the containing box.

#### Changing the box model : box-sizing property

Initial value : content-box Applies to : All elements that accept width or heightInherited : no

Specifies whether any padding and border are drawn inside or outside the specified width and height. Does not affect the auto value of the width and height properties.

- content-box : the specified width and height apply to the content box of the element.
- border-box : the specified width and height apply to the border box of the element.

width: 50%; box-sizing: content-box;

width: 50%; box-sizing: border-box;

    <div style="width: 50%; box-sizing: content-box; …">
      <p style="background-color: silver; text-align: center">…</p></div>
    <p style="border-top: thick solid green; width: 50%; …"/>
    <div style="width: 50%; box-sizing: border-box; …">
      <p style="background-color: silver; text-align: center">…</p></div>

## Background Decoration

### Border and background

Any object Any element, such as <p>, that can generate a box. can specify its border using the border-* properties. These set the line type (style), thickness, color, and rounded corner as well as adding shadows to the borders. Additionally, background-color sets the background color of the object.

The border-* properties are shorthands for setting one of the style, etc., for all four borders at once. The border property is a shorthand for setting the style, width, and color for all four borders. There are also properties for setting the style, width, and color of one border as well as for setting one of the style, etc., for one border only.

The border-* properties can have one to four component values. The values are set on the different sides as shown in the border-color example below.

- One value: applies to top, bottom, left, and right sides.
- Two values : first value applies to top and bottom sides; second value applies to left and right sides.
- Three values : first value applies to top side, second value to left and right sides, and third value to bottom side.
- Four values : the values apply to top, right, bottom, and left sides, respectively.

### Border Style : border-style property

Initial value : see individual propertiesApplies to : all elements Inherited : no

One to four component values set the border styles for all four sides.

The following border style values may be used.

none : No borders. (thickness = 0)

hidden : Hides border.

solid : solid line.

double : double line.

dotted : dotted line.

dashed : dashed line.

dot-dash : dot-dash line.

dot-dot-dash : two-dot chain line.

wave : wave line.

groove : Border looks as though it is carved into the canvas.

ridge : Border looks as though it is coming out of the canvas.

inset : Border looks as though it is embedded in the canvas.

outset : Border makes the box look as though it is coming out of the canvas.

The individual border style properties are border-top-style, border-right-style, border-bottom-style, and border-left-style.

### Border Thickness : border-width property

Initial value : see individual propertiesApplies to : all elements Inherited : no

One to four component values set the border widths for all four sides.

- thin : a thin border.
- medium : a medium border
- thick : a thick border.
- <length> : an explicit length. Cannot be negative.

The individual border width properties are border-top-width, border-right-width, border-bottom-width, and border-left-width.

### Border Color : border-color property

Initial value : see individual propertiesApplies to : all elements Inherited : no

One to four component values set the border color for all four sides.

- <color> : a color. See Colors for details.
- transparent : the border is transparent, though it may have width.

The individual border color properties are border-top-color, border-right-color, border-bottom-color, and border-left-color.

### Per-side Border Properties : border-top/border-right/border-bottom/border-left properties

Initial value : see individual propertiesApplies to : all elements Inherited : no

Each property specifies the width, style, and color of the top, right, bottom, or left border of a box.

### Border Shorthand : border property

Initial value : see individual propertiesApplies to : all elements Inherited : no

Specifies the width, style, and color of all four borders of a box.

### Rounded Corners : border-radius property CSS 3

Initial value : 0 Applies to : all elements Inherited : no

Specify -ah-border-radius property to make the border corners .

    <p style="border-radius: 18pt; /* rounded corner radius */
              border: solid green;
              padding: 6pt">Border-radius…

Specifies Border-radius (rounding rule).

The radii of each corner can be set individually using border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius.

    <p style="border-top-left-radius: 2mm;      /* top-left */
              border-top-right-radius: 5mm;        /* top-right */
              border-bottom-right-radius: 2cm 1cm; /* bottom-right (horizontal
    and vertical direction)  */
              border-bottom-left-radius: 4cm 2cm;  /* bottom-left (horizontal
    and vertical direction)  */
              border: thin solid;
              background-color: lime;
              padding: 5mm">…

Radii of each of the four corners can be set individually. Rounded corners can also be set as an ellipse.

### Box Shadow : box-shadow property CSS 3

Initial value : none Applies to : all elements Inherited : no

Adds a shadow to a box when box-shadow property is specified with the horizontal and vertical shadow length and shadow color.

    <p style="box-shadow: 8pt 6pt silver;
              border: solid 1pt black; padding: 6pt">…

Sets Box-shadow (Shadowed boxes).

    <p style="-ah-box-shadow: -8pt -6pt orange, 8pt 6pt blue;
              -ah-border-radius: 10pt; padding: 6pt">…

Multiple shadows can be specified. border-radius also affects box-shadow.

### Background Color : background-color property

Initial value : transparent Applies to : all elements Inherited : no

Use background-color property to set background color. The initial value, transparent, lets the contents of the parent element (underlying colors) show through.

Background color applies to the content, padding, and border of an ordinary box model. Margins are always transparent and the background color does not apply.

- The background color is applied to the entire surface of a page box.
- With respect to boxes of root elements, the background color is applied to content, padding, border, and margin.

Range of applications for background color

## Paragraph Setting

### Alignment

#### Alignment : text-align property

Initial value : depends on characters display direction Applies to : block elements Inherited : yes

Aligns text in the block level element to left, right, center, and justify text,respectively.

left : Content is aligned to the left.

Antenna House is very pleased to announce the release of AH Formatter, with support for page layouts specified using either CSS or XSL-FO for formatting XML and HTML documents for PDF and print.

right : Content is aligned to the right.

Antenna House is very pleased to announce the release of AH Formatter, with support for page layouts specified using either CSS or XSL-FO for formatting XML and HTML documents for PDF and print.

center : Content is centered within the line box.

Antenna House is very pleased to announce the release of AH Formatter, with support for page layouts specified using either CSS or XSL-FO for formatting XML and HTML documents for PDF and print.

justify : Content is justified to fill the line box.

Antenna House is very pleased to announce the release of AH Formatter, with support for page layouts specified using either CSS or XSL-FO for formatting XML and HTML documents for PDF and print.

The text-align property, start and end values are extended from CSS 3. When CSS 3 -ah-text-align: start or -ah-text-align: end; is vertical text specified, it is aligned to the top or bottom.

start : content is aligned to the start edge

Antenna House is very pleased to announce the release of AH Formatter, with support for page layouts specified using either CSS or XSL-FO for formatting documents for PDF and print.

end : content is aligned to the end edge

Antenna House is very pleased to announce the release of AH Formatter, with support for page layouts specified using either CSS or XSL-FO for formatting XML and HTML documents for PDF and print.

#### Alignment (justify and text-align-last setting) : text-align-last property CSS 3

Initial value : start Applies to : all elements Inherited : yes

Arranges the text in all elements according to justify. For vertical writing, align text to the top and bottom edge, and align left, right, and center to both ends.

text-align-last: left (aligned to the left)

Antenna House is very pleased to announce the release of AH Formatter, with support for page layouts specified using either CSS or XSL-FO for formatting XML and HTML documents for PDF and print.

test-align-last: right (aligned to the right)

Antenna House is very pleased to announce the release of AH Formatter, with support for page layouts specified using either CSS or XSL-FO for formatting XML and HTML documents for PDF and print.

text-align-last: center (aligned to the center)

Antenna House is very pleased to announce the release of AH Formatter, with support for page layouts specified using either CSS or XSL-FO for formatting XML and HTML documents for PDF and print.

text-align-last: justify (aligned to both ends)

Antenna House is very pleased to announce the release of AH Formatter, with support for page layouts specified using either CSS or XSL-FO for formatting XML and HTML documents for PDF and print.

start : justify (aligned to start edge)

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。

end : justify (aligned to end edge)

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。

#### Line height with superscripts/subscripts : -ah-line-height-shift-adjustment property AH Original Extension

Initial value : consider-shiftsApplies to : inline-level elements Inherited : yes

Line stacking can be irregular when lines contain superscripts and subscripts. Specify -ah-line-height-shift-adjustment: disregard-shifts to stop superscripts and subscripts from influencing the line stacking. However, line stacking can still change for images, fonts with different character baseline positions (such as mixed Japanese and European text), and large letters.

- consider-shifts : Shifted position of characters is used for determining line-height.
- disregard-shifts : Unshifted position of characters is used for determining line-height.

Without -ah-line-height-shift-adjustment: disregard-shifts;

Line stacking can be irregular when lines contain superscripts ABC and subscripts abc. Specify -ah-line-height-shift-adjustment: disregard-shifts to stop superscripts and subscripts from influencing the line stacking. However, line stacking can still change for images, fonts with different character baseline positions (such as mixed Japanese and European text), and large letters.

With -ah-line-height-shift-adjustment: disregard-shifts;

Line stacking can be irregular when lines contain superscripts ABC and subscripts abc. Specify -ah-line-height-shift-adjustment: disregard-shifts to stop superscripts and subscripts from influencing the line stacking. However, line stacking can still change for images, fonts with different character baseline positions (such as mixed Japanese and European text), and large letters.

#### Line stacking : -ah-line-stacking-strategy property AH Original Extension

Initial value : line-heightApplies to : block elements Inherited : yes

When a line contains a mixture of large letters, superscripts and subscripts, and images, or fonts with different character baseline positions (such as mixed Japanese and European text), line stacking depends on the characters that each line contains. As a result, line stacking becomes irregular. Specifying -ah-line-stacking-strategy: font-height; will make line stacking uniform.

- line-height : CSS-style line box stacking with half-leading included in line-area.
- font-height : Line-area is based on font of block-area; equal baseline-to-baseline spacing.
- max-height : Line-area is minimum required to enclose inline areas; constant space between line-areas.

Without -ah-line-stacking-strategy: font-height;

When a line contains a mixture of large letters, superscripts ABC and subscripts abc, and images, or fonts with different character baseline positions (such as mixed Japanese and European text), line stacking depends on the characters that each line contains. As a result, line stacking becomes irregular. Specifying -ah-line-stacking-strategy: font-height; will make line stacking uniform.

With -ah-line-stacking-strategy: font-height;

When a line contains a mixture of large letters, superscripts ABC and subscripts abc, and images, or fonts with different character baseline positions (such as mixed Japanese and European text), line stacking depends on the characters that each line contains. As a result, line stacking becomes irregular. Specifying -ah-line-stacking-strategy: font-height; will make line stacking uniform.

### Baseline gridThe baseline grid feature is not available in AH Formatter Lite.

-ah-line-stacking-strategy affects the lines within a single block. It does not, however, affect line stacking across multiple blocks. Line areas across multiple blocks can be aligned to a consistent line spacing by using the -ah-baseline-grid property.

Some line areas, however, will not align with the baseline grid that is used for running text. These include:

- Headings are frequently in a larger font size than running text. It is sometimes possible to maintain consistent line spacing for running text by carefully setting the margin-top and margin-bottom of each level of heading so that each heading occupies the same height as an integral number of lines. However, that can fail when a heading extends over more than one line or a heading is immediately followed by another heading.
- Graphics are seldom the height of an integer number of lines.
- Borders and padding on table cells can affect the regular line spacing of table text.

Blocks that have content that does not fit with the baseline grid can have the entire block aligned with the grid by using the -ah-baseline-block-snap property.

Without baseline grid
Preamble

Whereas recognition of the inherent dignity and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world,

Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind, and the advent of a world in which human beings shall enjoy freedom of speech and belief and freedom from fear and want has been proclaimed as the highest aspiration of the common people,

Whereas it is essential, if man is not to be compelled to have recourse, as a last resort, to rebellion against tyranny and oppression, that human rights should be protected by the rule of law,

With baseline grid
Preamble

Whereas recognition of the inherent dignity and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world,

Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind, and the advent of a world in which human beings shall enjoy freedom of speech and belief and freedom from fear and want has been proclaimed as the highest aspiration of the common people,

Whereas it is essential, if man is not to be compelled to have recourse, as a last resort, to rebellion against tyranny and oppression, that human rights should be protected by the rule of law,

#### Setting the baseline grid : -ah-baseline-grid property AH Original Extension

Initial value : normal Applies to : block containers Inherited : no

Sets or clears the baseline grid. The line areas that are within an area in which a baseline grid is set are aligned with baselines on the baseline grid.

- normal : Neither sets nor clears the baseline grid.
- none : Clears the baseline grid and the content will not align with a baseline grid.
- new : Sets a new baseline grid.
- root : Sets the baseline grid defined by the root element.

#### Aligning blocks to the baseline grid : -ah-baseline-block-snap property AH Original Extension

Initial value : auto border-box Applies to : block-level elements with 'baseline-grid: new' or 'baseline-grid: none' Inherited : no

Specifies how to align blocks other than normal line boxes, such as headings, figures and tables, to the baseline grid.

### Leader : leader() function CSS 3

With the leader() function, a leader (such as dots) can be added, for example, between the title page and page number in the table of contents and align the page number to the right.

Any of the following may be used as leaders: dotted, solid, space, or characters.

- leader(dotted) leader(dotted)
- leader(solid) leader(solid)
- leader(space) leader(space)
- leader("*-") leader("*-")

Using space as a leader is the same as the right indent tab.

Quadratic formula x = − b ± b 2 − 4 ⁢ a ⁢ c 2 ⁢ a (1)

### Hyphenation

#### Hyphenation : hyphens property CSS 3

Initial value : manual Applies to : all elements Inherited : yes

AH Formatter provides extended features for hyphenation of more than forty languages. It has a built-in dictionary so that you do not need to provide one. If you want to hyphenate words that are not in the built-in dictionary, you can add them to the exception dictionary. Soft hyphens (U+00AD) can be explicitly inserted inside a word to allow hyphenation.

- none : Disable both hyphenation and soft hyphen.
- manual : Disable hyphenation and enable soft hyphens.
- auto : Enable both hyphenation and soft hyphens.

Set hyphens property to auto to enable hyphenation. The hyphenation process performs hyphenation for each language determined by a language-appropriate hyphenation resource, and in this example, xml:lang is specified.

    .Hyphenated {
      -ah-hyphens: auto;
    }
    <div class="Hyphenated" xml:lang="en">
      <p>CSS is widely used in browsers, editors, and other …

CSS is widely used in browsers, editors, and other applications. CSS is used not only for “Web design” but also as the stylesheet specification for a wide range of printing applications as well as for electronic paged media delivered as PDF.

CSS 2.1 (and CSS 2.2) provides only minimal support for paged media output, and its page layout features are not powerful enough. CSS 3, although still under development by the W3C, defines many of the features that are necessary for professional quality formatting, including: advanced page layouts; multiple columns; vertical writing; hyphenation; and multilingual character layout. Antenna House Formatter provides additional features for optimal formatting, including: custom-developed MathML 3 and SVG rendering; baseline grids; PANTONE® spot colors; and additional properties for controlling Japanese layout.

When hyphenation is enabled for body text, it is usually a good idea to disable it in headings and possibly also in other contexts where added hyphens could detract from the appearance of the text. For example, in captions, table headers, or even all table text.

    body:lang(en) {
     hyphens: auto;
    }

    h1, h2, h3, h4, h5, h6 {
     hyphens: manual;
    }

#### Minimum number of characters : hyphenate-before property CSS 3

Initial value : auto Applies to : all elements Inherited : yes

Specifies the minimum number of characters in a hyphenated word before the hyphenation character with a default value of 2.

For example, the six-letter word ‘hyphen’ can be hyphenated as ‘hy-phen’. If hyphenate-before: 3; is specified, the number of characters before the word break is less than three letters, so the word ‘hyphen’ is not hyphenated.

#### Minimum number of characters : hyphenate-after property CSS 3

Initial value : auto Applies to : all elements Inherited : yes

Specifies the minimum number of characters in a hyphenated word after the hyphenation character with a default value of 2.

For example, the six-letter word ‘hyphen’ can be hyphenated as ‘hy-phen’. If hyphenate-after: 5; is specified, the number of characters after the word break is less than five letters, so the word ‘hyphen’ is not hyphenated.

### Block Vertical Writing : writing-mode: tb-rl CSS 3

Specifying writing-mode: tb-rl; on the block element sets vertical writing orientation for the blocks. In block vertical writing, the page progression direction remains left to right as in horizontal writing.

    div.VerticalTextBlock {
      writing-mode: tb-rl;  /* vertical writing */
      height: 16em;             /* number of characters in a line */
      padding: 3pt; border: ridge green;
    }

Japanese is traditionally constructed in a vertical writing orientation. Vertical writing is still the mainstream for many publications of books and magazines. AH Formatter supports vertical writing and can be used to partially write blocks or an entire document vertically.

The vertical writing mode setting is writing-mode: tb-rl. tb-rl signifies that the character’s direction progression is top-to-bottom and the line direction progression is right-to-left.

The horizontal writing mode setting is writing-mode: lr-tb (left-to-right and top-to-bottom). Languages that have a right-to-left progression such as Arabic and Hebrew, the writing mode setting is writing-mode: rl-tb (right-to-left, top-to-bottom).

縦書きの中に「'08年12月8日」のように部分的に数字などを横書きにすることを「縦中横」といいます。

## Multiple Columns

### Column count : column-count property CSS 3

Initial value : auto Applies to : block elements Inherited : no

Specifies the number of columns of a block element.

Sets column-count: 2 for the block. Also specifies column-gap and column-rule.

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

An alternative method for specifying multiple columns is to set column-width instead of column-count. The number of columns will be set automatically based on the column width and the overall width of the page.

column-rule is a shorthand for properties that can be set individually as follows:

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

### Column width : column-width property CSS 3

Initial value : auto Applies to : block elements Inherited : no

Specifies the width of columns in multi-column elements.

Sets column-width: 12em for the block. Also specifies column-gap and column-rule.

    div.MultiColW {
      column-width: 12em;
      column-gap: 1em;
      column-rule:
         solid 1pt;
    }

An alternative method for specifying multiple columns is to set column-count instead of column-width.

### Column number or width : columns property CSS 3

This is a shorthand property for setting ‘column-width’ and ‘column-count’. Omitted values are set to their initial values.

### Column span : column-span property CSS 3

Initial value : none Applies to : block elements, except floating and absolutely positioned elements Inherited : no

Specifies the number of columns that an element spans.

- none : The element does not span multiple columns.
- all : The element spans across all columns.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tincidunt pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tincidunt pharetra.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tincidunt pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tincidunt pharetra.

### Column gap : column-gap property CSS 3

Initial value : normal Applies to : multi-column elementsInherited : no

Specifies the width of the column gap.

### Column rule : column-rule property CSS 3

Initial value : see individual propertiesApplies to : multi-column elementsInherited : no

Specifies column rule width, line type, and color.

### Column rule style : column-rule-style property CSS 3

Initial value : none Applies to : multi-column elementsInherited : no

Specifies the column rule style. Column rule style can be set as follows:

- solid : solid line.
- double : double line.
- dotted : dotted line.
- dashed : dashed line.
- dot-dash : dot-dash line.
- dot-dot-dash : two-dot chain line.
- wave : wave line.

### Column rule width : column-rule-width property CSS 3

Initial value : medium Applies to : multi-column elementsInherited : no

Specifies column rule width.

### Column rule color : column-rule-color property CSS 3

Initial value : current color property Applies to : multi-column elements Inherited : no

Specifies column rule color.

### Column rule length : -ah-column-rule-length property AH Original Extension

Initial value : 100% Applies to : multi-column elements Inherited : no

Specifies the length of the column rule.

column-rule-length: 60% centers a rule 60% of the height of the column vertically within the column.

    div.MultiCol {
      column-rule-length: 60%;
    }

### Column rule alignment : -ah-column-rule-align property AH Original Extension

Initial value : center Applies to : multi-column elements Inherited : no

Specifies the vertical alignment of the column rule within the column.

- before : Align top of column rule with top of column.
- center : Center column rule within column height.
- after : Align bottom of column rule with bottom of column.

-ah-column-rule-length: 60% plus -ah-column-rule-align: after aligns a rule 60% of the height of the column with the bottom of the column.

    div.MultiCol {
      -ah-column-rule-length: 60%;
      -ah-column-rule-align: after;
    }

### Column rule display : -ah-column-rule-display property AH Original Extension

Initial value : gap Applies to : multi-column elements Inherited : no

Specifies the vertical displayment of the column rule within the column.

- gap : Display a rule only between existing columns.
- end : Display a rule at the end side of each existing column.
- all : Display rules even between non-existent columns.

-ah-column-rule-display: end displays a rule after each column.

    div.MultiCol3 {
      -ah-column-rule-display: end;
    }

## Keeps and Breaks

Paged media is, obviously, divided into pages. CSS provides multiple properties for controlling whether the content of an element should be kept together on one page and whether there should or should not be a page break before or after the content.

### Control of Page Breaks

#### Page break : page-break-before/page-break-after property

Initial value : auto Applies to : block elements Inherited : no

- auto : Neither force nor forbid a page break.
- always : Always force a page break.
- avoid : Avoid a page break.
- left : Force one or two page breaks so the next page is a left-hand page.
- right : Force one or two page breaks so the next page is a right-hand page.

    /* forced page break before top header (h1) */
    h1 {
      page-break-before: always;
    }

    /* insert break page after this block */
    div.Ending {
      page-break-after: always;
    }

Setting the value to avoid prohibits page breaks before or after the specified element.

    /* avoid page breaks immediate after top headers (h1～h6) */
    h1, h2, h3, h4, h5, h6 {
      page-break-after: avoid
    }

#### Prohibit page break : page-break-inside property

Initial value : auto Applies to : block elements Inherited : yes

Setting the value to avoid, prohibits page breaks within the specified element.

- auto : Neither force nor forbid a page break.
- avoid : Avoid a page break.

    /* avoid page breaks in this block */
    div.NoBreak {
      page-break-inside: avoid;
    }

#### Pages starting from either the left or right

The first page of a chapter can be set to start either on the right or left. Blank pages are inserted if necessary.

    /*insert page break so that h2 is always kept on the right. */
    h2 {
      page-break-before: right;
    }

### Minimum lines before/after a page break : orphans/widows property

Initial value : 2 Applies to : block elements Inherited : yes

orphans specifies the minimum number of lines of a paragraph that must be left at the bottom of a page. widows specifies the minimum number of lines that must be left at the top of a page.

- <integer> : Minimum number of lines before or after a page break.

Orphan and widow lines

## Character Setting

### Font Setting

#### Font : font property

Initial value : see individual properties Applies to : all elements Inherited : yes

This is a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family.

Font properties are first reset to their initial value. Those properties that are given explicit values in the font shorthand property are set to those values. The font property is set in the following order.

1. font-style, font-variant, and font-weight values may be omitted or may appear in any order.
2. The font-size value cannot be omitted.
3. The line-height value is optional. font-size and line-height values are separated by ‘/’: for example, 9.5pt/13pt.
4. font-family cannot be omitted. Multiple font families can be set separated by commas.

    /* document title*/
    .CoverPage h1 {
      font: bold 30pt Meiryo, sans-serif;
      text-align: center;
    }

#### Font size : font-size property

Initial value : medium Applies to : all elements Inherited : yes

Specifies the size of the font.

    /* Text */
    body {
      font-size: 12pt;
      line-height: 1.5;
      font-family: Tahoma, "MS Gothic", sans-serif;
    }

#### Font type : font-family property

Initial value : depends on user agentThe initial value of serif can be changed. Applies to : all elements Inherited : yes

Specifies the type of font. May be a font name or keyword. Generic font family keywords are defined as follows:

- sans-serif : Plain font, such as Helvetica, that tends to have stroke endings with little or no ornamentation. A Gothic Japanese font is a sans-serif font.
- serif : Font, such as Times, that tends to have a finishing stroke with flared or tapered ends. A Mincho Japanese font is a serif font.
- monospace : A monospaced font. This is a font that has glyphs with the same fixed width.
- fantasy : A decorative font.
- cursive : A cursive font with either joining strokes or cursive characteristics.

If the font name contains spaces, such as “Times New Roman”, enclose the name in double or single quotation marks.

Multiple fonts can be set separated by commas. Fonts available in the user environment are chosen in order of their appearance. AH Formatter divides the character strings for each type of script and assigns them from the fonts first specified in script units. Japanese fonts support the Latin script and if, for example, you specify font-family: "MS Gothic", Helvetica, this results in “MS Gothic” being used for the Latin script as well as JapaneseTo select this font, the method of inspecting whether a font has glyphs for each single character has to change.. Specifying a Latin font at the beginning, as shown in the following example, results in using Helvetica before MS Gothic.

    font-family: Helvetica, "MS Gothic", san-serif;

When a specific font might not be present on the system, it is advisable to include a generic font family, such as serif or sans-serif, as the last font family in the list.

#### Font weight : font-weight property

Initial value : normal Applies to : all elements Inherited : yes

Specifies font weight.

- normal : standard (equivalent to 400).
- bold: bold (equivalent to 700).
- lighter : The next lighter font weight (subtracts 100).
- bolder : The next darker font weight (adds 100).
- Assigned values : 100, 200, 300, 400, 500, 600, 700, 800, 900. From 100, the thinnest, to 900, the thickest.

#### Italic/Oblique Type : font-style property

Initial value : normal Applies to : all elements Inherited : yes

Specifies fonts as italic or oblique.

- normal : standard ("upright").
- italic : italic type
- oblique : slanted

An italic font is designed with a diagonal slant but oblique is a normal font with a slant applied. If italic is given but there is no italic type in the specified font, it will still display a slanted font.

AH Formatter will treat characters as italic even if oblique is specified.Processing with oblique will be revised in future AH Formatter versions.

#### Small Capitals and Font Features : font-variant property

Initial value : normal Applies to : all elements Inherited : yes

Specifies use of a small capitals font. Affects only lower-case letters.

- normal : standard (Does nothing).
- small-caps : Use small capitals.
- <keyword> : There are a large number of other keywords, such as oldstyle-nums, that correspond to OpenType features.

Small capitals will be simulated if the font does not support them. A font may implement only a subset of the other OpenType features.

Note that “Old style” numbers, if available, are a better match than lining numbers for use with small capitals.

Small caps 1234

    .small-caps {
      font-variant: small-caps oldstyle-nums;
    }

### Additional Fonts : @font-face rule

Allows additional fonts without altering your AH Formatter settings and without installing the font in your operating system. The following descriptors are allowed:

- font-family : Name to use in CSS font family name matching. Overrides family name from font data.
- src : Location of font resource.AH Formatter currently only supports a single resource. May be an alias of an existing local font.
- font-style : Optional font weight characteristic to use when matching fonts. Use the same values as the font-weight property except that the bolder and lighter relative keywords are not allowed. The default value is normal.

The Quick Brown Fox

    @font-face {
      font-family: font-face-example;
      src: url(UglyQua.ttf);
    }

    p { font-family: font-face-example; }

### Line Height : line-height property

Initial value : normal Applies to : all elements Inherited : yes

Specifies the height of the line box. normal is the default line-height; AH Formatter initially sets the line-height to 1.2The initial value of 1.2 can be changed..

If a numerical value is specified, the line-height is the value multiplied by the font size. If a value of 1.5 is specified, it will be the same as specifying the line-height as 150% or 1.5em. However, when a numerical value is specified and the line height is inherited, only the number is inherited. If the font size changes, then the line-height will also change accordingly.

Line-height and space between lines

### Vertical Alignment : vertical-align property

Initial value : baseline Applies to : inline-level and table cell elements Inherited : no

Vertical alignment, such as superscripts and subscripts, can be specified.

- normal : standard alignment
- baseline : Align to the baseline of the parent element.
- sub : subscript.
- super : superscript.
- top : Align to the top edge.
- text-top : Align to the top edge of the text.
- middle : Align to center.
- bottom : Align to bottom edge.
- text-bottom : Align to the bottom edge of the text.
- percentage : Sets the value as a percentage of the line height.
- Assigned values : Specifies units to values.

### Underlines, Overlines, and Line-throughs

#### Text decoration shorthand : text-decoration CSS 3

Initial value : none Applies to : all elements Inherited : no

Specifies the type, color, and style of underline, overline, and strike-through text decorations. text-decoration is a shorthand for setting text-decoration-line, text-decoration-color, and text-decoration-style in one declaration. A text-decoration property that sets only the text-decoration-line component is backwards-compatible with CSS 2.

    span {
      text-decoration: underline dotted cmyk(0,1,1,0); /* dotted red underline */
    }

#### Text decoration lines : text-decoration-line CSS 3

Initial value : none Applies to : all elements Inherited : no

Specifies underlines, overlines, and lines-through to the text. When setting more than one value at the same time, specify them in any order separated by spaces.

- none : Adds no text decoration.
- underline : Each line is underlined.
- overline : Each line has a line above it.
- line-through : Each line of text has a line through the middle.

    /*Chapter heading */
    .Chapter h2 {
      text-decoration-line: underline overline;
    }

#### Line type : text-decoration-style property CSS 3

Initial value : solid Applies to : all elements Inherited : no

Specifies different types of underlines, overlines, and line-throughs.

- solid : solid line.
- double : double line.
- dotted : dotted line.
- dashed : dashed line.
- dot-dash : dot-dash line.
- dot-dot-dash : two-dot chain line.
- wave : wave line.

    span.solid {
      text-decoration-style: solid;         /* make the line style solid */
    }
    span.wave {
      text-decoration-style: wave;          /* make the line style wavy */
    }

    solid : <span class="solid">solid line</span>
    wave : <span class="wave">wavy line</span>

#### Line color : text-decoration-color property CSS 3

Initial value : current color Applies to : all elements Inherited : no

Specifies the color of underlines, overlines, and line-through text decorations.

    span {
      text-decoration-color: cmyk(0,1,1,0);  /* make line color red */
    }

#### Line width : -ah-text-line-width property AH Original Extension

Initial value : auto Applies to : all elements Inherited : no

Specifies the line width for underlines, overlines, and line-throughs.

## MathML and SVG Graphics

### MathML

A custom-developed engine for Mathematical Markup Language (MathML) 2.0 Second Edition by the W3C is a standard feature of AH Formatter. For that reason, it is possible to render formulas in high resolution in PDF.AH Formatter Lite users must purchase ‘AH Formatter MathML Option’ separately.

For more information on using MathML, please see the MathML book published by Antenna House at http://www.antenna.co.jp/AHF/ahf_publication/index.html#MathML.

MathML Formatting Examples

If the quadratic formula a ⁢ x 2 + b ⁢ x + c = 0 produces a solution D = b 2 − 4 ⁢ a ⁢ c ,

If D ≧ 0 , then x = − b ± D 2 ⁢ a

and if D < 0 , then the solution produces no real numbers.

    <p>If the quadratic formula
    <m:math xmlns:m="http://www.w3.org/1998/Math/MathML"
        xml:lang="en">
     <m:mstyle displaystyle="true" scriptminsize="1pt"
          scriptsizemultiplier="0.6">
      <m:mrow>
       <m:msup>
        <m:mrow>
         <m:mi>a</m:mi>
         <m:mo>&#x2062;</m:mo>
         <m:mi>x</m:mi>
        </m:mrow>
        <m:mn>2</m:mn>
       </m:msup>
    …
    produces a solution,
    …

MathML Formatting Examples

If the equation for two straight lines are y = m 1 x + n 1 and y = m 2 x + n 2

then angle θ formed by the two straight lines is:

tan θ = ± m 2 − m 1 1 + m 2 m 1 ( 0°≦ θ < 180° )

### SVG Graphics

AH Formatter implements W3C Scalable Vector Graphics (SVG) 1.1 and supports the display of SVG images with a custom-developed engine. For that reason, it is possible to include high resolution SVG images in PDF.

SVG vector graphics can be embedded.

    <p>SVG vector graphics
      <s:svg xmlns:s="http://www.w3.org/2000/svg" width="70" height="65"
        viewBox="0 0 70 65">
       <s:g fill-opacity=".5" stroke="black" stroke-width="2">
         <s:circle cx="35" cy="20" r="19" fill="red"/>…
       </s:g>
     </s:svg>
    can be embedded.</p>

SVG Examples

1 2 3 4 5 6 7 8 9

## Image Positioning

### Inline Image

Use the inline <img> and <object> image elements to place an inline image in a sentence.

Inline Image

Antenna House Formatter is the most powerful XSL-FO software and CSS document formatting software on the market. To meet your needs, we have expanded AH Formatter to support more than 70 languages.

AH Formatter features support for PDF/UA and improved CGM rendering. It also includes support for MathML V3.0, layered PDFs, enhanced support for embedding multimedia and numerous extensions.

    <p style="text-indent: 0">Antenna House<img src="images/logo-antenna.svg" alt="AH logo" style="height: 9pt;" /> Formatter is the most powerful XSL-FO software and CSS document formatting software on the market. To meet your needs, we have
    expanded AH Formatter to support more than 70 languages.
    …

### Display Format : display property

Initial value : inline Applies to : all elements Inherited : no

Use the display property to control how an element is displayed.

Inline element <img> and <object> are displayed as a block when display: block; is specified. The display property changes only the display format of the element, not its role.

- block : Generate a block box.
- inline-block : Generate an inline-level block container.
- inline : Generate one or more inline boxes.
- list-item : Generate a principal box and a marker box.
- none : Cause the element to not appear.
- table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption : Behave like a table element. See Tables.

An inline image set with display: block;

Antenna House Formatter is the most powerful XSL-FO software and CSS document formatting software on the market. To meet your needs, we have expanded AH Formatter to support more than 70 languages.

AH Formatter features support for PDF/UA and improved CGM rendering. It also includes support for MathML V3.0, layered PDFs, enhanced support for embedding multimedia and numerous extensions.

    <p>Antenna House<img src="images/logo-antenna.svg" alt="AH logo" style="display: block; height: 9pt;" /> Formatter is the most powerful XSL-FO software
    and CSS document formatting software on the market. To meet your needs, we have
    expanded AH Formatter to support more than 70 languages.</p>
    …

### Positioning as a Float : float property

Initial value : none Applies to : all elements Inherited : no

Use the float property to float the image and set it to float either to the left, right, or not at all. The adjacent element wraps around the other side of the element with the float property.

left-aligned image float: left;

Antenna House Formatter is the most powerful XSL-FO software and CSS document formatting software on the market. To meet your needs, we have expanded AH Formatter to support more than 70 languages.

AH Formatter features support for PDF/UA and improved CGM rendering. It also includes support for MathML V3.0, layered PDFs, enhanced support for embedding multimedia and numerous extensions.

    <p style="text-indent: 0">
    <img src="images/logo-antenna.svg" style="float:left; height:3em;
    margin-left: 9pt" />Antenna House Formatter is the most powerful XSL-FO software
    and CSS document formatting software on the market. To meet your needs, we have
    expanded AH Formatter to support more than 70 languages.
    …

Right-aligned image: float: right;

Antenna House Formatter is the most powerful XSL-FO software and CSS document formatting software on the market. To meet your needs, we have expanded AH Formatter to support more than 70 languages.

AH Formatter features support for PDF/UA and improved CGM rendering. It also includes support for MathML V3.0, layered PDFs, enhanced support for embedding multimedia and numerous extensions.

    <p style="text-indent: 0">
    <img src="images/logo-antenna.svg" style="float:right; height:3em;
    margin-right: 9pt" />Antenna House Formatter is the most powerful XSL-FO software
    and CSS document formatting software on the market. To meet your needs, we have
    expanded AH Formatter to support more than 70 languages.
    …

Text as well as images can be floatedIt is not common to indent right after a display heading, but indentation is done here for comparison with the right-aligned float..

left-aligned text float: left;

Antenna
House Formatter is the most powerful XSL-FO software and CSS document formatting software on the market. To meet your needs, we have expanded AH Formatter to support more than 70 languages.

Right-aligned text: float: right;

Antenna
House Formatter is the most powerful XSL-FO software and CSS document formatting software on the market. To meet your needs, we have expanded AH Formatter to support more than 70 languages.

### Float Position: float property AH Original Extension

Initial value : none Applies to : all elements Inherited : no

#### Page float : float: top page/float: bottom page AH Original Extension

In the existing HTML and CSS layouts, it is common to use float: left; and float: right; to align images and characters to the left and right of the body text. Page floats extend this to the vertical direction.

float: top page; positions a block at the top of the page. float: bottom page; places a block at the end of the page.

Two page float examples are shown at both the top and bottom of this page. Or on the next page if there is not enough space available on this page.

This is at the top of the page. Specified by float: top page.

This is the second top float for the page. Specified by float: top page.

This is the second bottom float for the page. Specified by float: bottom page.

This is the end of the page. Specified by float: bottom page.

    <div style="float: top page; border: ridge maroon; padding: 3pt;
    margin-bottom: 1em;">
    <p>This is the top page. Specified by <b>float: top page</b>. </p>
    </div>
    <div style="float: bottom page; border: ridge green; padding: 3pt;
    margin-top: 1em;">
    <p>This is the bottom page. Specified by <b>float: bottom page</b>. </p>
    </div>

#### Column float : float: top/float: bottom AH Original Extension

float: top; positions the block at the top of the column. float: bottom; positions the block at the bottom of the column.

Whereas recognition of the inherent dignity and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world,

This is the top of the column.

Specified by float: top.

Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind, and the advent of a world in which human beings shall enjoy freedom of speech and belief and freedom from fear and want has been proclaimed as the highest aspiration of the common people,

This is the bottom of the column.

Specified by float: bottom.

Whereas it is essential, if man is not to be compelled to have recourse, as a last resort, to rebellion against tyranny and oppression, that human rights should be protected by the rule of law,

    <p>Whereas recognition of the inherent dignity and…</p>
    <div style="float: top; border: ridge orange; padding: 3pt;">
    <p>This is the top of the column. Specified by </p><p><b>float: top</b>. </p>
    </div>
    <p>Whereas disregard and contempt for human rights have…</p>
    <div style="float: bottom; border: ridge lime; padding: 3pt">
    <p>This is the bottom of the column. Specified by </p><p><b>float: bottom</b>.
     </p>
    </div>
    <p>Whereas it is essential, if man is not to be compelled…</p>

#### Inside, outside and alternate float : float: inside/float: outside/float: alternate AH Original Extension

float: inside; positions the block at the left side on a right-hand page or on the right side on a left-hand page.

Whereas recognition of the inherent dignity and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world,

float: inside

Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind, and the advent of a world in which human beings shall enjoy freedom of speech and belief and freedom from fear and want has been proclaimed as the highest aspiration of the common people,

float: inside

Whereas it is essential, if man is not to be compelled to have recourse, as a last resort, to rebellion against tyranny and oppression, that human rights should be protected by the rule of law,

float: outside; positions the block at the right side on a right-hand page or on the left side on a left-hand page.

Whereas recognition of the inherent dignity and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world,

float: outside

Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind, and the advent of a world in which human beings shall enjoy freedom of speech and belief and freedom from fear and want has been proclaimed as the highest aspiration of the common people,

float: outside

Whereas it is essential, if man is not to be compelled to have recourse, as a last resort, to rebellion against tyranny and oppression, that human rights should be protected by the rule of law,

float: center; positions the block at the center of the column.

Whereas recognition of the inherent dignity and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world,

float: center

Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind, and the advent of a world in which human beings shall enjoy freedom of speech and belief and freedom from fear and want has been proclaimed as the highest aspiration of the common people,

float: center

Whereas it is essential, if man is not to be compelled to have recourse, as a last resort, to rebellion against tyranny and oppression, that human rights should be protected by the rule of law,

float: start; positions the block on the start side. This is the same as left in horizontal left-to-right writing mode.

Whereas recognition of the inherent dignity and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world,

float: start

Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind, and the advent of a world in which human beings shall enjoy freedom of speech and belief and freedom from fear and want has been proclaimed as the highest aspiration of the common people,

float: start

Whereas it is essential, if man is not to be compelled to have recourse, as a last resort, to rebellion against tyranny and oppression, that human rights should be protected by the rule of law,

It is the same as right in horizontal right-to-left writing mode.

ואיל והכרה בכבוד הטבעי אשר לכל בני משפהת האדם ובזכויותיהם השוות והבלתי נפקעות הוא יסוד החופש, הצדק והשלום בעולם.

float: start

הואיל והזלזול בזכויות האדם וביזוין הבשילו מעשים פראיים שפגעו קשה במצפונה של האנושות; ובנין עולם, שבו ייהנו כל יצורי אנוש מחירות הדיבור והאמונה ומן החירות מפחד וממחסור, הוכרז כראש שאיפותיו של כל אדם.

float: start

הואיל והכרח חיוני הוא שזכויות האדם תהיינה מוגנות בכוח שלטונו של החוק, שלא יהא האדם אנוס, כמפלט אחרון, להשליך את יהבו על מרידה בעריצות ובדיכזי.

float: end; positions the block on the end side. This is the same as right in horizontal left-to-right writing mode.

Whereas recognition of the inherent dignity and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world,

float: end

Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind, and the advent of a world in which human beings shall enjoy freedom of speech and belief and freedom from fear and want has been proclaimed as the highest aspiration of the common people,

float: end

Whereas it is essential, if man is not to be compelled to have recourse, as a last resort, to rebellion against tyranny and oppression, that human rights should be protected by the rule of law,

It is the same as left in horizontal right-to-left writing mode.

ואיל והכרה בכבוד הטבעי אשר לכל בני משפהת האדם ובזכויותיהם השוות והבלתי נפקעות הוא יסוד החופש, הצדק והשלום בעולם.

float: end

הואיל והזלזול בזכויות האדם וביזוין הבשילו מעשים פראיים שפגעו קשה במצפונה של האנושות; ובנין עולם, שבו ייהנו כל יצורי אנוש מחירות הדיבור והאמונה ומן החירות מפחד וממחסור, הוכרז כראש שאיפותיו של כל אדם.

float: end

הואיל והכרח חיוני הוא שזכויות האדם תהיינה מוגנות בכוח שלטונו של החוק, שלא יהא האדם אנוס, כמפלט אחרון, להשליך את יהבו על מרידה בעריצות ובדיכזי.

float: alternate; positions a block in the first column as if end is specified, a block in the last column as if start is specified, and a block in any other column as if center is specified.

Whereas recognition of the inherent dignity and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world,

float: alternate

Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind, and the advent of a world in which human beings shall enjoy freedom of speech and belief and freedom from fear and want has been proclaimed as the highest aspiration of the common people,

float: alternate

Whereas it is essential, if man is not to be compelled to have recourse, as a last resort, to rebellion against tyranny and oppression, that human rights should be protected by the rule of law,

#### Float in vertical writing : float: top/float: bottom/float: alternate CSS 3

夏目 漱石 (なつめ そうせき、慶応三年一月五日 (一八六七年二月九日) ―大正五年 (一九一六年) 一二月九日) は、日本の小説家、評論家、英文学者。 本名、金之助。 『吾輩は猫である』『こゝろ』などの作品で広く知られる、森鷗外と並ぶ明治・大正時代の文豪である。 江戸の牛込馬場下横町 (現在の東京都新宿区喜久井町) 出身。 俳号は愚陀仏。

float: top

大学時代に正岡子規と出会い、俳句を学ぶ。 … (中略) …当初は余裕派と呼ばれた。

float: bottom

「修善寺の大患」後は、『行人』『こゝろ』『硝子戸の中』などを執筆。 「則天去私」 (そくてんきょし) の境地に達したといわれる。 晩年は胃潰瘍に悩まされ、『明暗』が絶筆となった。

float: center

フリー百科事典『ウィキペディア』より引用>

夏目 漱石 (なつめ そうせき、慶応三年一月五日 (一八六七年二月九日) ―大正五年 (一九一六年) 一二月九日) は、日本の小説家、評論家、英文学者。 本名、金之助。 『吾輩は猫である』『こゝろ』などの作品で広く知られる、森鷗外と並ぶ明治・大正時代の文豪である。 江戸の牛込馬場下横町 (現在の東京都新宿区喜久井町) 出身。 俳号は愚陀仏。

大学時代に正岡子規と出会い、俳句を学ぶ。 … (中略) …当初は余裕派と呼ばれた。

「修善寺の大患」後は、『行人』『こゝろ』『硝子戸の中』などを執筆。 「則天去私」 (そくてんきょし) の境地に達したといわれる。 晩年は胃潰瘍に悩まされ、『明暗』が絶筆となった。

float: before

float: after

float: inside

float: outside

float: left

float: right

フリー百科事典『ウィキペディア』より引用>

#### Multi-column float : float: multicol CSS 3

float: multicol; allows the float to span multiple columns plus the gaps between the columns. The ‘gr’ length unit denotes the width of either a column or column gap. n columns has a width of (2n - 1)gr. ‘gr’ lengths may be non-integer.

Whereas recognition of the inherent dignity and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world,

float: multicol

Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind, and the advent of a world in which human beings shall enjoy freedom of speech and belief and freedom from fear and want has been proclaimed as the highest aspiration of the common people,

### Controlling Flow Next to floats : clear property

Initial value : none Applies to : block elements Inherited : no

Use the clear property to control the flow of floats to the right or left sides of a specified block.

- none: Floats are not positioned and computes a 'clearance' of an element.
- left : Requires the top border edge of a box be below the bottom outer edge of any left-floating boxes.
- right : Requires the top border edge of a box be below the bottom outer edge of any right-floating boxes.
- both : Requires the top border edge of a box be below the bottom outer edge of any left-floating and right-floating boxes.

## Tables

### How to Create Tables

The CSS table model is based on the HTML4 table model. When using CSS with a document language that does not have table elements, you can map document elements to display property values that correspond to the HTML4 table elements.

display Property | HTML Element
--- | ---
table | TABLE
inline-table | TABLE
table-row | TR
table-row-group | TBODY
table-header-group | THEAD
table-footer-group | TFOOT
table-column | COL
table-column-group | COLGROUP
table-cell | TD, TH
table-caption | CAPTION

Mapping elements to table-related display values is so generally useful that CSS stylesheets for HTML, such as html.css distributed with AH Formatter, map HTML table elements to the display values that are defined to display like that same element:

    table       { display: table }
    tr          { display: table-row }
    thead       { display: table-header-group }
    tbody       { display: table-row-group }
    tfoot       { display: table-footer-group }
    col         { display: table-column }
    colgroup    { display: table-column-group }
    td, th      { display: table-cell }
    caption     { display: table-caption }

You can display your XML as a table by associating XML elements with the display property values that represent table elements.

    <DATA>
      <STACK>
        <ROW><CELL>row 1 column 1</CELL><CELL>row 1 column 2</CELL></ROW>
        <ROW><CELL>row 2 column 1</CELL></ROW>
        <ROW><CELL>row 3 column 1</CELL></ROW>
      </STACK>
    </DATA>

    DATA {
      display: block;
      margin: 20%;
    }
    STACK {
      display: table;
      border-collapse: collapse;
    }
    ROW  {
      display: table-row;
    }
    CELL {
      display: table-cell;
      padding: 10pt;
      font-weight: bolder;
      border: solid thin;
    }

XML displayed as table

### Applying a Basic Character Property of a Box to a Table

The dimensions of a CSS box are determined by the characteristic properties of its margin, border, padding, content width, and height. Tables are slightly different; the following properties apply.

Properties that apply to table elements
display Property | margin | border | padding | width | height
--- | --- | --- | --- | --- | ---
table | Yes | Yes | Yes | Yes | Yes
inline-table | Yes | Yes | Yes | Yes | Yes
table-row |  | Yes |  |  | Yes
table-row-group |  | Yes |  |  | Yes
table-header-group |  | Yes |  | Yes | Yes
table-footer-group |  | Yes |  | Yes | Yes
table-column |  | Yes |  | Yes |
table-column-group |  | Yes |  | Yes |
table-cell |  | Yes | Yes | Yes | Yes
table-caption | Yes | Yes | Yes | Yes | Yes

- Table padding applies only with border-collapse: separate;
- The width of a table is the space between the inner side of the left and right padding when border-collapse: separate; it becomes the space between the center of the left and right border when border-collapse: collapse.
- Border properties on table-column, table-column-group, table-row, and table-row-group apply only when border-collapse: collapse;.
- The width properties of table-column and table-column-group specify the minimum width of a column.

### Table Border Model

#### Whether or not to separate the border : border-collapse

Initial value : separate Applies to : table elements Inherited : yes

Specifies whether to treat the borders around each CSS table cell individually.

- collapse : Merge the borders of adjacent cells.
- separate : Treat borders of adjacent cells separately.

#### Spaces between borders : border-spacing

Initial value : 0 Applies to : table elements Inherited : yes

Specifies the space (white space) between the borders of adjacent cells when border-collapse: separate;.

    table {
      padding: 5mm;
      border: solid 2mm gray;
      border-collapse: separate;
      border-spacing: 2mm;
    }

    th, td {
      padding: 2mm;
      border: solid 2mm silver;
    }

An example of the above specification can be seen below.

Table with border-collapse: separate;

    table {
      padding: 5mm;
      border: solid 2mm gray;
      border-collapse: collapse;
    }

    th, td {
      padding: 2mm;
      border: solid 2mm silver;
    }

An example of the above specification can be seen below. This time, the table padding disappears. Since the table and cell borders are the same width, priority is given to the next item, and the border of the box generated by table is overwritten by the cell border.

Table with border-collapse: collapse;

#### Border priority

As in the previous example, border-collapse: collapse; combines the adjacent borders together. This time, the border style priority is the following.

- border-style: hidden; has the highest priority.
- border-style: none; has the lowest priority.
- Wide borders have higher priority than narrow borders.
- Borders with the same width are prioritized according to the style of the border in descending order as follows:
  1. double
  2. solid
  3. dashed
  4. dotted
  5. ridge
  6. outset
  7. groove
  8. inset
  double is the highest priority, and inset is the lowest.
- Borders differing only in color are prioritized according to the display type of the element in descending order as follows:
  1. table-cell
  2. table-row
  3. table-row-group
  4. table-column
  5. table-column-group
  6. table
  table has the lowest priority.
- In horizontal writing, if the element types are the same and have line types of the same property, the further it is to the left, the higher its priority.

### Determining Table and Column Width : table-layout property

Initial value : auto Applies to : table elements Inherited : no

Specifying table-layout property determines the width of the table columns.

- auto : Automatically calculates the width of table columns and lays out the table.
- fixed : Lays out tables based on the fixed values of table and column widths.

When the value is auto, table width depends on its content. The minimum width of a column can be specified by the width property of the column elementEquivalent to HTML col element, but the program automatically determines the width for other columns from the cell contents and the width of the entire table.

table-layout: fixed; determines the width of the table and does not depend on the contents of the cell. If the table-layout width is not specified, it becomes the width of the block that contains the table. The width of each column is determined as follows:

- If the column width is specified by the width property value of the column element, that column has the same value.
- Otherwise, the width property value of the cell in the first row sets the column width.
- The remaining width, (table width from an entire table minus the specified column widths) is evenly allocated to any remaining columns.

    table {
      table-layout: fixed;
      …
    }

    col.first {
      width: 10em;
    }

### Align Table to Center

Specifies margin-left: auto; and margin-right: auto; to center the entire table.

    table {
      margin-left: auto;
      margin-right: auto;
      …
    }

### Table Caption Position : caption-side property

Initial value: top Applies to : caption elements Inherited : yes

Use the caption-side property to specify the position of the table caption.

- top : Displays the caption above the table.
- bottom : Displays the caption below the table.

Caption positioned above the table

Product Introduction
Option name | Product content
--- | ---
SVG option | This is an option for SVG output.
Barcode option | Provides several style sheets for printing barcodes and barcode fonts.

    table {
      caption-side: top;
      …
    }

Caption positioned below the table

Product Introduction
Option name | Product content
--- | ---
SVG option | This is an option for SVG output.
Barcode option | Provides several style sheets for printing barcodes and barcode fonts.

    table {
      caption-side: bottom;
      …
    }

## Color Specification

### Printing color

When you use CSS with your browser, the colors that you see are from the display emitting light. When the red, green, and blue primary colors combine to make a color, they are additive: the more of each component there is, the lighter the color. Which is why #FFF is white (or why white is #FFF, depending on your perspective).

Conversely, when you print, the colors that you see are from the light that is reflected from the printed surface. When the cyan, magenta, and yellow primaries combine to make a color, they are subtractive: the more of each component there is, the darker the color. cmyk(1, 1, 1, 0) should give black, but in practice, it’s closer to a muddy brown. That’s one reason why black is added as the fourth color.The ‘K’ in ‘CMYK’ is from the black printing plate being the ‘key’ plate against which the other plates are aligned. Using black ink is also less expensive than using a triple quantity of colored inks. Text is typically printed solely in black to avoid problems if the other three inks are not perfectly aligned. A ‘richer’ black, which might be used for example in a graphic, can be made by applying solid black over one or more other colors.

RGB and CMY

The relationship between RGB and CMY was first demonstrated by James Clerk Maxwell around 1860. Put simply, the printing primaries are the secondary colors of the transmitted light primaries, and vice-versa: cyan is blue plus green, or white minus red, and similarly for magenta and yellow. However, as the following figure shows, CMYK printing inks do not have the same gamut (i.e., color range) as the sRGB color space that is used for RGB colors on the web, and neither covers the full gamut of visible light.

sRGB and CMYK gamuts

These differences between sRGB and CMYK might affect your use of color. Every device or process for printing that you encounter will have a way of representing RGB colors using CMYK, but that is usually by shifting colors so that out-of-gamut colors can be printed (and shifting nearly out-of-gamut colors so they do not look the same as the shifted colors). If your paged media will mostly be viewed on screen, possibly with some local printing by end users, then RGB colors may be best. However, if your paged media will be commercially printed, discuss with your printer whether to use RGB or CMYK for images, etc., and who will do the final conversion to CMYK. Preparing images for commercial printing is a complex subject that is beyond the scope of this tutorial.

### Text Color : color property

Initial value : blackThe Initial value black can be changed. Applies to : all elements Inherited : yes

Use the color property to specify the foreground color of text and border colors. RGB is most commonly used for specifying colors and has three components: red, yellow, and blue. CMYK are used for print only and has four components: cyan, magenta, yellow, and black. International Color Consortium (ICC) color profiles map between a device-independent color space and the capabilities of a device. RGB and ICC colors are converted to CMYK when printing, although they may be retained as RGB or ICC colors in the PDF or other files produced by AH Formatter.

Color can have the following values:

- #RGB : Specifies R, G, or B with a one-digit hexadecimal number each. (#5F0 ＝ #55FF00)
- #RRGGBB : Specifies R, G, or B with a two-digit hexadecimal number each.
- rgb(255,0,0) : From the left, specifies R, G, and B with integer values ranging from 0 to 255.
- rgb(100%,0%,0%) : From the left, specifies R, G, and B with values ranging from 0% to 100%.
- black (and other colors) : Specifies a color keyword. AH Formatter supports the extended color keywords defined in CSS Color Module Level 3.
- cmyk() : Specifies a CMYK color for four-color process printing. AH Original Extension
- device-cmyk() : Same as cmyk().
- rgb-icc() : Specifies a color in a defined color space.rgb-icc() is defined in XSL 1.1 and implemented for CSS by AH Formatter. Takes a variable number of arguments (see below). AH Original Extension

    em { color: #F00; }              /* #RGB */
    em { color: #FF0000; }           /* #RRGGBB */
    em { color: rgb(255, 0, 0); }    /* integer range 0-255 */
    em { color: rgb(100%, 0%, 0%); } /* 0%-100% */
    em { color: red; }               /* color keyword */
    em { color: cmyk(0, 0.9922, 1, 0);      /* 0.0-1.0 */
    em { color: cmyk(0%, 99.22%, 100%, 0%); /* 0%-100% */
    em { color: rgb-icc(#CMYK, 0, 0.9922, 1, 0); /* Profile dependent */

Basic Color Keywords

aqua | aqua | #00FFFF | black | black | #000000 | blue | blue | #0000FF
fuchsia | fuchsia | #FF00FF | gray | gray | #808080 | green | green | #008000
lime | lime | #00FF00 | maroon | maroon | #800000 | navy | navy | #000080
olive | olive | #808000 | purple | purple | #800080 | red | red | #FF0000
silver | silver | #C0C0C0 | teal | teal | #008080 | orange | orange | #FFA500
white | white | #FFFFFF | yellow | yellow | #FFFF00 |  |  |

#### CMYK colors

CMYK colors may be specified with or without a fallback RGB color for use with media that do not support CMYK. When the fallback RGB color is not provided, it is calculated from the CMYK color.

- cmyk(<C>, <M>, <Y>, <K>) : CMYK color with Cyan, Magenta, Yellow, and Black components.
- device-cmyk(<C>, <M>, <Y>, <K>) : Equivalent defined by GCPM.
- rgb-icc(#CMYK, <C>, <M>, <Y>, <K>) : Equivalent.
- rgb-icc(<R>, <G>, <B>, #CMYK, <C>, <M>, <Y>, <K>) : CMYK color with fallback RGB color.

    em { color: cmyk(0, 0.9922, 1, 0)          /* 0.0-1.0 */
    em { color: cmyk(0%, 99.22%, 100%, 0%)     /* 0%-100% */
    em { color: device-cmyk(0, 0.9922, 1, 0)   /* 0.0-1.0 only */
    em { color: rgb-icc(#CMYK, 0, 0.9922, 1, 0)      /* 0.0-1.0 */
    em { color: rgb-icc(#CMYK, 0%, 99.22%, 100%, 0%) /* 0%-100% */
    em { color: rgb-icc(255, 0, 0, #CMYK, 0, 0.9922, 1, 0)      /* RGB 0-255 */
    em { color: rgb-icc(1.0, 0, 0, #CMYK, 0%, 99.22%, 100%, 0%) /* RGB 0.0-1.0 */

#### Opacity

RGB and CMYK colors can also be specified with an ‘alpha’ component specifying the opacity of the color. It is not possible to use an ‘alpha’ component with a named color.

    em { color: #F008; }             /* #RGBA */
    em { color: #FF000088; }         /* #RRGGBBAA */
    em { color: rgba(255, 0, 0, 0.5); }    /* Opacity 0.0-1.0 */
    em { color: rgba(255, 0, 0, 50%); }    /* Opacity 0%-100% */
    em { color: rgba(100%, 0%, 0%, 0.5); } /* Opacity 0.0-1.0 */
    em { color: rgba(100%, 0%, 0%, 50%); } /* Opacity 0%-100% */
    em { color: cmyka(0, 0.9922, 1, 0, 0.5) /* Opacity 0.0-1.0 */
    em { color: cmyka(0, 0.9922, 1, 0, 50%) /* Opacity 0%-100% */
    em { color: cmyka(0%, 99.22%, 100%, 0%, 0.5) /* Opacity 0.0-1.0 */
    em { color: cmyka(0%, 99.22%, 100%, 0%, 50%) /* Opacity 0%-100% */

Opacity

#F00F | #F00E | #F00D | #F00C | #F00B | #F00A | #F009 | #F008
#F007 | #F006 | #F005 | #F004 | #F003 | #F002 | #F001 | #F000

#### rgb-icc() AH Original Extension

The rgb-icc() color function provides additional ways to specify colors, including:

- rgb-icc(#CMYK, 0.5, 0.5, 0.5, 0) : CMYK color.
- rgb-icc(#Grayscale, 0.5) : Grayscale
- rgb-icc(#Separation, 'Name') : Spot color.
- rgb-icc(#Registration) : Print with the same intensity on all separations.
- rgb-icc(#Separation, 'All') : Same as rgb-icc(#Registration).

#### Grayscale AH Original Extension

Grayscale (monochrome) colors can be specified with rgb-icc(#Grayscale, <Scale>), optionally with extra parameters specifying a fallback RGB color for use with devices that cannot display the grayscale color.

    em { color: rgb-icc(#Grayscale, 0.5); }  /* 0.0 (black) to 1.0 (white) */
    em { color: rgb-icc(#Grayscale, 50%); }  /* 0% (black) to 100% (white) */
    em { color: rgb-icc(128, 128, 128, #Grayscale, 0.5); }  /* RGB fallback color */
    em { color: rgb-icc(50%, 50%, 50%, #Grayscale, 0.5); }  /* RGB fallback color */

Grayscale scale values

0.0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1.0

#### PANTONE® spot colors AH Original Extension

When you have the AH Formatter PANTONE® OptionThe ‘AH Formatter PANTONE® Option’ must be purchased separately. you can specify more than 1,000 PANTONE® colors by name and have them print as a spot color or be converted into the correct RGB or CMYK for rendering or printing.

    em { color: rgb-icc(#Separation, 'PANTONE 627 PC', 1.0); } /* Name and tint */
    em { color: rgb-icc(#Separation, 'PANTONE 627 PC', 0.5); } /* Tint 0.0 to 1.0 */
    em { color: rgb-icc(#Separation, 'PANTONE 627 PC', 50%); } /* Tint 0% to 100% */
    em { color: rgb-icc(#Separation, 'PANTONE 627 PC'); }      /* Assume 1.0 tint */
    em { color: rgb-icc(#Separation, 'PANTONE 627 PC', 1, 90%, 0%, 75%, 83%); }
                                                              /* CMYK equivalent. */
    em { color: rgb-icc(0, 91, 25, #Separation, 'PANTONE 627 PC'); }
                                                               /* RGB equivalent. */
    em { color: rgb-icc(0, 91, 25, #Separation, 'PANTONE 627 PC', 1,
                        90%, 0%, 75%, 83%); }   /* Both RGB and CMYK equivalents. */

Tint levels

0.0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1.0

When the formatted document is commercially printed, each PANTONE® color can have a separate printing with the specific ink for that PANTONE® color. The grayscale levels on the separation for each PANTONE® color correspond to the level of tint to apply.

Greyscale levels on the separation correspond to the level of tint to apply

#### Other spot colors AH Original Extension

Spot colors can be used without the AH Formatter PANTONE® Option. However, it is necessary to provide one or both of the equivalent RGB and CMYK colors for use with media that does not support separations for spot colors. If either of the RGB or CMYK equivalent is omitted, it is calculated from the components of the other equivalent color.

- rgb-icc(<R>, <G>, <B>, #Separation, <Name>, <Tint, <C>, <M>, <Y>, <K>) : Spot color with name, tint, and both CMYK and RGB fallback colors.
- rgb-icc(<R>, <G>, <B>, #Separation, <Name>, <Tint) : Spot color with name, tint, and RGB fallback color.
- rgb-icc(<R>, <G>, <B>, #Separation, <Name>, <Tint) : Spot color with name and RGB fallback color.
- rgb-icc(#Separation, <Name>, <Tint, <C>, <M>, <Y>, <K>) : Spot color with name, tint, and CMYK fallback color.

Similarly to PANTONE® colors, when the formatted document is commercially printed, each CMYK spot color can have a separate printing with the specific ink for that color. The grayscale levels in the separation for each color correspond to the level of tint to apply.

## Counters

### Numbering Chapters and Sections

Use the counter-increment, counter-reset, and content properties to automatically assign a series of numbers to chapter and section elements.

Use the counter name as the value of the counter-increment and counter-reset properties. Specifying a counter name for the content property allows the value of the counter to be inserted in the ::before or ::after pseudo-elements. The counter’s value increases each time an element applies counter-increment and resets when counter-reset is applied.

    body {
      counter-reset: ChapterNo;          /* reset chapter number counter */
    }
    h1:before {
      counter-increment: ChapterNo;      /* add 1 to chapter number counter */
      /* Insert 'n' before chapter header  (h1)  */
      content: "Chapter" counter(ChapterNo) ":　";
    }
    h1 {
      /* set h1:before and Chapter of h1 */
      string-set: Chapter content(before) content();
      counter-reset: SectionNo;          /* reset section number counter */
    }
    h2:before {
      counter-increment: SectionNo;      /* add 1 to section counter */
      /* insert 'n.m' before section header  (h2)  */
      content: counter(ChapterNo) "." counter(SectionNo) " ";
    }
    h2 {
      /* set h2:before and Section of h2 */
      string-set: Section content(before) content();
    }
    @page :left {
      @top-left {                        /* insert section title in the running
                                            head on the left page */
        content: string(Chapter);
      }
    }
    @page :right {
      @top-right {                       /* insert section title in the running
                                            head on the right page */
        content: string(Section);
      }
    }

### Inserting Characters : content property

Initial value : normal Applies to : In CSS2.1 ::before and ::after pseudo-elements. (In CSS 3, applies to all elements) Inherited : no

Use content property to insert a string just before or after an element. With CSS 3, you can also use it to specify a string as the content of the element.

- normal : Does not insert characters.
- none : Does not insert characters. (Behaves the same as normal).
- string : String to be inserted is written with double or single quotes.
- url() : Specifies the URL of an image file. The content of an element can be made into an image if content: url(image.png); is specified.
- attr() : The specified attribute value becomes the content property value.
- counter() : Inserts a counter value.
- open-quote : Inserts the first pair of quotes from the quotes property before the element.
- close-quote : Inserts the second pair of quotes from the quotes property after the element.
- no-open-quote : Does not display a quotation mark but increases the level of nesting of the quotes property by one.
- no-close-quote : Does not display a quotation mark but decreases the level of the nesting of the quotes property by one.

    .Chapter h2:before {
      content: "Chapter " counter(ChapterNo) ". ";
    }

For the content() function that is used with the string-set property, see string-set

### Incrementing Counters : counter-increment property

Initial value : none Applies to : all elements Inherited : no

Use the counter-increment property to increase the specified counter value.

- none : Does not do count.
- Counter Name : Increases the specified counter value by one.
- Counter name, space, and integers : Increases the counter value with a specified number.

    .Chapter h2 {
      …
      counter-increment: ChapterNo;
      …
    }

### Counter Reset : counter-reset property

Initial value : none Applies to : all elements Inherited : no

Use counter-reset property to reset the specified counter value.

- none : Does not reset count.
- Counter name : Sets the specified counter value to zero.
- Counter name, integer : Sets the counter value to the specified number.

    .Chapter h2 {
      …
      counter-reset: SectionNo;
      …
    }

### Page counter CSS 3

Use the counter() function to find the current page and the total number of pages.

Current page : counter(page)

Total number of pages : counter(pages)

Number of this page =

Total number of pages in this document =

    <p>Number of this page = <span style="content: counter(page)"></span></p>
    <p>Total number of pages in this document=<span style="content: counter(pages)">
    </span></p>

counter() has an optional second argument specifying the counter style. If that is omitted, it defaults to ‘decimal’.

Number of this page =

Total number of pages in this document =

    <p>Number of this page =
      <span style="content: counter(page, lower-roman)"></span></p>
    <p>Total number of pages in this document=
      <span style="content: counter(pages, upper-roman)"></span></p>

## Lists

There is not a display property value to make an element display as a list. However, display: list-item; does cause an element to generate a list item. List items each have a marker, which is the bullet, number, or other mark that identifies the list item. In CSS 2, the formatting of the marker is specified using the the list-style-type, list-style-image, list-style-position, and list-style properties. CSS 3 adds the ::marker pseudo-element so that the list item marker can be styled with the full range of CSS properties and values. The list-style-type and list-style-image properties set the default contents of the ::marker pseudo-element.

### List item marker image : list-style-image property

Initial value : none Applies to : list items Inherited : yes

Specifies an image to use as the default contents of the list item marker. If list-style-image is none or the image is invalid, the default contents are given by list-style-type instead.

- none : No image.
- <image> : Image to use as the default contents.

### List item marker type : list-style-type property

Initial value : disc Applies to : list items Inherited : yes

Specifies the default contents of the list item marker when list-style-image is none or the image is invalid. Otherwise, it is ignored.

- none : The default contents are none.
- <counter-style> : The default contents are that counter style.
- <string> : The string is used as the default contents.

### List item marker position : list-style-position property

Initial value : outside Applies to : list items Inherited : yes

list-item-position helps to control the position of the list item marker.

- inside : The marker pseudo-element is placed inline immediately before where the ::before pseudo-element would be placed.
- outside : As inside, plus the position property on the marker computes to marker.

### List item marker shorthand : list-style property

Initial value : see individual properties Applies to : list items Inherited : see individual properties

list-item is a shorthand for setting list-style-type, list-style-image, and list-style-position.

    ul.References li {
      list-style: check;
      line-height: 1.1;
    }

### List item marker : ::marker pseudo-element

::marker can be styled with the full range of CSS properties and values. The default contents are defined by the list-style-image and list-style-type properties, but that can be overridden by setting the content property of the ::marker.

### Counter styles CSS 3

A “counter style” is the definition and/or implementation of the sequence of numbers, letters, and/or symbols to use to represent a numbering sequence. CSS 1 defined a handful of counter styles based on what HTML traditionally allowed on lists. CSS Counter Styles Level 3 defines the @counter-style; rule, which provides a mechanism for defining custom counter styles, plus it defines a number of counter styles that should all (eventually) be expected to be built into browsers.

The core of a CSS 3 counter style is that it attaches a name to an algorithm for generating string representations of integer counter values. A counter style may also include properties indicating a prefix and/or suffix to add to the generated values, additional strings to indicate negative numbers, etc. The counter style can be used in the list-style-type and in the counter() and counters() functions.

The following example shows a ‘my-cjk-decimal’ counter style that is a copy of the ‘cjk-decimal’ counter style from CSS Counter Styles Level 3. As the name suggests, the counter style uses the ideographs for zero to nine to represent decimal numbers. The numbers are followed by an ideographic comma suffix. The counter style is used when numbering the items in an <ol>.

    @counter-style my-cjk-decimal {
      system: numeric;
      range: 0 infinite;
      symbols: \3007  \4E00  \4E8C  \4E09  \56DB  \4E94  \516D  \4E03  \516B  \4E5D;
      /* 〇 一 二 三 四 五 六 七 八 九 */
      suffix: "\3001";
      /* "、" */
    }
    ol.my-cjk-decimal li { list-style-type: my-cjk-decimal;  }
    …
    <ol class="my-cjk-decimal">
      <li title="1">一</li>
      <li title="2">二</li>
    </ol>

List with ‘my-cjk-decimal’ counter style

1. 一
2. 二

### Defining Custom Counter Styles : @counter-style rule

Allows definition of a custom counter style. The general form of an @counter-style rule is:

    @counter-style <counter-style-name> { <declaration-list> }

Counter style names are case-sensitive, However, the names of counter styles that are predefined in CSS Counter Styles Level 3 are matched case insensitively. A counter style name cannot match “none”, and “decimal” and “disc” cannot be defined as counter style names.

The following descriptors are allowed in the declaration list:

- system : Specifies which algorithm to use to construct the counter’s representation.
- negative : Defines how to alter the representation when the value is negative.
- prefix : Specifies a symbol that is prepended to the marker representation.
- suffix : Specifies a suffix that is appended to the marker representation.
- range : Defines the ranges over which the counter style is defined.
- pad : Specifies a symbol with which to pad counter representations that are not a minimum number of grapheme clusters.
- fallback : Fallback counter style to be used when the current counter style cannot create a representation.
- symbols : Symbols to be used by the marker-construction algorithm.
- additive-symbols : Symbols to be used by an additive marker-construction algorithm.
- speak-as : Describes how to synthesize the spoken form of a counter.Not implemented by AH Formatter.

#### Counter algorithm : system descriptor CSS 3

Initial value : symbolic

Specifies which algorithm to use to construct the counter’s representation.

- cyclic : Cycle repeatedly through provided symbols.
- numeric : Interpret the list of counter symbols as digits in a numbering system.
- alphabetic : Interpret the list of symbols as digits to an alphabetic numbering system.
- symbolic : Cycle repeatedly through provided symbols and, on each successive pass, double, triple, etc. the symbols.
- additive : Symbols represent weighted values, and the value of the number is obtained by adding symbols.
- fixed <integer>? : Run through the counter symbols once then fall back to another counter style. <integer>, if present, sets the first symbol value, otherwise the first symbol value is 1.
- extends <counter-style-name> : Use the same algorithm as the specified counter style name.

#### Formatting negative values : negative descriptor CSS 3

Initial value : "\2D" ("-" hyphen-minus)

Defines how to alter the representation when the value is negative. The value is one or two symbols. When the value is negative, the first symbol is prepended to the representation and the second symbol, if present, is appended to the representation.

#### Symbols before the marker : prefix descriptor CSS 3

Initial value : "" (the empty string)

Specifies a symbol that is prepended to the marker representation. The prefix comes before any negative sign.

#### Symbols after the marker : suffix descriptor CSS 3

Initial value : "\2E\20" ("." full stop followed by a space)

Specifies a symbol that is appended to the marker representation. The prefix comes after any negative sign.

#### Range of a counter : range descriptor CSS 3

Initial value : auto

Defines the ranges over which the counter style is defined. The value is either auto or a comma-separated list of lower and upper bounds of effective ranges. When the value is auto, the range is predetermined based on the system value. If the counter style is used to represent a value outside of its ranges, the counter style instead uses its fallback counter style.

#### Minimum counter width : pad descriptor CSS 3

Initial value : 0 ""

Specifies a symbol with which to pad counter representations that are not a minimum number of grapheme clusters. The value is an integer and a symbol. When the represention has fewer grapheme clusters than the integer value, the representation is padded with symbol. Representations that are longer than minimum are not padded.

#### Fallback counter style : fallback descriptor CSS 3

Initial value : decimal

Specifies a fallback counter style to be used when the current counter style cannot create a representation.

#### Symbols for counters : symbols and additive-symbols descriptors CSS 3

Initial value : n/a

Specifies the symbols used by the marker construction algorithm. symbols is required if system is cyclic, numeric, alphabetic, symbolic, or fixed, additive-symbols is required if system is additive.

### Predefined Counter Styles CSS 3

CSS Counter Styles Level 3 predefines some counter styles, including some that are noted as commonplace but complicated to represent with @counter-style. Ready-made Counter Styles, published by the W3C Internationalization Working Group, provides code snippets for user-defined counter styles for numbering systems used by various cultures around the world. For ease of reference, the Ready-made Counter Styles counter styles also duplicates the predefined styles from CSS Counter Styles Level 3.

AH Formatter implements the following predefined styles:Styles with * are included for backwards-compatibility with an obsolete list-style-type specification.

- numeric
  - arabic-indic
  - bengali
  - binary
  - cambodian
  - cjk-decimal
  - decimal
  - devanagari
  - fullwidth-decimal
  - gujarati
  - gurmukhi
  - kannada
  - khmer
  - lao
  - lepcha
  - lower-hexadecimal
  - malayalam
  - mongolian
  - myanmar
  - new-base-60
  - octal
  - oriya
  - persian
  - shan
  - super-decimal
  - tamil
  - telugu
  - thai
  - tibetan
  - upper-hexadecimal
- alphabetic
  - afar
  - agaw
  - ari
  - blin
  - cjk-earthly-branch
  - cjk-heavenly-stem
  - dizi
  - fullwidth-lower-alpha
  - fullwidth-lower-latin *
  - fullwidth-upper-alpha
  - fullwidth-upper-latin *
  - gedeo
  - gumuz
  - hadiyya
  - harari
  - hindi
  - hiragana
  - hiragana-iroha
  - japanese-formal
  - kaffa
  - katakana
  - katakana-iroha
  - kebena
  - kembata
  - khmer-consonant
  - konso
  - korean-consonant
  - korean-hanja-formal
  - korean-hanja-informal
  - korean-syllable
  - kunama
  - lower-alpha
  - lower-belorussian
  - lower-bulgarian
  - lower-greek
  - lower-latin *
  - lower-macedonian
  - lower-oromo-qubee
  - lower-russian
  - lower-russian-full
  - lower-serbo-croatian
  - lower-ukrainian
  - lower-ukrainian-full
  - meen
  - oromo
  - saho
  - sidama
  - silti
  - thai-alphabetic
  - tigre
  - upper-alpha
  - upper-belorussian
  - upper-bulgarian
  - upper-greek *
  - upper-latin *
  - upper-macedonian
  - upper-oromo-qubee
  - upper-russian
  - upper-russian-full
  - upper-serbo-croatian
  - upper-ukrainian
  - upper-ukrainian-full
  - wolaita
  - yemsa
- additive
  - ancient-tamil
  - armenian
  - georgian
  - greek
  - hebrew
  - japanese-informal
  - korean-hangul-formal
  - lower-armenian
  - lower-roman
  - simple-lower-roman
  - simple-upper-roman
  - upper-armenian
  - upper-roman
- symbolic
  - lower-alpha-symbolic
  - upper-alpha-symbolic
- fixed
  - circled-decimal
  - circled-ideograph
  - circled-katakana
  - circled-korean-consonant
  - circled-korean-syllable
  - circled-lower-latin
  - circled-upper-latin
  - decimal-leading-zero
  - dotted-decimal
  - double-circled-decimal
  - filled-circled-decimal
  - fullwidth-lower-roman
  - fullwidth-upper-roman
  - parenthesized-decimal
  - parenthesized-hangul-consonant
  - parenthesized-hangul-syllable
  - parenthesized-ideograph
  - parenthesized-lower-latin
  - persian-abjad
  - persian-alphabetic
- cyclic
  - box *
  - check *
  - circle
  - diamond *
  - disc
  - hyphen *
  - square
- complex
  - ethiopic-numeric
  - kansujiConverted using -ah-kansuji-style. This feature is not available in AH Formatter Lite.
  - simp-chinese-formal
  - simp-chinese-informal
  - trad-chinese-formal
  - trad-chinese-informal

## Cross-References

### Counter Reference : target-counter() function CSS 3

Use the target-counter() function to automatically add a reference to chapter and/or page number. See Counters for details.

Cross-references using the target-counter() function operate as follows:

1. In the CSS style sheet, specify a string that is to be inserted as the content of the ::before or ::after pseudo-element.
2. With target-counter(), the variable specified in the target-counter() function can be inserted using the content property. To insert a literal string, put double or single quotation marks around the string. Also, separate it from the target-counter() function with spaces.
3. Insert an <a> element as an anchor inside the sentence source reference and specify the cross-reference class name for that class. In addition, specify the source reference ID value in the href attribute.

    .ChapterRef::before {
      content: "Chapter " target-counter(attr(href url), ChapterNo) ". ";
    }
    .PageRef::after {
      content: "(page " target-counter(attr(href url), page) ")";
    }
    …
    Refer to <a class="ChapterRef PageRef" href="#Counters"> Counter </a>

### Text Contents Reference : target-text() function CSS 3

Use the target-text() function to display a textual reference as the source reference.

Cross-references using the target-text() function operate as follows:

1. Specify a character string to be inserted into the source reference in the CSS file.
2. A variable counter specified in target-text() function can be inserted using the content property and the target-text() function.
3. Insert an <a> element as an anchor inside the sentence source reference and specify the cross-reference class name for that class. In addition, specify the source reference ID value in the href attribute.
4. The character string in the anchor element replaces the reference string.

Example : “This chapter”

Referenced title replaces ‘This chapter’.

    .TitleRef {
      content: target-text(attr(href url), before) ", "
               target-text(attr(href url), content);
    }
    …
    Example <p> : “<a class="TitleRef" href="#CrossRef">This chapter</a>”</p>
    <p>Referenced title replaces ‘This chapter’.</p>

### Creating a Table of Contents

A table of contents can be created with the target-counter() function which can refer to chapter and page numbers.

An Example of Table of Contents

- Web and Paged Media
- Box Layout
- Background Decoration
- Paragraph Setting
- Multiple Columns
- Keeps and Breaks
- Character Setting

    .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);
    }
    …
    <div class="TOC">
      <ul>
        <li class="TocLevel1"><a href="#WebvsPrint">Web and Paged Media</a></li>
        <li class="TocLevel1"><a href="#BoxModel">Box Layout</a></li>
        <li class="TocLevel1"><a href="#ObjectDecorate">Background Decoration</a></li>
      </ul>
    </div>

## Footnotes and Sidenotes

### Footnote Setting : float: footnote CSS 3

When float: footnote; is specified for the float property, the contents will become a footnote The arrangement of the footnotes will be written on the bottom of the page using float: page bottom; property from 4.4.1 page float. Use the @footnote rule in the @page rule to set the footnote area. Use the pseudo-elements ::footnote-call and ::footnote-marker to set the footnote number format..

    <style>
    .Footnote { float: footnote; }
    </style>

    If footnote is specified as the <p>float value, the contents of that element
    will be footnotes <span class="Footnote"> and the footnote will be placed at
    the bottom of the page. </span>
    becomes </p>.

### Footnote Style : @footnote rule CSS 3

Use the @footnote rule in the @page rule to set the footnote area by drawing a ruled line above the footnote area.

    @page {
      @footnote {
        float: bottom page; /* the footnote area is placed as a float at the
    bottom of the page */
        border-top: thin solid black; /*set a ruled line above the footnote area */
        border-length: 30%;           /* set the length of the ruled line  (30% of
    the page area width) */
        padding-top: 0.5em;
      }
    }

### Footnote Number : ::footnote-call/::footnote-marker pseudo-elements CSS 3

Use ::footnote-call and ::footnote-marker to set the footnote number. The “footnote” counter is incremented each time that a footnote is generated.

    ::footnote-call { /*footnote call */
      content: "(" counter(footnote) ")"; font-size: 6pt; vertical-align: super;
    }
    ::footnote-marker { /* footnote number */
      content: "(" counter(footnote) ")"; font-size: 6pt; vertical-align: super;
    }

### Sidenote Setting : float: sidenote CSS 3

When float: sidenote; is specified for the float property, the contents will become a sidenote. The arrangement of the sidenotes will be written on the bottom of the page using float: page bottom; property from 4.4.1 page float. Use the @sidenote rule in the @page rule to set the sidenote area. Use the pseudo-elements ::sidenote-call and ::sidenote-marker to set the sidenote number format.

Whereas recognition of the inherent dignityQuisque suscipit ante vel eros. and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world,

    span.sidenote {
      float: sidenote;
    }

### Sidenote Style : @sidenote rule CSS 3

Use the @sidenote rule in the @page rule to set the position and extent of a sidenote area.

    @page {
      @sidenote {
        float: outside;
        clear: both;
        width: 20%;
      }
    }

## PDF Bookmarks

PDF bookmarks can be created.

### Bookmark Level : bookmark-level property CSS 3

Initial value : none Applies to : all elements Inherited : no

Sets bookmark level. Corresponds to the <h1>–<h6> headings in HTML.

### Bookmark Label : bookmark-label property CSS 3

Initial value : all elements Applies to : all elements Inherited : no

Sets bookmark label. When the bookmark label is none, the element contents become the bookmark label.

### Bookmark State : bookmark-state property CSS 3

Initial value : open Applies to : block elements Inherited : no

Bookmarks are specified as either open or closed. If bookmark-state: closed;, the bookmark is closed.

    /* Bookmarks */
    h1 { bookmark-level: 1; }
    h2 { bookmark-level: 2; bookmark-state: closed; }
    h3 { bookmark-level: 3; bookmark-state: closed; }
    h4 { bookmark-level: 4; bookmark-state: closed; }
    h5,h6 { bookmark-level: none; }

## Japanese Text Composition

### Fixed Trimming of Start and End Line Punctuation - Paragraph Start Line Indent

The basic style setting for Japanese text composition is that a fullwidth punctuation character is trimmed if it appears at the start/end of a line and/or adjacent to another fullwidth punctuation character and the start indent of a new paragraph is1em.

- Line start punctuation : Trims fullwidth punctuation glyphs.
- Line end punctuation : Trims the blank half of fullwidth punctuation glyphs.
- First line indent of a new paragraph : Indents 1em at the first line of a new paragraph.

    body {  /* setup for Japanese document composition */
      punctuation-trim: start end adjacent;
      -ah-text-justify-trim: punctuation;
      text-autospace: ideograph-numeric ideograph-alpha;
      -ah-text-autospace-width: 25%;
      hanging-punctuation: none;
    }
    p {     /* paragraph */
      text-align: justify;  /* line end align */
      text-indent: 1em;     /* set 1em for first line indent in a paragraph */
      margin: 0;            /* no margin between paragraphs */
    }

夏目 漱石 (なつめ そうせき、慶応三年一月五日 (一八六七年二月九日) ―大正五年 (一九一六年) 一二月九日) は、日本の小説家、評論家、英文学者。 本名、金之助。 『吾輩は猫である』『こゝろ』などの作品で広く知られる、森鷗外と並ぶ明治・大正時代の文豪である。 江戸の牛込馬場下横町 (現在の東京都新宿区喜久井町) 出身。 俳号は愚陀仏。

大学時代に正岡子規と出会い、俳句を学ぶ。 … (中略) …当初は余裕派と呼ばれた。

「修善寺の大患」後は、『行人』『こゝろ』『硝子戸の中』などを執筆。 「則天去私」 (そくてんきょし) の境地に達したといわれる。 晩年は胃潰瘍に悩まされ、『明暗』が絶筆となった。

フリー百科事典『ウィキペディア』より引用>

### Fullwidth Punctuation Trimming : punctuation-trim property CSS 3

Initial value : none Applies to : block elements Inherited : yes

Specifies whether to treat fullwidth punctuation at the start or end of a line.

- none : Punctuation characters are not trimmed.
- start : Punctuation characters (open parenthesis, etc.) at the start of a line are trimmed.
- end : When text-align: right and text-align: justify (or text-align-last: justify) are specified, fullwidth punctuation glyphs (closing parenthesis, etc.) at the end of a sentence are forcibly treated as halfwidth.
- allow-end : When text-align: right and text-align: justify (or text-align-last: justify) are specified, fullwidth punctuation glyphs (closing brackets, etc.) at the end of a sentence are treated as fullwidth if the text fits into one line; the characters are treated as if text does not fit into one line.
- end-except-fullstop : Behaves the same as the end value except for the following two characters.
  - U+3002 = "。 "
  - U+FF0E = "． "
- adjacent : In Japanese, the space between a fullwidth punctuation glyph and a fullwidth character is trimmed. Spaces to be treated are the following. Fullwidth punctuations glyphs and fullwidth closing parentheses are treated the same way.
  - Between fullwidth closing parenthesis and fullwidth opening parenthesis.
  - Between fullwidth closing parenthesis and fullwidth closing parenthesis.
  - Between fullwidth closing parenthesis and fullwidth middle dots.
  - Between fullwidth opening parenthesis and fullwidth opening parenthesis.
  - Between fullwidth middle dots and fullwidth opening parenthesis.
- all : Trim all parentheses, middle dots, fullwidth punctuation and treat them as halfwidth.

    /* fullwidth punctuation character is trimmed at the start or end of a
       line, or adjacent to another fullwidth punctuation character */
    punctuation-trim: start end adjacent;

「《約物〔やくもの〕》、つまり『括弧』・『句読点』の類 (たぐい) です。」

When successive punctuation (punctuation marks and brackets) glyphs come at the start or end of a line, the fullwidth characters are trimmed, improving its appearance.

「《約物〔やくもの〕》、つまり『括弧』・『句読点』の類 (たぐい) です。」

The example above shows when punctuation trim is deactivated. (Specify punctuation-trim: none;)

### Additional Compression : -ah-text-justify-trim property AH Original Extension

Initial value : none Applies to : all elements Inherited : yes

Specifies different ways of handling Japanese text compression. Trim the spaces as specified so that the text fits into a line.

- none : Do not trim Japanese text.
- punctuation : Trim fullwidth parentheses, middle dots, and punctuation glyphs.
- punctuation-except-fullstop : Behaves the same as the punctuation value except for the following two characters.
  - U+3002 = "。 "
  - U+FF0E = "． "
- kana : Trim the Hiragana and Katakana glyphs just a little bit.

      /* punctuation trimming allowed for adjusting lines */
      -ah-text-justify-trim: punctuation;

Automatically reverts the punctuation glyphs that were trimmed (before fullwidth opening parentheses and after fullwidth closing parentheses and punctuation marks), to fullwidth so the text fills the line, as described in the previous section.

### Adding Space : text-autospace property CSS 3

Initial value : none Applies to : block elements Inherited : yes

Specifies whether or not to add space between ideographic glyphs in Japanese.

- none : No extra space is added.
- ideograph-numeric : Adds a space between Kana/Kanji and Western letters.
- ideograph-alpha : Adds a space between Kana/Kanji and Western alphabetic characters.
- ideograph-parenthesis : Adds a space between Kana/Kanji and Western brackets. However, no extra space is added between Kana/Kanji and Western closing brackets or between Western opening brackets and Kana/Kanji.
- ideograph-punctuation : Adds a space between Kana/Kanji and Western punctuation. Adds a space between periods and Kana/Kanji, but does not add space between Kana/Kanji and periods. The same goes for commas.
- auto : Dependent on the system setting. Depending on the system setting, it is regarded as none or ideograph-numeric ideograph-alpha.

      /* Add space between kanji, kana, and numbers and between kanji, kana, and
    Western texts */
      text-autospace: ideograph-numeric ideograph-alpha;

「日本語にもglobalにも100%を目指すAH Formatterです」

Therefore, if a mixture of Western texts and Arabic numerals are included in Japanese sentences, a little bit of space is added between them to make it easier to read.

「日本語にもglobalにも100%を目指すAH Formatterです」

For comparison, the following example shows that setting text-autospace: none;, spacing between Japanese letters and alphabets will be de-activated.

### Amount of Space Between Japanese and Western Texts : -ah-text-autospace-width property AH Original Extension

Initial value : 25% Applies to : block elements Inherited : yes

Specifies the amount of space between Japanese and Western text in Japanese.

      /* specifies mount of space between Japanese and Western texts */
      -ah-text-autospace-width: 25%;  /* Initial value */

### Hanging Punctuation : hanging-punctuation property CSS 3

Initial value : none Applies to : block elements Inherited : yes

Specifies whether to hang punctuation marks at the start or at the end of a line.

- none : Does not hang punctuation marks at the start or at the end of a line.
- start : Hangs punctuation marks at the start of a line. If the character to be hung appears at the start of a line, it is forced to hang.
- first : Behaves as the start value but only for the first line of a paragraph.
- force-end : Hangs punctuation marks at the end of the line. If text-align: right or text-align: justify (or text-align-last: justify) is specified and the character that can be hung appears at the end of a line, it is forced to hang. If anything else is specified for text-align, it is naturally hung.
- allow-end : Hangs punctuation marks at the end of a line. If text-align: right or text-align: justify (or text-align-last: justify) is specified and the character to be hung appears at the end of the line; it is not hung if the text fits into one line. It is hung if the text doest not fit into one line. If anything else is specified for text-align, it is naturally hung.
- last : Behaves as the force-end value but only for the last line of a paragraph.

Punctuation marks allowed to hang are as follows:

- force-end, allow-end

  Japanese or Simplified Chinese

  - U+3001 = "、"
  - U+3002 = "。 "
  - U+FF0C = "，"
  - U+FF0E = "． "

  Traditional Chinese

  - U+FE50
  - U+FE51
  - U+FE52
  - U+FF64

  Other languages

  - Same as the last value
- last

  quotation marks, closing parentheses, periods, commas, and hyphens

- start, first

  quotation marks, closing parentheses, and bullet

    /* specifies whether to hang punctuation marks at the start or at the end
       of a line. */
    hanging-punctuation: none;  /* Initial value */

### Trimming Line Start Punctuation - Fullwidth/Halfwidth Line End Punctuation - First Line Indent of a New Paragraph

Allows trimming of line start punctuation, fullwidth and halfwidth line end punctuation, and indents the first line of a new paragraph 1em.

- Line start punctuation : Trim fullwidth punctuation glyphs.
- Line end punctuation : Trim fullwidth and halfwidth punctuation marks.
- First line indent of a new paragraph : Indent 1em at the first line of a new paragraph.

    body {  /* setup for Japanese document composition */
      punctuation-trim: start allow-end adjacent;
      -ah-text-justify-trim: punctuation;
      text-autospace: ideograph-numeric ideograph-alpha;
      -ah-text-autospace-width: 25%;
      hanging-punctuation: none;
    }
    p {     /* paragraph */
      text-align: justify;  /* line end align */
      text-indent: 1em;     /* set 1em for first line indent in a paragraph */
      margin: 0;            /* no margin between paragraphs */
    }

夏目 漱石 (なつめ そうせき、慶応三年一月五日 (一八六七年二月九日) ―大正五年 (一九一六年) 一二月九日) は、日本の小説家、評論家、英文学者。 本名、金之助。 『吾輩は猫である』『こゝろ』などの作品で広く知られる、森鷗外と並ぶ明治・大正時代の文豪である。 江戸の牛込馬場下横町 (現在の東京都新宿区喜久井町) 出身。 俳号は愚陀仏。

大学時代に正岡子規と出会い、俳句を学ぶ。 … (中略) …当初は余裕派と呼ばれた。

「修善寺の大患」後は、『行人』『こゝろ』『硝子戸の中』などを執筆。 「則天去私」 (そくてんきょし) の境地に達したといわれる。 晩年は胃潰瘍に悩まされ、『明暗』が絶筆となった。

フリー百科事典『ウィキペディア』より引用

### Trimming Line Start Punctuation - Fullwidth Line End Punctuation - First Line Indent of a New Paragraph.

Trim line start punctuation - Fullwidth line end punctuation only - Indent the start of a line 1em.

- Line start punctuation : Trim fullwidth punctuation glyphs.
- Line end punctuation : Trim fullwidth punctuation glyphs, others are assumed trimmed.
- First line indent of a new paragraph : Indent 1em at the first line of a new paragraph.

    body {  /* setup for Japanese document composition */
      punctuation-trim: start end-except-fullstop adjacent;
      -ah-text-justify-trim: punctuation;
      text-autospace: ideograph-numeric ideograph-alpha;
      -ah-text-autospace-width: 25%;
      hanging-punctuation: none;
    }
    p {     /* paragraph */
      text-align: justify;  /* line end align */
      text-indent: 1em;     /* set 1em for first line indent in a paragraph */
      margin: 0;            /* no margin between paragraphs */
    }

夏目 漱石 (なつめ そうせき、慶応三年一月五日 (一八六七年二月九日) ―大正五年 (一九一六年) 一二月九日) は、日本の小説家、評論家、英文学者。 本名、金之助。 『吾輩は猫である』『こゝろ』などの作品で広く知られる、森鷗外と並ぶ明治・大正時代の文豪である。 江戸の牛込馬場下横町 (現在の東京都新宿区喜久井町) 出身。 俳号は愚陀仏。

大学時代に正岡子規と出会い、俳句を学ぶ。 … (中略) …当初は余裕派と呼ばれた。

「修善寺の大患」後は、『行人』『こゝろ』『硝子戸の中』などを執筆。 「則天去私」 (そくてんきょし) の境地に達したといわれる。 晩年は胃潰瘍に悩まされ、『明暗』が絶筆となった。

フリー百科事典『ウィキペディア』より引用

### Trimming Line Start and Line End Punctuation - First Line Indent of a New Paragraph

Trim line start punctuation - Trim line end punctuation - Indent opening parentheses at the beginning of the paragraph by 0.5 em.

- Line start punctuation : Trim fullwidth punctuation glyphs.
- Line end punctuation : Trim the blank half of fullwidth punctuation glyphs.
- First line indentation : Indent 1em at the first line of a new paragraph and indent punctuation 0.5em.

    body {  /* setup for Japanese document composition */
      punctuation-trim: start end adjacent;
      -ah-text-justify-trim: punctuation;
      text-autospace: ideograph-numeric ideograph-alpha;
      -ah-text-autospace-width: 25%;
      hanging-punctuation: first;
    }
    p {     /* paragraph */
      text-align: justify;  /* line end align */
      text-indent: 1em;     /* set 1em for first line indent in a paragraph */
      margin: 0;            /* no margin between paragraphs */
    }

夏目 漱石 (なつめ そうせき、慶応三年一月五日 (一八六七年二月九日) ―大正五年 (一九一六年) 一二月九日) は、日本の小説家、評論家、英文学者。 本名、金之助。 『吾輩は猫である』『こゝろ』などの作品で広く知られる、森鷗外と並ぶ明治・大正時代の文豪である。 江戸の牛込馬場下横町 (現在の東京都新宿区喜久井町) 出身。 俳号は愚陀仏。

大学時代に正岡子規と出会い、俳句を学ぶ。 … (中略) …当初は余裕派と呼ばれた。

「修善寺の大患」後は、『行人』『こゝろ』『硝子戸の中』などを執筆。 「則天去私」 (そくてんきょし) の境地に達したといわれる。 晩年は胃潰瘍に悩まされ、『明暗』が絶筆となった。

フリー百科事典『ウィキペディア』より引用

### Horizontal-in-Vertical Composition (TATECHUYOKO)

Specifies words in the horizontal orientation within a vertical writing mode. (Numbers, etc. in a vertical line are written in a horizontal orientation).

    /* horizontal-in-vertical composition */
    span.TateChuYoko {
      display: inline-block; /* create a small block in the middle of a row */
      writing-mode: lr-tb;   /* set this small block in horizontal orientation*/
      text-align: center;    /* align text to center */
      text-indent: 0;        /* do not add text indent (erase text-indents from
                                the paragraph p) */
      line-height: 1;        /* set line gap not to overlap above and below
                                TATECHUYOKO (horizontal-in-vertical composition)
                             */
    }

    <div class="VerticalTextBlock">
      …
      <p>縦書きの中に「<span class="TateChuYoko">'08</span>年
      <span class="TateChuYoko">12</span>月<span class="TateChuYoko">8</span>日」
      のように部分的に数字などを横書きにすることを「縦中横」といいます。 </p>
    </div>

縦書きの中に「'08年12月8日」のように部分的に数字などを横書きにすることを「縦中横」といいます。

### Ruby and Emphasis Marks

In XHTML, when using the <ruby> element, emphasis marks can be applied to the ruby characters (Furigana). Specify the base character (characters that are to be applied with ruby) with the <rb> element and specify the ruby characters (the contents of the ruby) with <rt> element.

An example of the ruby application using CSS is shown below. Use -ah-margin-before AH Original Extension in vertical and horizontal writing modes.

    <p><ruby><rb>吾輩</rb><rp>(</rp><rt>わがはい</rt><rp>)</rp></ruby>は猫である。
    </p>
    <p>名前はまだ無い。どこで生れたかとんと<ruby><rb>見当</rb><rp>(</rp><rt>けんとう
    </rt><rp>)</rp></ruby>がつかぬ。</p>

Horizontal Writing Mode

吾輩 (わがはい) は猫である。

名前はまだ無い。どこで生れたかとんと見当(けんとう)がつかぬ。

Vertical Writing Mode

吾輩 (わがはい) は猫である。

名前はまだ無い。 どこで生れたかとんと見当 (けんとう) がつかぬ。

Use middle dots and punctuations as emphasis marks for ruby characters. The <ruby> element setting changes when using emphasis marks.

    /* emphasis mark */
    ruby.kenten {
      -ah-margin-before: -0.7em;
    }
    ruby.kenten > rt {
      font-size: 70%;
    }

    <p>横書きでは、<ruby class="kenten"><rb>圏</rb><rp>(</rp><rt>・</rt><rp>)</rp>
    </ruby><ruby class="kenten"><rb>点</rb><rp>(</rp><rt>・</rt><rp>)</rp></ruby>
    は、ルビ文字に中点を使います。</p>

横書きでは、圏(・) 点 (・) は、ルビ文字に中点を使います。

### Japanese Fonts

Example of Japanese font as shown below:

- Ryumin R font-family: "A-OTF Ryumin Pro R-KL", serif;
- Gothic BBB- Medium font-family: "A-OTF Gothic BBB-Medium Pro Medium", sans-serif;
- Shin Go B font-family: "A-OTF Shin Go Pro B", sans-serif;
- Midashi Go MB31 font-family: "A-OTF Midashi Go MB31 Pro MB31", sans-serif;
- Midashi Min MA31 font-family: "A-OTF Midashi Min MA31 Pro MA31", serif;

There are practically no italic types in Japanese fonts, so even if italic or oblique is specified, it will display the same thing. Even in Japanese fonts, there are many fonts that have italics for alphabets.

italic and oblique

## Page Setting

Page and Margin Area

### Western Page Design

Western page design tradition places the page area above the center of the page, since the optical center of the page is considered to be above the geometric center. The gutter margin is traditionally narrower than the fore-edge margin. This is to make it easier for the eye to move from one page to the other. The wider fore-edge allows room for the thumbs to hold the page. The two gutter margins, taken together, balance the wider fore-edge margin. The height of the page area matches the width of the page.

Traditional Western page design

In practice, page designs vary quite a lot. The printed ‘page’ now includes package inserts for medications, marketing brochures, children’s books, parts catalogs, and much more besides. The economics of printing or the need to print on A4 or Letter size paper on an office printer can influence the page design. Assymetric page design, where the page area has the same position on facing pages, was once a radical idea but now is not uncommon. Furthermore, novels, in particular, are often sold in multiple editions with different page sizes that each reuse the same page areas with reduced margins.

### Japanese Page Design

Japanese can be formatted either with horizontal lines of text and pages progressing from left to right or with vertical lines of text and pages progressing from right to left. Some formatted documents mix the two. Different types of publication are predominately one writing mode or the other: for example, government documentation and educational materials both predominately use horizontal text, whereas novels predominately use vertical text.

For both writing modes, the page area is typically centered on the page media and has proportions similar to the proportions of the media. The best line length is around 52 characters per line for vertical text and around 40 characters per line for horizontal text.

In Japanese text composition, it is common to set the width of the page area in fullwidth characters. Using em for the width property in the @page rule sets the width in characters. Setting the left and right margin values to auto aligns the page area in the center of the page.

    @page {
     size: A4;
     width: 43em;        /* set width of page area to 43 em */
     margin-top: 30mm;
     margin-bottom: 30mm;
     margin-left: auto;  /* position page area in the center of the page */
     margin-right: auto;
    }

### @page Rule

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

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

### Page Size : size property CSS 3

Specify the width and height of the page with the size property.

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

    @page {
      size: 4in 6in;
    }

Defined page names such as A5, A4, A3, B5, B4, JIS-B5, JIS-B4, letter, legal, and ledger can be used for size propertyThe size property uses the names defined in the ISO Standard and, since the dimensions of the ISO B series and JIS B series are different, JIS-B5 and JIS-B4 are added as Antenna House extensions that are not yet in a published CSS Working Draft..

    @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 the keyword landscape.

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

### Margin : margin property

Initial value : See individual properties Applies to : all elements Inherited : no

The margin property is a shorthand for margin-top, margin-bottom, margin-left, and margin-right.

- When there is one value : the margin value applies to (up, down, left, right).
- When there are two values : the margin values apply to (top, bottom) and (left, right).
- When there are three values : the margin values apply to top, left/right, and bottom.
- When there are four values : the margin values apply to top, right, bottom, left.

Specify page margins with the margin property on a @page rule.

    @page {
       margin: 10%;   /* Top, bottom, left, right margins each take up 10% of the
    page width */
    }

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

If not specified, the initial value of margin-* is zero In AH Formatter, the initial value can be set to any value. Since the default value is set to 2 cm, the initial value will not be zero.. margin-* specified on the (X)HTML body element is taken inside the page area. If margin-* is specified for both @page and html (including body element) elements in (X)HTML, the margins will be added together.

### Named Page : page property CSS 3

Initial value : auto Applies to : boxes that create class 1 break points Inherited : no

Several types of named @page rules can be created, and the page property enables switching between them within one document.

    @page Landscape {   /* "Landscape" named page */
      size: A4 landscape;
    }
    @page Portrait {    /* "Portrait" named page */
      size: A4;
    }
    table.WideTable {
      page: Landscape;  /* place a large table on the side of a "Landscape" page */
    }
    html {
      page: Portrait;   /* Use a "Portrait" page as the default */
    }

    <p>Portrait page</p>

    <table class="WideTable" border="1" style="width:100%">
    <tr>
    <td>1</td>
    …
    <td>18</td>
    </tr>
    </table>

page property selects name page

### Constraining The Number of Pages : -ah-force-page-count property AH Original Extension

Initial value : auto Applies to : CSS @page without any selectorsThis restriction may be removed in a future AH Formatter version. Inherited : no

Imposes a constraint on the total number of pages for the document. If the constraint is not satisfied, an additional page (or additional pages) will be added at the end of the pages. Reasons for constraining the number of page include: an office document printed on both sides of the paper may need an even number of pages; a document printed as a booklet may need a multiple of four pages; or a document printed by a commercial printer may be printed with 8, 16, 32, or 64 pages on one sheet of paper that is then folded and trimmed to become part of a book.

- auto : Do not force any page count.
- even : Force an even number of pages.
- odd : Force an odd number of pages.
- doubly-even : Force a doubly-even (multiple of four) number of pages.
- doubly-even-document : Force a doubly-even (multiple of four) number of pages.
- end-on-even : Force the last page to be an even page.
- end-on-doubly-even : Force the last page to be a doubly-even page.
- end-on-odd : Force the last page to be an odd page.
- even-document : Force the last page to be an odd page.
- doubly-even-document : Force the last page to be a doubly-even page.
- odd-document : Force the last page to be an odd page.
- [ end-on | document ] <number> [ <number> ] : Force the number of pages to be a multiple of the first number plus the second number, if present.This feature is not available in AH Formatter Lite.
- no-force : Do not force either an even number or an odd number of pages.

For example, if the document would generate 5 pages:

- -ah-force-page-count: even;

  Equivalent to -ah-force-page-count: 2;.

- -ah-force-page-count: odd;

  Equivalent to -ah-force-page-count: 2 1;.

- -ah-force-page-count: doubly-even;

  Equivalent to -ah-force-page-count: 4;.

- -ah-force-page-count: end-on-doubly-even;

  Equivalent to -ah-force-page-count: end-on 4;.

- -ah-force-page-count: end-on 2;

  Total number of pages is 6 with 1 blank page.

- -ah-force-page-count: end-on 4;

  Total number of pages is 8 with 3 blank page.

- -ah-force-page-count: end-on 4 1;

  Total number of pages is 5 with 0 blank pages.

- -ah-force-page-count: end-on 4 3;

  Total number of pages is 7 with 2 blank pages.

- -ah-force-page-count: end-on 6 5;

  Total number of pages is 5 with 0 blank pages.

- -ah-force-page-count: end-on 6 4;

  Total number of pages is 10 with 5 blank pages.

### Crop and Registration MarksThe crop mark feature is not available in AH Formatter Lite.

An @page rule defines a page box, but the page box may be printed on a page sheet that is larger than the page box. A common reason for this is so images and other content can extend up to the edge of the page box. A physical device such as a printer typically has a non-printable area around the edge of the page sheet where it is not capable of printing reliably, if at all. Printing the page box on a larger page sheet then trimming the page sheet to the size of the page box avoids problems with the non-printable area. Extending images, etc., into the bleed area outside the page box avoids problems if the trimming to size is inaccurate.

Crop and registration marks are printed outside the page box and are used as guides when trimming the page sheet to size and for checking that content printed on both sides of a duplex sheet is aligned correctly. Other information that may be printed outside the page box includes color bars for checking color fidelity and information identifying the page, its containing document, its version number, etc.

Crop mark terms

#### Printer marks display : marks property CSS 3

Initial value : none Applies to : CSS @page Inherited : no

Specifies whether to print crop marks when printing.

- crop : Outputs crop marks.
- cross : Outputs cross marks and registration marks.
- <uri-specification> : Location of an SVG, or similar, image representing custom printer marks, color bars, etc. Multiple images can be specified. AH Original Extension

Cross marks and crop marks

You can output crop marks at the four corners and/or cross marks at the centers of the four sides of the page box. Crop marks indicate the alignment for cutting to the finished size, and cross marks can help with registration for multi-color printing as well as for registration between the front and back of a duplex sheet. You can also or alternatively output custom printer marks by specifying the location of one or more external images.

The printer marks feature is not available in AH Formatter Lite.

    @page {
      size: B5; /* ISO B5 (176mm 250mm) */
      margin: 28mm 21.325mm;
      marks: crop cross;    /* printer marks to display */
      -ah-crop-offset: 14mm;    /* distance from the page box edge to the
                                          page sheet edge */
      -ah-printer-marks-line-color: auto;    /* printer marks line color */
      -ah-printer-marks-line-length: 10mm;   /* printer marks line length  */
      -ah-printer-marks-line-width: 0.12mm;  /* printer marks line width */
      bleed: 3mm;      /* page bleed length */
    }

#### Printer marks visibility : -ah-crop-area-visibility property AH Original Extension

Initial value : hidden Applies to : CSS @page Inherited : no

Specifies whether to display the area that extends beyond the finished page size.

- hidden : Crop area is hidden.
- visible : Crop area is visible.

#### Printer marks line color : -ah-printer-marks-line-color property AH Original Extension

Initial value : auto Applies to : CSS @page Inherited : no

Specifies the line color of printer marks.When the value is set to auto, the registration color is used.

#### Printer marks line length : -ah-printer-marks-line-length property AH Original Extension

Initial value : auto Applies to : CSS @page Inherited : no

Specifies the line length of printer marks. When the value is set to auto, the length is dependent on the system setting. The printer mark default length is 10mm, but this can be adjusted.

#### Printer marks line width : -ah-printer-marks-line-width property AH Original Extension

Initial value : auto Applies to : CSS @page Inherited : no

Specifies the line width of printer marks. When the value is set to auto, the length is dependent on the system setting. The printer mark default width is 0.2pt, but this can be adjusted.

#### Distance from the end to the trim size of the output medium : -ah-crop-offset property AH Original Extension

Initial value : 0 Applied to : CSS @page Inherited : no

Specifies the distance from the physical end to the trim size of the output medium.

### Page bleed areaThe page bleed feature is not available in AH Formatter Lite.

A graphic, or similar, may bleed off (or be bled-out from) the cut edge of the page. Extending an image to the edge of the page is often a useful effect. If the image extends just to the edge of the trimmed page, inaccurate trimming could leave a white area along the outer edge of the image. Extending the image past the edge of the page then trimming to size avoids problems from inaccuracy when trimming.

Page bleed

#### Bleed region width : bleed property CSS 3

Initial value : 0 Applied to : CSS @page Inherited : no

Specifies the width of the bleed region for trimming. The bleed region is taken outside the page box. By specifying a negative value to the margin box margin, the range of the block can be extended to the bleed region.

## Headers and Footers

### Margin Box CSS 3

The page header and page footer are assigned to margin box areas around the page.

Margin boxes are named according to their position around the page, as follows: @top-left, @top-center, @top-right, @bottom-left, @bottom-center, and @bottom-right.

@top-left-corner | @top-left | @top-center | @top-right | @top-right-corner
@left-top | (page-area) | @right-top
@left-middle | @right-middle
@left-bottom | @right-bottom
@bottom-left-corner | @bottom-left | @bottom-center | @bottom-right | @bottom-right-corner

Location of each margin box

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

### Running Headers and Page Numbers

#### Running header setting : string-set property and string() function CSS 3

Character strings from the headings in the main body can be displayed in the page header.

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

    h1 { string-set: Chapter content(); }

#### Variable strings : string-set property CSS 3

Initial value : none Applies to : all elements, but not pseudo-elements Inherited : no

Use the string-set property to make a named variable for a string.

The string-set value is pairs of a variable name and followed by the content list stored in the named string. Strings defined with a string-set value are referenced as content: string(Chapter); in running headers.

The content list may be one or more of the following, in any order:

- <string> : a string.
- <counter()> : a counter() function. See Counters for details.
- <counters()> : a counters() function.
- <content()> : a content() function. Allowed values are:
  - content() : string value of the element.
  - content(before) : string value of the ::before pseudo-element.
  - content(after) : string value of the ::after pseudo-element.
  - content(first-letter) : first letter of the element.
- attr(<attr-name>) : string value of the attribute <attr-name>.
- -ah-attr-from(<from-name>, <attr-name> <type-or-unit>? [, <fallback> ]? ) : string value of the attribute <attr-name> on the ancestor <from-name> element. AH Original Extension

    h1 {
      /*set contents of h1:before and h1 in Chapter content(before) content()*/
      string-set: Chapter content(before) content();
    }

#### string() CSS 3

Used to copy the value of a named string into the document.

Strings defined with a string-set value are referenced as content: string(Chapter); in running headers.

The required first value is the name of the string.

    @top-right {   /* Title in right-hand page header. */
      content: string(Chapter);
    }

If multiple elements on one page each set the value of a named string, then the named string may have several values on that page. The optional second argument of string() specifies which of the possible values to use:

- start : use the named string’s entry value for that page.
- first : if there are any assignments on the page, use the value of the first assignment, otherwise use the start value.
- last : use the named string’s exit value for the page.
- first-except : similar to first except that the empty string is used on the page where the value is assigned.

    @page Index:right {
      @top-left {
        content: string(IndexTerm, first);
      }

      @top-right {
        content: string(IndexTerm, last);
      }
    }

#### Move elements to header/footer : running() position value CSS 3

Use position: running(name); to make an element available for display in a margin box. The name argument is the name by which the element is referred to in element() functions.

An element with position: running(name); is not shown in its natural place: it is treated as if display: none; had been set.

    p.Title {
        position: running(Title);
        text-indent: 0;
    }

#### Insert a running element: element() CSS 3

Used to copy a running element into a margin box.

Elements taken out of their natural place using position: running(name); are referenced as content: element(name); in running headers. A running element can hold one element, including its pseudo-elements and its descendants.

The required first value is the name of the running element. Unlike string(), element() cannot be combined with any other values.

    @top-left {   /* Title in left-hand page header. */
      content: element(Title);
    }

A running element inherits through its normal place in the document.

If multiple elements on one page each set the value of a running element, then the running element may have several values on that page. The optional second argument of element() specifies which of the possible values to use:

- start : use the running element’s entry value for that page.
- first : if there are any assignments on the page, use the value of the first assignment, otherwise use the start value.
- last : use the running element’s exit value for the page.
- first-except : similar to first except that the empty string is used on the page where the value is assigned.

#### Page number : counter(page) CSS 3

counter(page) is used for generating page numberscounter() was defined by CSS 2.1, but in CSS 3, a preassigned counter for page numbers is introduced in the page context..

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

#### Total pages : counter(pages) CSS 3

Total pages can be output together with the current page number, for example “”.

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

### Left and Right Page Headers: :left and :right

In the left and right page, you can set left and right margins and page number as well as headersUse string(Title) and string(Chapter), see "The display contents of "string variable : string-set property". . These may be different again for the first page. You can also hide the titles and page number from the left-hand side of the left pages and the right-hand side of the right pages when it is the first page.

When used together with named pages, the style of the left and right pages and the first page of each named page can be specified.

    @page Chapter:left {     /* left page setting */
      margin-left: 23mm;
      margin-right: 27mm;

      @top-left {     /* book title in the running head of the left page */
        content: string(Title);
      }
      @bottom-left {  /* page number */
        content: counter(page);
      }
    }

    @page Chapter:right {    /* right page setting */
      margin-left: 27mm;
      margin-right: 23mm;

      @top-right {    /* section title in the running head of the right page */
        content: string(Section);
      }
      @bottom-right { /* page number */
        content: counter(page);
      }
    }

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

### Last and only pages: :last and :only AH Original Extension

AH Formatter also implements :last and :only pseudo-classes for making page selectors that match on the last and only pages, respectively, of the document.

### Progression Direction : writing-mode property CSS 3

Initial value : lr-tb Applies to : all elements Inherited : yes

Specify writing-mode on the root element to set the character, line, and page progression direction of the entire document. The Initial value is writing-mode: lr-tb (left-to-right, top-to-bottom): the character progression direction is from left to right, the line and block progression directions are from top to bottom, and the pages go from left to rightThe writing-mode on the root element is inherited by the page box, and is then inherited by the margin box..

To set documents in Japanese vertical writing mode, specify writing-mode: tb-rl: The character progression direction is from top-to-bottom, line and block from right-to-left, and pages from right to left.

- lr-tb : Writing mode progression direction is from left to right, the line and block from top to bottom. Used in conventional horizontal writing.
- rl-tb : Writing mode progression direction is from right to left, the line and block from top to bottom. Used in right to left languages such as Arabic and Hebrew.
- tb-rl : Writing mode progression direction is from top to bottom, the line and block from right to left. Used in vertical writing such as Japanese.

    body {
      writing-mode: tb-rl;  /* vertical writing */
    }

## PDF Output

PDF (Portable Document Format) is the most popular ouput format for paged media. AH Formatter provides multiple extensions for taking advantage of PDF features.

### PDF versions

The PDF specification has gone through multiple versions since its first version was published in 1993. Each release has added new features. All non-deprecated features in a PDF version are also included in subsequent versions. A PDF file includes a header identifying the PDF version to which it conforms. A PDF reader will attempt to read any PDF file, even if the file’s version is more recent than the version that the reader implements.

PDF specification versions
Version | Year | Acrobat Reader version
--- | --- | ---
1.3 | 2000 | 4.0
1.4 | 2001 | 5.0
1.5 | 2003 | 6.0
1.6 | 2004 | 7.0
1.7 | 2008 | 8
2.0 | 2017 | –

There are also specialized subsets of PDF that have been standardized by ISO. Some of these have multiple versions that are based on different PDF versions.AH Formatter does not generate either PDF/E or PDF/VT.

- PDF/X : “PDF for Exchange”.
- PDF/A : “PDF for Archiving”.
- PDF/E : “PDF for Engineering”.
- PDF/VT : “PDF for exchange of variable data and transactional (VT) printing”.
- PDF/UA : “PDF for Universal Accessibility”.

### Tagged PDF

“Tagged PDF” is not a separate PDF specification. It refers to PDF that includes additional information about the logical structure of the document. Tagged PDF was first defined in PDF 1.4.

The text, graphics and images in Tagged PDF can be extracted and reused for other purposes, for example, to make content accessible to users with visual impairments. PDF/UA files are Tagged PDF files that also conform to additional requirements.

AH Formatter embeds PDF tags (StructElem) for HTML/CSS elements and pseudo-elements as shown in the following table:

HTML element | PDF element
--- | ---
html | Document
div | Div
h1 | H1
h2 | H2
h3 | H3
h4 | H4
h5 | H5
h6 | H6
p | P
ul | L
ol | L
li | LI
li::marker | Lbl
dl | L
dt | Lbl
dd | LBody
blockquote | BlockQuote
caption | Caption
table | Table
tr | TR
td | TD
th | TH
thead | THead
tfoot | TFoot
tbody | TBody
ruby | Ruby
rb | RB
rt | RT
span | Span
img | Figure
a[href] | Link
other block elements | Div
other inline elements | Span

#### Custom PDF Tag name : -ah-pdftag property AH Original Extension

Initial value : Empty string Applied to : all elements Inherited : no

String to use as the PDF Tag name for the current element when generating Tagged PDF. If the provided name is not one of the standard PDF Tag names, the role map in the generated PDF will include a mapping from the name to the default PDF Tag name that AH Formatter would generate for the current element. If the provided name is one of the standard PDF Tag names, the name will be used as-is.

    div.TOC {
      page-break-before: right;
      page: TOC;
      -ah-pdftag: 'Sect';
    }

<div class="TOC"> is tagged as 'Sect' in the PDF

### PDF/X

PDF/X, defined in ISO 15930, is a subset of PDF that is intended for prepress graphics exchange.PDF/X output is not available with AH Formatter Lite. The intention is that all of the information required for printing is included in the PDF file. AH Formatter supports multiple PDF/X variants:

- PDF/X-1a:2001 (ISO 15930-1:2001)
  Based on PDF 1.3.
- PDF/X-3:2002 (ISO 15930-3:2002)
  Based on PDF 1.3.
- PDF/X-1a:2003 (ISO 15930-4:2003)
  A subset of PDF/X-3:2003 that is based on PDF 1.4.
- PDF/X-2:2003 (ISO 15930-5:2003)
  A superset of PDF/X-3:2003 that is based on PDF 1.4.
- PDF/X-3:2003 (ISO 15930-6:2003)
  Based on PDF 1.4.
- PDF/X-4:2010 (ISO 15930-7:2008)
  Based on PDF 1.6.

The following shows the main features for the PDF/X variants.

Requirement | PDF/X-1a | PDF/X-2 | PDF/X-3 | PDF/X-4
--- | --- | --- | --- | ---
All fonts must be embedded | yes | yes | yes | yes
The output intent must be specified | yes | yes | yes | yes
ICC profiles specified as the output intent must be embedded | no | no | no | yes
Supports CMYK, Spot color | yes | yes | yes | yes
Supports Grayscale | yes | yes | yes | yes
Supports RGB | no | yes | yes | yes
Supports transparency | no | no | no | yes
Supports PDFs with encryption; setting of password, the restriction for printing and the restriction for changing must not be done | no | no | no | no
PDF can contain links or annotations, etc. in the print area | no | no | no | no

### PDF/A

PDF/X, defined in ISO 19005, is a subset of PDF that is intended for long-term preservation of electronic documents.PDF/A output is not available with AH Formatter Lite.

Features of supported PDF/X variants
Requirement | PDF/A-1a | PDF/A-1b | PDF/A-2a | PDF/A-2b | PDF/A-2u | PDF/A-3a | PDF/A-3b | PDF/A-3u
--- | --- | --- | --- | --- | --- | --- | --- | ---
All fonts must be embedded | yes | yes | yes | yes | yes | yes | yes | yes
ICC profiles must be embedded | yes | yes | yes | yes | yes | yes | yes | yes
Files must be tagged | yes | no | yes | no | no | yes | no | no
Files must include XMP metadata | yes | yes | yes | yes | yes | yes | yes | yes
Files may include encryption | no | no | no | no | no | no | no | no
Files may include LZW Compression | no | no | no | no | no | no | no | no
Files may include Transparent images | no | no | yes | yes | yes | yes | yes | yes
Files may refer to the external content | no | no | no | no | no | no | no | no
Files may include JavaScript | no | no | no | no | no | no | no | no
Unicode must be used for text | no | no | yes | no | yes | yes | no | yes
Any files other than PDF/A can be embedded | no | no | no | no | no | yes | yes | yes

### PDF/UA

PDF/UA, defined by ISO 14289-1, is the specification intended for improving the accessibility of PDF based on the ISO 32000-1 (PDF 1.7) specification.PDF/UA output is not available with AH Formatter Lite.

The main features of PDF/UA are:

- Contents must be tagged in logical reading order.
- Meaningful graphics, annotations and numerical formulas must include alternate text descriptions.

  Alternate text descriptions for graphics or numerical formulas can be specified by the -ah-alttext property, links can be specified by the -ah-annotation-contents property.

- Security settings must allow assistive technology to have access to the content.
- Including bookmarks in the PDF/UA is recommended.
- Annotations, links and multimedia may be included.
- The language of the document must be specified.
- All fonts must be embedded.

#### Matterhorn Protocol

The Matterhorn Protocol, published by the PDF Association, is a checklist of all the ways that it is possible for a PDF to not conform to PDF/UA. The Matterhorn Protocol documenthttps://www.pdfa.org/publication/the-matterhorn-protocol-1-02/ consists of 31 Checkpoints comprised of 136 Failure Conditions. Some failure conditions can be checked programmatically, but others require human review.

Matterhorn Protocol failure conditions for tables

#### PAC 3 PDF/UA checker

PDF Accessibility Checker 3 (PAC 3)http://www.access-for-all.ch/en/pdf-lab/536-pdf-accessibility-checker-pac-3.html by Access For All is a freeware utility for Windows that checks PDF files for PDF/UA conformance. The program implements the Matterhorn Protocol checks. When you open a PDF file in PAC 3, the program runs its checks and shows a summary of the results. Since there is no interactive checking, the program can only warn about some of the failure conditions that require human checking. Unfortunately, the program also has some bugs in its checking.

PAC 3 PDF/UA checker

### Document properties AH Original Extension

This extension uses custom <meta> elements, for example:

    <meta name="document-title" content="The document title"/>
    <meta name="subject" content="The document subject"/>
    <meta name="author" content="The author"/>
    <meta name="keywords" content="Comma, separated, keywords, list"/>
    …

<meta> with the following name values provide information that is stored in the document catalog in the PDF.author-title, description-writer, copyright-status, copyright-notice, copyright-info-url, and xmp are not available with AH Formatter Lite.

- document-title : Title of the document.
- subject : Subject of the document.
- author : Name of the person who created the document.
- author-title : Title or some other information about the author.
- description-writer : Author of the document description.
- keywords : Comma-separated list of keywords.
- copyright-status : Copyright status. Must be Unknown, Copyrighted, or PublicDomain.
- copyright-notice : Copyright information.
- copyright-info-url : URL of the copyright information.
- xmp : URL of an XMP containing property information.

Document properties shown by Acrobat Reader

#### Extensible Metadata Platform (XMP)

XMP is a standard XML format for representing metadata about a file or image. It was originally developed by Adobe, and it is now also ISO 16684-1:2012. Because there is a standard, the XMP, for example, that is embedded in a photo taken by a digital camera can be altered or augmented by the photo-editing program that edits the image. Also, for example, the XMP from every image in a PDF file could be included in the XMP that is embedded in the PDF file.

The XMP standard itself is based, in part, on other metadata standards such as Dublin Core and RDF.

Any XMP file that passes the sanity check implemented in AH Formatter may be embedded in the PDF that AH Formatter generates.

A portion of the XMP extracted from a PDF file is shown below, and the following figure shows the same XMP as presented by Acrobat.

    <?xpacket begin="ï»¿" id="W5M0MpCehiHzreSzNTczkc9d"?>
    <x:xmpmeta xmlns:x="adobe:ns:meta/">
    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
    <rdf:Description rdf:about=""
       xmlns:pdfuaid="http://www.aiim.org/pdfua/ns/id/">
    <pdfuaid:part>1</pdfuaid:part>
    </rdf:Description>
    <rdf:Description rdf:about=""
       xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/">
    <xmpMM:DocumentID>uuid:3927056E-B834-D04A-A255-AF8CBE218E59</xmpMM:DocumentID>
    <xmpMM:VersionID>1</xmpMM:VersionID>
    <xmpMM:RenditionClass>default</xmpMM:RenditionClass>
    </rdf:Description>
    <rdf:Description rdf:about="" xmlns:pdf="http://ns.adobe.com/pdf/1.3/">
    <pdf:Producer>Antenna House PDF Output Library 6.5.1213
    (Windows (x64))</pdf:Producer>
    <pdf:Keywords>CSS, formatting</pdf:Keywords>
    …

XMP properties viewed in Acrobat

### Page display AH Original Extension

<meta> with the following name values control how the PDF is displayed in a reader. Unless otherwise noted, the allowed content values are true and false, and the default if the <meta> is omitted is false.

- pagemode : What is displayed when the document is opened. Must be UseNone, UseOutlines, UseThumbs, FullScreen or UseOC.
- pagelayout : Page layout when the document is opened. Must be SinglePage, OneColumn, TwoColumnLeft, TwoColumnRight, TwoPageLeft or TwoPageRight.
- hidetoolbar : Whether to hide the toolbar when the document is opened.
- hidemenubar : Whether to hide the menu bar when the document is opened.
- hidewindowui : Whether to hide user interface (UI) elements such as a scroll bar when the document is opened.
- fitwindow : Whether, when the document is opened, to change the size of the document window to fit the page size.
- centerwindow : Whether to position the document’s window in the center of the screen when the document is opened.
- displaydoctitle : Whether the window’s title bar should display the document title.
- openaction : Either the destination within the document at which the document is to be opened or a JavaScript program to execute when the document is opened.

## References

So far, this tutorial has briefly introduced the practical uses of CSS page composition. AH Formatter currently implements the following related specifications:

- CSS 2.1 (CSS Level 2 Revision 1)
  W3C Candidate Recommendation https://www.w3.org/TR/CSS21/
- CSS 3 Backgrounds and Borders Working Draft https://www.w3.org/TR/css3-background/
- CSS 3 GCPM (Generated Content for Paged Media)
  Working Draft https://www.w3.org/TR/css3-gcpm/
  Editor’s Draft http://dev.w3.org/csswg/css3-gcpm/
- CSS 3 Multi-column layout Working Draft https://www.w3.org/TR/css3-multicol/
- CSS 3 Paged Media Final Draft https://www.w3.org/TR/css3-page/
- CSS 3 Lists Working Draft https://www.w3.org/TR/css3-lists/
- CSS 3 Text Working Draft https://www.w3.org/TR/css3-text/
  Editor’s Draft http://dev.w3.org/csswg/css3-text/
- CSS 3 Text Layout Editor’s Draft http://dev.w3.org/csswg/css3-text-layout/
- CSS 3 Namespaces W3C Candidate Recommendation https://www.w3.org/TR/css3-namespace/
- CSS Color Module Level 3 W3C Recommendation https://www.w3.org/TR/css3-color/
- CSS Counter Styles Level 3 W3C Working Draft https://www.w3.org/TR/css-counter-styles-3/
- CSS Fonts Module Level 3 W3C Candidate Recommendation https://www.w3.org/TR/css-fonts-3/
- HTML 5 — A Vocabulary and Associated APIs for HTML and XHTML
  W3C Recommendation https://www.w3.org/TR/html5/
- ISO 16684-1:2012, Graphic technology -- Extensible metadata platform (XMP) specification -- Part 1: Data model, serialization and core properties
  ISO Standard https://www.iso.org/standard/57421.html
- Ready-made Counter Styles
  W3C Working Group Note http://www.w3.org/TR/predefined-counter-styles/
- Requirements for Japanese Text Layout W3C Working Group Note http://www.w3.org/TR/jlreq/
- Requirements for Latin Text Layout and Pagination
  W3C Working Draft https://www.w3.org/TR/dpub-latinreq/
- Selectors Level 3 W3C Recommendation https://www.w3.org/TR/css3-selectors/

AH Formatter can also format using XSL-FO:

- Extensible Stylesheet Language (XSL) Version 1.1
  W3C Recommendation https://www.w3.org/TR/xsl/

## Index

- cmyk()
  Functional notation for a CMYK color
- cmyka()
  Functional notation for a CMYK color with an alpha component
- counter()
  The value of a counter
- counter(footnote)
  Counter that is automatically incremented each time that a footnote is generated
- counter(page)
  Counter that is automatically created and incremented by 1 on every page of the document
- counter(pages)
  Total number of pages in the document
- device-cmyk()
  Functional notation for a CMYK color
- element()
  Used to copy a running element into a margin box
- leader()
  Inserts a leader
- rgb()
  Functional notation for an RGB color
- rgb-icc()
  Color from a specific color space
- rgba()
  Functional notation for an RGB color with an alpha component
- running()
  Names an element as a running element
- string()
  Used to copy the value of a named string into the document
- target-counter()
  Retrieves the value of the innermost counter with a given name
- target-text()
  Retrieves the text value of an element

- @bottom-center
  Box centered horizontally between the page’s left and right border edges
- @bottom-left
  box filling the bottom page margin between the bottom-left-corner and bottom-center page-margin boxes
- @bottom-left-corner
  Box defined by the intersection of the bottom and left margins of the page box
- @bottom-right
  Box filling the bottom page margin between the bottom-center and bottom-right-corner page-margin boxes
- @bottom-right-corner
  box defined by the intersection of the bottom and right margins of the page box
- @counter-style
  Allows definition of a custom counter style
- @font-face
  Allows for linking to fonts that are automatically fetched and activated when needed
- @footnote
  Describes a footnote area
- @import
  Allows import of style rules from other style sheets
- @left-bottom
  Box filling the left page margin between the left-middle and bottom-left-corner page-margin boxes
- @left-middle
  Box centered vertically between the page’s top and bottom border edges
- @left-top
  Box filling the left page margin between the top-left-corner and left-middle page-margin boxes
- @media
  Specifies the target media types of a set of statements
- @page
  Specifies various aspects of a page box, such as its dimensions, orientation, and margins
- @right-bottom
  Box filling the right page margin between the right-middle and bottom-right-corner page-margin boxes
- @right-middle
  Box centered vertically between the page’s top and bottom border edges
- @right-top
  Box filling the right page margin between the top-right-corner and right-middle page-margin boxes
- @sidenote
  Describes a sidenote area
- @top-center
  Box centered horizontally between the page’s left and right border edges
- @top-left
  Box filling the top page margin between the top-left-corner and top-center page-margin boxes
- @top-left-corner
  Box defined by the intersection of the top and left margins of the page box
- @top-right
  Box filling the top page margin between the top-center and top-right-corner page-margin boxes
- @top-right-corner
  Box defined by the intersection of the top and right margins of the page box

- ::footnote-call
  Area that is left behind when an element is moved to the footnote area
- ::footnote-marker
  Pseudo-element that is added to each footnote element, in the same place, and replacing the ::before pseudo-element
- ::marker
  Pseudo-element to represent a list item marker
- ::sidenote
  Area that is left behind when an element is moved to the sidenote area
- ::sidenote-marker
  Pseudo-element that is added to each sidenote element, in the same place, and replacing the ::before pseudo-element

- :last
  Psuedo-class that matches only the last page of the document
- :left
  Psuedo-class that matches only left pages
- :only
  Psuedo-class that matches only a single page that is the first and last page of the document
- :right
  Psuedo-class that matches only right pages

- -ah-baseline-block-snap
  How blocks align to the baseline grid
- -ah-baseline-grid
  Sets or clears the baseline grid
- -ah-column-rule-align
  Alignment of the column rule
- -ah-column-rule-display
  Display of the column rule
- -ah-column-rule-length
  Length of the column rule
- -ah-crop-area-visibility
  Whether to display the area that extends beyond the finished page size
- -ah-crop-offset
  Distance from the physical end to the trim size of the output medium
- -ah-force-page-count
  Constrains the total number of pages for the document
- -ah-line-height-shift-adjustment
  Whether the line-height is adjusted for content that has a baseline-shift
- -ah-line-stacking-strategy
  Strategy for positioning adjacent lines relative to each other
- -ah-pdftag
  PDF Tag name to output
- -ah-printer-marks-line-color
  Line color of printer marks
- -ah-printer-marks-line-length
  Line length of printer marks
- -ah-printer-marks-line-width
  Line width of printer marks
- -ah-text-autospace-width
  Amount of Space Between Japanese and Western Texts
- -ah-text-justify-trim
  Additional text compression for Japanese
- -ah-text-line-width
  Width of underline, strikethrough, and overline

- additive-symbols
  Symbols to be used by an additive marker-construction algorithm
- background-color
  Background color of an element
- bleed
  Extent of the page bleed area outside the page box
- bookmark-label
  Label of a bookmark
- bookmark-level
  Bookmark level in hierarchical bookmark structure
- bookmark-state
  Initial state of a bookmark
- border
  Shorthand property for setting the same width, color, and style for all four borders of a box
- border-bottom
  Style of the bottom border
- border-bottom-left-radius
  Radii of a quarter ellipse that defines the shape of the bottom-left corner of the outer border edge
- border-bottom-right-radius
  Radii of a quarter ellipse that defines the shape of the bottom-right corner of the outer border edge
- border-collapse
  Whether the borders of adjacent cells are merged together such that each cell draws only half of the shared border
- border-color
  Shorthand that sets the four border-*-color properties
- border-left
  Style of the left border
- border-radius
  Radius of a quarter ellipse that defines the shape of the corner of the outer border edge
- border-right
  Style of the right border
- border-spacing
  Distance that separates adjoining cell borders in separated-borders mode
- border-style
  Shorthand that sets the four border-*-style properties
- border-top
  Style of the top border
- border-top-left-radius
  Radii of a quarter ellipse that defines the shape of the top-left corner of the outer border edge
- border-top-right-radius
  Radii of a quarter ellipse that defines the shape of the top-right corner of the outer border edge
- border-width
  Shorthand that sets the four border-*-width properties
- box-shadow
  Attaches one or more drop-shadows to the box
- box-sizing
  Whether any padding and border are drawn inside or outside the specified width and height
- caption-side
  Position of the caption box with respect to the table box
- clear
  Indicates which sides of an element's box(es) may not be adjacent to an earlier floating box
- color
  Foreground color of an element's text content
- column-count
  Number of columns of a multicol element
- column-gap
  Gap between columns
- column-rule
  Shorthand for setting ‘column-rule-width’, ‘column-rule-style’, and ‘column-rule-color’
- column-rule-color
  Color of the column rule
- column-rule-style
  Style of the rule between columns of an element
- column-rule-width
  Width of the rule between columns
- column-span
  How many columns an element spans across
- column-width
  Width of columns in multicol elements
- columns
  Shorthand property for setting ‘column-width’ and ‘column-count’
- content
  Dictates what is rendered inside the element or pseudo-element
- counter-increment
  Increments counters
- counter-reset
  Resets counters
- display
  Controls how an element is displayed
- fallback
  Fallback counter style
- float
  Whether or not a box should float
- font
  Shorthand property for setting ‘font-style’, ‘font-variant’, ‘font-weight’, ‘font-stretch’, ‘font-size’, ‘line-height’, ‘font-family’
- font-family
  Prioritized list of font family names or generic family names
- font-size
  Desired height of glyphs from the font
- font-style
  Allows italic or oblique faces to be selected
- font-variant
  Selects font features
- font-weight
  Weight of glyphs in the font
- hanging-punctuation
  Whether a punctuation mark hangs and may be placed outside the line box at the start or at the end of a line of text
- height
  Content height
- hyphenate-after
  Minimum number of characters in a hyphenated word after the hyphenation character
- hyphenate-before
  Minimum number of characters in a hyphenated word before the hyphenation character
- hyphens
  Controls whether hyphenation is allowed
- line-height
  Minimal height of line boxes within the element
- list-style
  of the list item marker
- list-style-image
  List item marker image
- list-style-position
  Position of the list item marker
- list-style-type
  Type of the list item marker contents
- margin
  Shorthand that sets the four margin-* properties
- margin-bottom
  Thickness of the bottom margin
- margin-left
  Thickness of the left margin
- margin-right
  Thickness of the right margin
- margin-top
  Thickness of the top margin
- marks
  Specifies printer marks, such as crop marks
- max-height
  Content maximum height
- max-width
  Content maximum width
- min-height
  Content minimum height
- min-width
  Content minimum width
- negative
  How to alter a counter’s representation when the value is negative
- orphans
  Minimum number of line boxes in a block container that must be left in a fragment before a fragmentation break
- pad
  Symbol with which to pad counter representations
- padding
  Shorthand that sets the four padding-* properties
- page
  Specifies a particular type of page on which an element must be displayed
- page-break-after
  Whether and how a page break should occur after the element
- page-break-before
  Whether and how a page break should occur before the element
- page-break-inside
  Whether a page break may occur inside the element
- prefix
  Symbol that is prepended to the marker representation
- punctuation-trim
  Whether or not a fullwidth punctuation character should be trimmed
- range
  Ranges over which a counter style is defined
- size
  Target size and orientation of the page box’s containing block
- string-set
  Copies the text content of an element into a named string
- suffix
  Symbol that is appended to the marker representation
- symbols
  Symbols to be used by the marker-construction algorithm
- system
  Algorithm to use to construct a counter’s representation
- table-layout
  Mode for laying out the table
- text-align
  Inline alignment of all lines of inline content in the block container, except for last lines overridden by a non-auto value of text-align-last
- text-align-last
  How the last line of a block or a line right before a forced line break is aligned
- text-autospace
  Controls the creation of space when a run of non-ideographic or numeric characters appears inside of ideographic text
- text-decoration
  Shorthand for text-decoration-line, text-decoration-color, and text-decoration-style
- text-decoration-color
  Color of text decoration set on the element
- text-decoration-line
  Line decorations, if any, that are added to the element
- text-decoration-style
  Style of the line(s) drawn for text decoration
- vertical-align
  Vertical positioning inside a line box of the boxes generated by an inline-level element
- widows
  Minimum number of line boxes of a block container that must be left in a fragment after a break
- width
  Content width
- writing-mode
  Whether lines of text are laid out horizontally or vertically and the direction in which blocks progress

- <img>
  Represents an image
- <link>
  Link to an external style sheet
- <meta>
  Provides additional information about the document
- <object>
  Used for embedding an external resource
- <style>
  Inserts style rules into the document

Introduction to CSS for Paged Media
December 8, 2008 | First Edition
March 13, 2009 | Second Edition
April 21, 2009 | Third Edition
February 8, 2018 | Fourth Edition
Author | Antenna House, Inc.
Publisher | Antenna House, Inc.
3844 Kennett Pike, Suite 200 Greenville, DE 19807 USA Telephone +1 302-427-2456 sales@antennahouse.com
Copyright © | 2018 Antenna House, Inc.
Website | http://www.antennahouse.com/
| Contents of this booklet is marked up in XHTML5 (XML-serialized HTML5). The table of contents and index are updated using XSLT. Layout format was done with a CSS style sheet and converted to PDF with AH Formatter V6.5.