Appendix H: Stylesheets (XSL and CSS) for the handbook

Version 3.0 (12 December 2019)

by Marco Bianchi

H.1 Introduction

Version 3 of the Menota handbook is transformed to html with the stylesheet handbook_v3.xsl. The stylesheet outputs clean box-based html5. Generally, all

@rend

are converted to html classes. All styling is taken care of by menota_handbook_3.css.

H.2 The HTML

handbook_v3.xls produces clean html5 without any form styling in html code. The html skeleton:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="page">
      <div id="main-wrapper">
        <div id="header-wrapper">
          <header> </header>
          <nav> Site-navigation</nav>
        </div>
        <div id="content-wrapper">
          <section id="sidebar" role="navigation">Page-MENU</section>
          <main id="content">
            <article>HANDBOOK ENTRIES</article>
          </main>
        </div>
      </div>
      <footer></footer>
    </div>
  </body>
</html>

H.3 The CSS

The css sheets use css3 but should degrade gracefully in non-compliant browsers. The main typeface for handbook v3 is Andron, which is read in with css

@font-face

and thus does not need to be installed on users’ computers.

@font-face

is supported in all major modern browsers. Non compliant browsers will display a serif-font.

Handbook v3 uses one css sheet: menota_handbook_3.css

Breaking points for small screens are set at 960px (width of header items and main content 100%) and 450px in portrait mode (larger main font-size).

H.4 XML markup

In the tables below supported xml markup and its corresponding html output is listed. All values of

@rend

and

@xml:id

will be passed to html

@class

and

@id

respectively, unless otherwise noted.

H.4.1 CSS Block elements

tei:xml	html	function	Comment
`<code>`	`<pre>` `<code>`	Code example	See H.7 on styling of code
`@rend`
`"inline"`		Inline code example
`<eg>`	`<pre>` `<code>`	Example of code	See H.7 on styling of code
`@rend`
`"inline"`		Inline code example
`<egXML>`	`<pre>` `<code>`	Example of xml code	See H.7 on styling of code
`@rend`
`"inline"`		Inline code example
`<figure>`	`<figure>`	Illustration	Typically, a `<figure>` element contains a `<graphic>` and a `<figDesc>` element. See H.6 on styling of images
`@rend`
`"leftalign"`			The figure is placed to the left, with text floating to the right
`"rightalign"`			The figure is placed to the right, with text floating to the left
`"center"`			The figure is placed in the center. No floating occurs.
`<figure>` / `<figDesc>`	`<figcaption span class="imagelabel">`	Figure caption	Should be used together with a sibling `<graphic>` and a parent `<figure>`
`@n`
`"[number]"`	`<figcaption><span class="imagelabel">Fig. <span class="imageid">2.1<>/span>.</span>Caption</figcaption>`		Usage in xml: `<figDesc n="2.1">Caption</figDesc>`, i.e. the figure’s number should passed through `@n` and not be put between the `<figDesc>` tags
`<graphic>`	`<img>`	Image	If used together with a parent element `<figure>` , the image element will be wrapped in a `<figure>` element together with its caption. It may, however, also be used alone.
`@rend`
`<head>`	`<h1>` , `<h2>` , `<h3>` , `<h4>` , `<head>`	Heading	`<h1>` – `<h4>` are chosen according to their position in the dom. If the position does not match, a generic `<div class="head">` is output.
`@rend`
`@xml:id`			When no `@xml:id` is passed, the xsl will introduce an `@id` with a random value
`<l>`	`<li>`	List item
`<lg>`	`<ul>`	Unordered list
`<list>`	`<ul>`	List	Unordered list
`@rend`
`"numbered"`	`<ol>`	Ordered list	Ordered (= numbered) list
`@type`			`@type` is converted to a css `@class` for backwards compatibility with earlier style sheets
`@xml:id`
`<list>` / `<item>`	`<li>`	List item
`<p>`	`<p>`	Paragraph
`@rend`
`"sample"`	`<blockquote>`	Blockquote
`@xml:id`
`<quote>`	`<blockquote>`	Blockquote
`<table>`	`<table>`	Table	See H.5 on styling of tables
`@rend`
`"xml-elements"`			This value can be used for tables with lists of xml-elements and their attributes. See H.5.1 for more information
`"abbr"`			This value can be used for tables with explanations of abbreviations and other glyphs. See H.5.2 for more information
`@xml:id`
`<table>` / `<row>`	`<tr>`	Table row
`@rend`
`@xml:id`
`@role`
`"label"`	`<tr>` / `<th>`	Table header	i.e. table header
`<table>` / `<cell>`	`<td>` or `<th>`	Table cell	`<th>` when the parent `<row>` `@role` = `"label"`
`@rend`

