Introduction to
CSS for Paged Media

Specifying a Print Style Sheet

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

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

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

Differences Between Screen and Print

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.

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 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.

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.

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 Dimensions

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

<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>

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.

Alignment

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.

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.

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

Hyphenation

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

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

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

Control of Page Breaks

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

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

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

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

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

Font Setting

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

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

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

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

Underlines, Overlines, and Line-throughs

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

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

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>

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

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.

<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.

<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>

Inline Image

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

<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.
…

Controlling Flow Next to floats : clear property

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.

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.

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;
}

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.

• 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

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 {
  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.

Align Table to Center

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

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

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.

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.

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.

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);
  }
}

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)

<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’.

<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>

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>

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

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.

.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.

.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>

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.

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%;
  }
}

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 */
}

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>

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>

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

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.

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;
}

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

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.

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

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 */
}

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.

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.

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

Running Headers and Page Numbers

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

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

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

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

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

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

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

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

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

@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.

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.

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:

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';
}

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.

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.

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.

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.

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.

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>
…

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.