Layout and Implementation

Noscript Fallback

As Javascript is required, a noscript fallback is implemented on every page. If the used browser does not provide enabled Javascript, the user will be automatically redirected to a central error page when trying to open a file.

Responsive Page Layout

CSS Media Queries are used to support narrow screens on mobile devices (phone, tablet).

On narrow screens, there is still a header present, providing the current location (root/which_document/which_chapter). Also, a menu icon ( ) will be available, opening the navigation and settings section as an overlay on the whole screen.

Should the user want to print a page, a separate print layout will become effective. For example, the navigation and settings section will not be avaibale here and a light and grayscale coloring applies (regardless of the currently active color theme).

Automatic Generation

The declared goal of avoiding redundancies, especially in the HTML part, is realized in several ways.

Javascript will automatically create the menu section (Documents, Settings) for a particular page. Also, the current document and chapter is determined and will be shown in the list of available documents and chapters (Documents). Subchapters will become available as well. In order for this to work, Javascript uses URLSearchParams and passes them to iframe elements. The Color Theme setting and Developer Mode is also implemented via those params. (They also would "survive" bookmarking a specific page)

Javascript also ensures that images will switch their content following the active color theme. This also requires the matchMedia object. Usually, color-scheme-aware pictures require much HTML, as compared to mere images. Javascript will also take care of that, so the author just needs to use a simple picture element and can specify image variations with a wildcard pattern:

<picture>

<source srcset="image-dark.jpg" media="(prefers-color-scheme: dark)">

<source srcset="image-light.jpg" media="(prefers-color-scheme: light)">

<img src="image-print.jpg">

</picture>

This is the usual HTML code for defining color-scheme-aware pictures.

<picture data-src="image-*.jpg"></picture>

Javascript reduces the HTML drastically by exploiting a wildcard pattern.

In addition, Javascript also realizes and reduces HTML for:

  • figure elements that can be maximized (shown in an overlay over the whole screen when clicking on the maximize icon)
  • highlighted elements/sections (warnings, notes, developer comments, keywords)