H.4.2 CSS Inline elements

tei:xml	html	Function	Comment
`<att>`	`<span class="attribute"><code>@att</code></span>`	xml/html attribute	In a table with `@rend` = `"xml-elements"` attributes in the first columns are automatically indented 1em. See H.7 on styling of code.
`<emph>`	`<em>`	Emphasis
`<gi>`	`<span class="tag"><code>@att</code></span>`	xml/html element	See H.7 on styling of code
`<hi>`	`<span>`	Highlighted
`@rend`
`"bold"`	`<b>`		If `@rend` contains multiple values, `"bold"` is passed to `<span class="bold [othervalue]">`
`"code"`	`<code>`		If `@rend` contains multiple values, `"code"` is passed to `<span class="code [othervalue]">`See H.7 on styling of code
`"codepoint"`	`<span class="codepoint"><code>U+01eb</code></span>`	A Unicode codepoint: `U+01eb`	Lowercase letters are transformed to uppercase letters in the css stylesheet.
`"descName"`	`<span class="descname"><code>LATIN SMALL LETTER O WITH OGONEK</code></span>`	A Unicode descriptive name: `LATIN SMALL LETTER O WITH OGONEK`	Lowercase letters are transformed to uppercase letters in the css stylesheet.
`"entity"`	`<span class="entity"><code>&oogon;</code></span>`	A Unicode entity: `&oogon;`
`"glyph"`	`<span class="glyph">`		Characters marked upp with `"glyph"` are displayed in a deviant color. See also the section about styling tables.
`"italic"`	`<i>`		If `@rend` contains multiple values, `"italic"` is passed to `<span class="italic [othervalue]">`
`"red"`	`<span class="red">`
`"blue"`	`<span class="blue">`
`"initial"`	`<span class="initial">`
`<lb/>`	`<br/>`	Line break
`<q>`	`<q>`	Quoted
`<ref>`	`<a>`	Reference
`@target`	`@href`
`@rend`
`<tag>`	`<code><span class="tag">@att</span></code>`	Tagged content	See H.7 on styling of code
`<title>`	`<cite>`	Title of a work
`<val>`	`<span class="value">'value'</span>`	Value of a xml/html element	See H.7 on styling of code. In a table with `@rend` = `"xml-elements"` values in the first columns are automatically indented 2em

H.4.3 Generic values for `@rend`

The following

@rend

values can be given to any xml-element with support for

@rend

```
"blue"
```
(blue font color)
```
"bold"
```
(bold style)
```
"code"
```
(monospace font)
```
"red"
```
(red font color)
```
"style"
```
(italic style)

The following

@rend

values can be given to any xml-element that translates into a block-element in html/css and supports the

@rend

attribute. Percentages are always relative to the width of the parent element’s width. The available values for

@rend

behave the following way at different screen resolutions:

`@rend` =...	default	medium screens	small screens
`"alignleft"`	align:left
`"alignright"`	align:right
`"aligncenter"`	centered
`"center"`	text-align:center
`"clearboth"`	float:none; clear:both (forces the element to be placed on a new line, i.e surrounding text will not float around the element)
`"width10"`	width:10%	`<figure>` width:50%	`<figure>` width:100%
`"width20"`	width:20%	`<figure>` width:50%	`<figure>` width:100%
`"width25"`	width:25%	`<figure>` width:50%	`<figure>` width:100%
`"width30"`	width:30%	`<figure>` width:50%	`<figure>` width:100%
`"width33"`	width:33,33%	`<figure>` width:50%	`<figure>` width:100%
`"width40"`	width:40%	`<figure>` width:50%	`<figure>` width:100%
`"width50"`	width:50%		`<figure>` width:100%
`"width60"`	width:60%	`<figure>` width:100%	`<figure>` width:100%
`"width66"`	width:66,66%	`<figure>` width:100%	`<figure>` width:100%
`"width70"`	width:70%	`<figure>` width:100%	`<figure>` width:100%
`"width75"`	width:75%	`<figure>` width:100%	`<figure>` width:100%
`"width80"`	width:80%	`<figure>` width:100%	`<figure>` width:100%
`"width90"`	width:90%	`<figure>` width:100%	`<figure>` width:100%
`"width100"`	width:100%	`<figure>` width:100%	`<figure>` width:100%

