dita-ot.css

/* CSS Paged Media stylesheet for samples/swordfish_dita-ot.xml
   Same design as samples/ditac.css, applied to the unified file produced by DITA-OT:
   the map comes first (cover title, contents entries) and the topics follow it. */

@namespace opentopic url(http://www.idiominc.com/opentopic);
@namespace ot-placeholder url(http://suite-sol.com/namespaces/ot-placeholder);

@font-face {
    font-family: "Noto Sans Mono";
    src: url("./fonts/NotoSansMono-VariableFont_wdth,wght.ttf");
    font-weight: 100 900;
    font-stretch: 62.5% 100%;
}

@font-face {
    font-family: "Noto Serif Display";
    src: url("./fonts/NotoSerifDisplay-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Noto Serif Display";
    src: url("./fonts/NotoSerifDisplay-Bold.ttf");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Noto Serif Display";
    src: url("./fonts/NotoSerifDisplay-Italic.ttf");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Noto Serif Display";
    src: url("./fonts/NotoSerifDisplay-BoldItalic.ttf");
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: "Noto Sans";
    src: url("./fonts/NotoSans-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Noto Sans";
    src: url("./fonts/NotoSans-Bold.ttf");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Noto Sans";
    src: url("./fonts/NotoSans-Italic.ttf");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Noto Sans";
    src: url("./fonts/NotoSans-BoldItalic.ttf");
    font-weight: 700;
    font-style: italic;
}

/* ------------------------------------------------------------------ */
/* Page geometry, running headers/footers, page numbering             */
/* ------------------------------------------------------------------ */

@page {
    size: A4;
    margin: 2.5cm;

    @top-center {
        content: string(book-title);
        font-family: "Noto Sans", sans-serif;
        font-size: 8pt;
        color: #808080;
        border-bottom: 0.5pt solid #808080;
        padding-bottom: 4pt;
        margin-bottom: 24pt;
        vertical-align: bottom;
    }

    @bottom-left {
        content: "";
        border-top: 0.5pt solid #808080;
        margin-top: 24pt;
    }

    @bottom-center {
        content: string(chapter-title);
        font-family: "Noto Sans", sans-serif;
        font-size: 8pt;
        color: #808080;
        border-top: 0.5pt solid #808080;
        padding-top: 4pt;
        margin-top: 24pt;
        vertical-align: top;
    }

    @bottom-right {
        content: counter(page);
        font-family: "Noto Sans", sans-serif;
        font-size: 8pt;
        color: #808080;
        border-top: 0.5pt solid #808080;
        padding-top: 4pt;
        margin-top: 24pt;
        vertical-align: top;
    }
}

/* Title page: no running headers/footers at all */
@page cover {
    @top-center { content: none; }
    @bottom-left { content: none; }
    @bottom-center { content: none; }
    @bottom-right { content: none; }
}

/* The table of contents is numbered with its own lower-roman sequence */
@page roman {
    @top-center {
        content: string(book-title);
        font-family: "Noto Sans", sans-serif;
        font-size: 8pt;
        color: #808080;
        border-bottom: 0.5pt solid #808080;
        padding-bottom: 4pt;
        margin-bottom: 24pt;
        vertical-align: bottom;
    }

    @bottom-left {
        content: "";
        border-top: 0.5pt solid #808080;
        margin-top: 24pt;
    }

    @bottom-center {
        content: string(chapter-title);
        font-family: "Noto Sans", sans-serif;
        font-size: 8pt;
        color: #808080;
        border-top: 0.5pt solid #808080;
        padding-top: 4pt;
        margin-top: 24pt;
        vertical-align: top;
    }

    @bottom-right {
        content: counter(page, lower-roman);
        font-family: "Noto Sans", sans-serif;
        font-size: 8pt;
        color: #808080;
        border-top: 0.5pt solid #808080;
        padding-top: 4pt;
        margin-top: 24pt;
        vertical-align: top;
    }
}

/* ------------------------------------------------------------------ */
/* Document root                                                       */
/* ------------------------------------------------------------------ */

bookmap {
    display: block;
    font-family: "Noto Sans", sans-serif;
    font-size: 10pt;
    line-height: 1.35;
    orphans: 2;
    widows: 2;
}

/* ------------------------------------------------------------------ */
/* Map part: cover title and table of contents                         */
/*                                                                     */
/* Every map element outside the cover title and the navigation titles */
/* is hidden. Topic references carry the id of the topic they point to,*/
/* and the first element with an id is the target of a page number,    */
/* so the entries show their own page until the contents are built     */
/* from the headings.                                                   */
/* ------------------------------------------------------------------ */

opentopic|map {
    display: block;
    page: roman;
}

*[class~="map/topicref"]:not([href])[id] {
    --dest: "#" attr(id);
    -cssmedia-link: var(--dest);
}

*[class~="map/topicref"][href] {
    --dest: attr(href);
    -cssmedia-link: attr(href);
}

*[class~="map/topicref"],
*[class~="map/topicmeta"] {
    display: block;
}

*[class~="map/topicmeta"] > * {
    display: none;
}

*[class~="map/topicmeta"] > *[class~="topic/navtitle"] {
    display: block;
    font-family: "Noto Sans", sans-serif;
    font-weight: inherit;
    color: black;
}

*[class~="bookmap/booklists"],
*[class~="bookmap/toc"] {
    display: none;
}

/* Title page */

opentopic|map > *[class~="bookmap/booktitle"] {
    display: block;
    page: cover;
    break-after: page;
    text-align: center;
    font-family: "Noto Sans", sans-serif;
    font-weight: bold;
    font-size: 2.4em;
    color: #004885;
    margin-top: 4cm;
}

opentopic|map > *[class~="bookmap/booktitle"] *[class~="bookmap/mainbooktitle"] {
    string-set: book-title content();
    display: block;
    text-align: center;
    font-family: "Noto Sans", sans-serif;
    font-weight: bold;
    font-size: 2.4em;
    margin-top: 4cm;
}

opentopic|map > *[class~="bookmap/booktitle"] *[class~="bookmap/booktitlealt"] {
    display: block;
    text-align: center;
    font-family: "Noto Sans", sans-serif;
    font-style: italic;
    font-size: 1.1em;
    margin-top: 1.5em;
}

/* Table of contents */

opentopic|map > *[class~="bookmap/frontmatter"] {
    display: block;
    break-before: page;
    counter-reset: page 1;
}

opentopic|map > *[class~="bookmap/frontmatter"]::before {
    content: "Table of Contents";
    display: block;
    font-family: "Noto Sans", sans-serif;
    font-weight: bold;
    font-size: 1.9em;
    color: #004885;
    margin-bottom: 0.8em;
}

opentopic|map > *[class~="bookmap/chapter"],
*[class~="bookmap/glossarylist"] {
    font-weight: bold;
    margin-top: 0.6em;
    break-inside: avoid;
}

*[class~="map/topicref"] *[class~="map/topicref"] {
    font-weight: normal;
    margin-top: 0;
    margin-left: 1.5em;
    break-inside: avoid;
}

*[class~="map/topicref"] *[class~="map/topicref"] *[class~="map/topicref"] {
    font-size: 0.95em;
}

*[class~="map/topicmeta"] > *[class~="topic/navtitle"]::after {
    content: leader(dotted) target-counter(var(--dest), page);
}

*[class~="bookmap/glossarylist"] {
    display: block;
    --dest: "#" attr(id);
    -cssmedia-link: var(--dest);
}

*[class~="bookmap/glossarylist"]::before {
    content: "Glossary" leader(dotted) target-counter(var(--dest), page);
}

*[class~="bookmap/glossarylist"] > *[class~="map/topicref"] {
    display: none;
}

/* The first topic after the map restarts decimal page numbering at 1 */
opentopic|map + *[class~="topic/topic"],
ot-placeholder|toc + *[class~="topic/topic"] {
    counter-reset: page 1;
}

/* ------------------------------------------------------------------ */
/* Topics, titles, headings                                            */
/* ------------------------------------------------------------------ */

*[class~="topic/topic"] {
    display: block;
}

*[class~="topic/body"] {
    display: block;
}

*[class~="topic/title"] {
    display: block;
    font-family: "Noto Sans", sans-serif;
    font-weight: bold;
    color: #004885;
    break-after: avoid;
}

/* H1: chapter-level topic title (top-level topic of the book) */
bookmap > *[class~="topic/topic"] {
    break-before: page;
}

bookmap > *[class~="topic/topic"] > *[class~="topic/title"] {
    string-set: chapter-title content();
    bookmark-level: 1;
    font-size: 1.9em;
    border-bottom: 2pt solid #004885;
    padding-bottom: 0.2em;
    margin-top: 0;
    margin-bottom: 0.6em;
}

/* H2: topic nested once inside a chapter */
bookmap > *[class~="topic/topic"] > *[class~="topic/topic"] > *[class~="topic/title"] {
    bookmark-level: 2;
    font-size: 1.35em;
    border-bottom: 1pt solid #004885;
    padding-bottom: 0.15em;
    margin-top: 1.4em;
    margin-bottom: 0.5em;
}

/* H3: topic nested twice inside a chapter */
bookmap > *[class~="topic/topic"] > *[class~="topic/topic"] > *[class~="topic/topic"] > *[class~="topic/title"] {
    bookmark-level: 3;
    font-size: 1.1em;
    margin-top: 1.1em;
    margin-bottom: 0.4em;
}

/* Glossary heading, in the chapter-title style */
ot-placeholder|glossarylist {
    display: block;
    break-before: page;
    string-set: chapter-title "Glossary";
}

ot-placeholder|glossarylist::before {
    content: "Glossary";
    display: block;
    font-family: "Noto Sans", sans-serif;
    font-weight: bold;
    font-size: 1.9em;
    color: #004885;
    border-bottom: 2pt solid #004885;
    padding-bottom: 0.2em;
    margin-bottom: 0.6em;
}

*[class~="topic/shortdesc"], *[class~="topic/abstract"] {
    display: block;
    font-style: italic;
    margin: 0.6em 0;
}

*[class~="topic/section"] {
    display: block;
    margin: 1em 0;
}

*[class~="topic/section"] > *[class~="topic/title"] {
    font-size: 1.1em;
    color: #004885;
    margin-top: 1em;
    margin-bottom: 0.4em;
}

*[class~="topic/fig"] {
    display: block;
    margin: 0.8em 0;
    text-align: center;
}

*[class~="topic/fig"] > *[class~="topic/title"] {
    display: block;
    font-weight: normal;
    font-style: italic;
    color: black;
    font-size: 1em;
    text-align: left;
    margin-bottom: 0.4em;
}

*[class~="topic/example"] {
    display: block;
    margin: 1em 0;
}

*[class~="topic/example"] > *[class~="topic/title"] {
    font-size: 1em;
    font-style: italic;
    color: black;
    margin-top: 0;
    margin-bottom: 0.4em;
}

/* ------------------------------------------------------------------ */
/* Task/reference structure: auto-generated section labels             */
/* ------------------------------------------------------------------ */

*[class~="task/taskbody"] {
    display: block;
}

*[class~="task/context"]::before,
*[class~="task/prereq"]::before,
*[class~="task/result"]::before,
*[class~="task/postreq"]::before,
*[class~="reference/refsyn"]::before {
    display: block;
    font-family: "Noto Sans", sans-serif;
    font-weight: bold;
    color: #004885;
    font-size: 1.1em;
    margin-top: 1.1em;
    margin-bottom: 0.4em;
}

*[class~="task/context"]::before { content: "About this task"; }
*[class~="task/prereq"]::before { content: "Prerequisites"; }
*[class~="task/result"]::before { content: "Results"; }
*[class~="task/postreq"]::before { content: "Next Steps"; }
*[class~="reference/refsyn"]::before { content: "Syntax"; }

*[class~="task/steps"]::before {
    display: block;
    font-family: "Noto Sans", sans-serif;
    font-weight: bold;
    color: #004885;
    font-size: 1.1em;
    margin-top: 1.1em;
    margin-bottom: 0.4em;
    content: "Procedure";
}

*[class~="task/cmd"] {
    display: inline;
}

*[class~="task/info"],
*[class~="task/stepresult"],
*[class~="task/tutorialinfo"],
*[class~="task/stepxmp"] {
    display: block;
    margin: 0.5em 0 0.5em 0;
}

/* ------------------------------------------------------------------ */
/* Paragraphs, lists                                                   */
/* ------------------------------------------------------------------ */

*[class~="topic/p"] {
    display: block;
    margin: 0.6em 0;
}

*[class~="topic/itemgroup"] {
    display: block;
    margin: 0.6em 0;
}

*[class~="topic/note"] {
    display: block;
    margin: 1em 0 1em 8pt;
    padding: 8pt 10pt;
    background-color: #F2F2F2;
    border-left: 3pt solid #004885;
    break-inside: avoid;
}

*[class~="topic/note"]::before {
    content: "Note";
    display: block;
    font-family: "Noto Sans", sans-serif;
    font-weight: bold;
    color: #004885;
    margin-bottom: 4pt;
}

*[class~="topic/note"][type="important"] {
    background-color: #FBEAEA;
    border-left-color: #B00020;
}

*[class~="topic/note"][type="important"]::before {
    content: "Important";
    color: #B00020;
}

*[class~="topic/note"][type="notice"]::before {
    content: "Notice";
    text-transform: uppercase;
}

*[class~="topic/ol"] {
    display: block;
    list-style-type: decimal;
    margin: 0.6em 0;
}

*[class~="topic/ul"] {
    display: block;
    list-style-type: disc;
    margin: 0.6em 0;
}

*[class~="topic/ul"] *[class~="topic/ul"] {
    list-style-type: "\2013\0020";
}

*[class~="task/substeps"] {
    list-style-type: lower-alpha;
}

*[class~="topic/li"] {
    display: list-item;
    margin: 0.3em 0 0.3em 2em;
}

*[class~="topic/sl"] {
    display: block;
    list-style-type: disc;
    margin: 0.6em 0;
}

*[class~="topic/sli"] {
    display: list-item;
    margin: 0.2em 0 0.2em 2em;
}

*[class~="topic/dl"] {
    display: block;
    margin: 0.6em 0;
}

*[class~="topic/dlentry"] {
    display: block;
    margin: 0.5em 0;
    break-inside: avoid;
}

*[class~="topic/dt"] {
    display: block;
    font-weight: bold;
}

*[class~="topic/dd"] {
    display: block;
    margin-left: 2em;
}

*[class~="topic/lq"] {
    display: block;
    font-style: italic;
    margin: 0.8em 2em;
}

/* topic/pre and its pr-d/codeblock and ui-d/screen specializations
   (both share this base class) */
*[class~="topic/pre"] {
    display: block;
    font-family: "Noto Sans Mono", monospace;
    font-size: 0.9em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background-color: #F0F0F0;
    border: 0.5pt solid #D0D0D0;
    padding: 0.5em;
    margin: 0.6em 0;
    break-inside: avoid;
}

*[class~="topic/lines"] {
    display: block;
    white-space: pre-line;
}

/* topic/div is a generic, unstyled grouping wrapper */
*[class~="topic/div"] {
    display: block;
}

/* ------------------------------------------------------------------ */
/* Inline phrases                                                      */
/* ------------------------------------------------------------------ */

/* topic/keyword covers its sw-d/pr-d/markup-d/xml-d specializations
   (cmdname, varname, apiname, option, xmlelement, xmlatt, xmlpi...):
   all of them name something from code, so monospace throughout */
*[class~="pr-d/codeph"], *[class~="sw-d/userinput"], *[class~="sw-d/filepath"], *[class~="topic/keyword"], *[class~="hi-d/tt"] {
    font-family: "Noto Sans Mono", monospace;
}

*[class~="topic/cite"], *[class~="topic/term"] {
    font-style: italic;
}

*[class~="topic/tm"][tmtype="tm"]::after {
    content: "\2122";
    font-size: 0.7em;
    vertical-align: super;
}

*[class~="topic/tm"][tmtype="reg"]::after {
    content: "\00AE";
    font-size: 0.7em;
    vertical-align: super;
}

*[class~="topic/tm"][tmtype="service"]::after {
    content: "\2120";
    font-size: 0.7em;
    vertical-align: super;
}

/* footnotes go to the footnote area at the bottom of the page, numbered
   through the whole book; a footnote with a callout shows it instead of
   a number, and one with an id has no call of its own: the xref elements
   of type fn that point to it show its number */
@page {
    @footnote {
        border-top: 0.5pt solid #808080;
        margin-top: 12pt;
        padding-top: 4pt;
    }
}

*[class~="topic/fn"] {
    float: footnote;
    font-size: 8pt;
    font-weight: normal;
    font-style: normal;
    line-height: 1.3;
    text-align: start;
    color: black;
}

*[class~="topic/fn"]::footnote-call,
*[class~="topic/xref"][type="fn"] {
    font-size: 0.7em;
    font-variant-position: normal;
    vertical-align: super;
}

*[class~="topic/fn"][id]::footnote-call {
    content: none;
}

*[class~="topic/fn"][callout] {
    counter-increment: footnote -1;
}

*[class~="topic/fn"][callout]::footnote-call {
    content: attr(callout);
}

*[class~="topic/fn"][callout]::footnote-marker {
    content: attr(callout) ". ";
}

*[class~="topic/xref"][type="fn"] {
    content: -cssmedia-link-counter(footnote);
}

/* equations and inline SVG figures: no attempt to render the math or
   vector content itself, just reasonable block/inline placement */
*[class~="equation-d/equation-block"], *[class~="equation-d/equation-figure"] {
    display: block;
    text-align: center;
    margin: 0.8em 0;
}

*[class~="svg-d/svg-container"] {
    display: block;
    text-align: center;
    margin: 0.6em 0;
}

/* metadata-only elements: nothing here is meant to reach the page */
*[class~="topic/titlealts"],
*[class~="topic/prolog"],
*[class~="topic/data"],
*[class~="topic/desc"],
*[class~="topic/object"],
*[class~="topic/param"],
*[class~="topic/index-base"],
*[class~="topic/indexterm"],
*[class~="map/reltable"],
ot-placeholder|toc {
    display: none;
}

*[class~="hi-d/b"] {
    font-weight: bold;
}

*[class~="hi-d/i"] {
    font-style: italic;
}

*[class~="hi-d/u"] {
    text-decoration: underline;
}

*[class~="hi-d/line-through"] {
    text-decoration: line-through;
}

*[class~="ui-d/uicontrol"] {
    font-weight: bold;
}

*[class~="ui-d/menucascade"] > *[class~="ui-d/uicontrol"] + *[class~="ui-d/uicontrol"]::before {
    content: "\0020\2192\0020";
    font-weight: normal;
}

*[class~="topic/xref"] {
    color: #004885;
    -cssmedia-link: attr(href);
}

*[class~="topic/xref"][scope="external"]:empty::after {
    content: attr(href);
}

/* ------------------------------------------------------------------ */
/* Tables: topic/table (thead/tbody/row/entry)                         */
/* ------------------------------------------------------------------ */

*[class~="topic/table"] {
    display: table;
    border-collapse: collapse;
    width: 100%;
    margin: 0.8em 0;
}

*[class~="topic/tgroup"] {
    display: table;
    width: 100%;
}

*[class~="topic/thead"] {
    display: table-header-group;
    font-weight: bold;
    background-color: #E0E0E0;
}

*[class~="topic/tbody"] {
    display: table-row-group;
}

*[class~="topic/row"] {
    display: table-row;
}

*[class~="topic/entry"] {
    display: table-cell;
    overflow-wrap: break-word;
    border: 0.5pt solid #000000;
    padding: 0.4em 0.6em;
    vertical-align: top;
}

*[class~="topic/entry"][align="center"] {
    text-align: center;
}

*[class~="topic/colspec"] {
    display: none;
}

/* Unicode line breaking never breaks before a colon, a comma or a period, even after a space, so a list of selectors
   such as ":is(), :where()" would not wrap. Each code item in a cell may start a line. */
*[class~="topic/entry"] *[class~="pr-d/codeph"]::before {
    content: "\200B";
}

/* Tables: topic/simpletable (sthead/strow/stentry) */

*[class~="topic/simpletable"] {
    display: table;
    border-collapse: collapse;
    width: 100%;
    margin: 0.8em 0;
}

*[class~="topic/sthead"] {
    display: table-header-group;
    font-weight: bold;
    background-color: #E0E0E0;
}

*[class~="topic/strow"] {
    display: table-row;
}

*[class~="topic/stentry"] {
    display: table-cell;
    overflow-wrap: break-word;
    border: 0.5pt solid #000000;
    padding: 0.4em 0.6em;
    vertical-align: top;
}

/* task/choicetable is a simpletable specialization (base classes
   topic/simpletable, topic/strow, topic/stentry): the rules above
   already cover it, no separate rules needed. */

/* ------------------------------------------------------------------ */
/* Images                                                               */
/* ------------------------------------------------------------------ */

*[class~="topic/image"] {
    content: attr(href url);
    max-width: 100%;
    /* an image that stores no density is taken as 120 dpi, as in the
       reference PDF */
    image-resolution: from-image 1.25dppx;
}

*[class~="topic/image"][placement="inline"] {
    display: inline;
    vertical-align: middle;
}

*[class~="topic/image"][placement="inline"][href$=".svg"] {
    height: 1em;
}

/* a formula sits on the baseline of its line */
*[class~="topic/image"][placement="inline"][href$=".mml"] {
    vertical-align: baseline;
}

/* the width and height attributes are read as a CSS length, or else
   as a number of CSS pixels; 0.8 gives the sizes of the reference PDF */
*[class~="topic/image"][width] {
    width: calc(attr(width <length>, calc(attr(width <number>) * 1px)) * 0.8);
    height: auto;
}

*[class~="topic/image"][height] {
    height: calc(attr(height <length>, calc(attr(height <number>) * 1px)) * 0.8);
}

*[class~="topic/image"][placement="inline"][height] {
    height: 1em;
}

*[class~="topic/image"][placement="break"] {
    display: block;
    margin: 0.6em auto;
    text-align: center;
}

*[class~="topic/image"][scale] {
    zoom: calc(attr(scale <number>) / 100);
    max-width: none;
}

*[class~="topic/alt"] {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Glossary (backmatter)                                               */
/* ------------------------------------------------------------------ */

*[class~="glossentry/glossentry"] {
    display: block;
    margin: 0.8em 0;
    break-inside: avoid;
}

*[class~="glossentry/glossterm"] {
    display: block;
    font-weight: bold;
    color: black;
    margin-bottom: 0.2em;
}

/* overrides topic/abstract (italic, 0.6em vertical margin): glossary
   definitions print upright with just an indent, not as a shortdesc */
*[class~="glossentry/glossdef"] {
    display: block;
    font-style: normal;
    margin: 0 0 0 2em;
}

/* ------------------------------------------------------------------ */
/* Hidden structural noise                                             */
/* ------------------------------------------------------------------ */

*[class~="topic/related-links"] {
    display: none;
}