H.5 Styling tables

Tables are structured according to the following pattern in html:

<table>
  <colgroup>
    <col style="width20">
    <col style="width80">
  </colgroup>
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

The

<colgroup>

element is created dynamically if the first row contains cells with the attribute

@rend

. This means that the column widths of the html table can be controlled with the attribute

@rend

in the cells of the first table row. Below is the xml code of the html table above:

<table>
  <row rend="label">
    <cell rend="width20"></cell>
    <cell rend="width80"></cell>
  </row>
  <row>
    <cell></cell>
    <cell></cell>
  </row>
</table>

H.5.1 Styling tables with explanations of xml-elements

A table with explanations of xml-elements and their attributes (such as H.4.1 above) can be given

@rend

"xml-elements"

in the

<table>

element. The xls stylesheet tries to wrap all rows with a

<gi>

or a

<tag>

in the first cell into a

<tbody>

element together with the following rows. Such tables must adhere to the following principles:

The
```
<table>
```
tag must have a
```
@rend
```
with the value
```
"xml-elements"
```
The first cell of the first row in each block must contain a
```
<gi>
```
or a
```
<tag>
```
element
The first cells of all other rows in a block must not contain any
```
<gi>
```
element (otherwise, the respective row will be treated as the first row in a block)

Strings marked with

<att>

and

<val>

in the first cell of each row are indented automatically.

H.5.2 Styling glyph tables

Tables with explanations of abbreviations and other glyphs can be marked upp with

<table rend="abbr">

. In such tables, cells containing a tag

<hi rend="glyph">

(and nothing else) are rendered differently.

H.6 Styling images

An image and its caption should be structured as follows:

<figure rend="leftalign width33">
  <graphic url="path/to/image.jpg" />
  <figDesc n="1.2">Figure Caption</figDesc>
</figure>

The position and width of the image can be controlled with

<rend>

in the wrapping

<figure>

element. By default,

<figure>

is displayed floating to the left of the text at a width of 50% with a border around the containing elements. The figure’s number should passed through

@n

<figDesc>

. The xslt adds automatically a figure label. The above

<figDesc>

will thus be rendered as “Fig. 1.2: Figure Caption”.

If used without a wrapping

<figure>

element, images placed in a

<graphic>

element are displayed at their original size without any border

H.7 Styling code

Block level code elements are wrapped into a html

<pre>

tag that preserves line breaks, white spaces and indentations. Such elements should thus not follow the indentation of surrounding xml. The following coding of a CDATA section with surrounding xml ...

<p>Some text before the code</p>
  <egXML><![CDATA[<figure rend="leftalign width33">
   <graphic url="path/to/image.jpg"/>
   <figDesc n="1.2">Figure Caption</figDesc>
   </figure>]]>
  </egXML>
<p>Some text after the code</p>

... will be output as:

<figure rend="leftalign width33">
  <graphic url="path/to/image.jpg" />
  <figDesc n="1.2">Figure Caption</figDesc>
</figure>

By default, code within

<eg>

<egXML>

and

<code>

is displayed as a block element. With

@rend

"inline"

it can be forced to be treated as an inline element. Alternatively, the markup <hi rend="code"> or

<tag>

may be used for inline code.

Xml elements, attributes and values should be tagged with their respective semantic markup:

<gi>

<att>

and

<val>

H.8 Table of Contents

A table of contents is added automatically in the beginning of each page. The table includes all second level headers.

On this page