Skip to content
This repository has been archived by the owner on Nov 16, 2022. It is now read-only.

CLAAT `offline` `lite` Rendering Format

Jump to bottom
Sam Marder edited this page Sep 12, 2017 · 1 revision

CLAAT offline Rendering Format

This document outlines the major parts of the offline rendering format (which is sometimes referred to as lite internally). For clarity, it will only be referred to as the offline format in this document. It outputs HTML (although in a significantly different way from the html format). As the name suggests, this format is ideal for creating fully self-contained pages with no critical external dependencies.

While this document doesn't explicitly compare this format with other output formats, it was written as supporting material for comparing different formats (so it is written in a style that implicitly assumes you're trying to compare it to something else).

File Structure of the offline Format

This format outputs an index.html file which includes the content of step 1 only. Every other step is contained in a file called step-N.html. These files are directly linked to in the table of contents which is included on every page (see the next section for more details).

DOM Structure of the offline Format

Every generated html file has the same format:

<!doctype html>
<html>
<head>
    ...
</head>
<body>
    <div class="codelab__toc">
        ...
    </div>
    <div class="codelab__step">
        <div class="step__header">
            ...
        </div>
        <div class="step__body">
            ...
        </div>
    </div>
    <script>
        Google Analytics Stuff
    </script>
</body>
</html>

Step Headers

Each step has a header that gets rendered inside of a <div class="step__header"> tag. the tag consists of a few <a> tags with embedded SVGs for navigating between steps (back arrow, home, and forward arrow). At the end of the header is an <h1> with the title of the whole lab (not that step).

Step Bodies

Step bodies start with an <h1> with the title of the whole lab (repeated from the header). It is immediately followed by an <h2> with the step number and step title. Then there is a <div> element that wrapped all of the content of the step.

<div class="step__body">
  <h1>Title of the Lab</h1>
  <h2>5. Code</h2>
  <div>All of the rendered step content on a single line</div>
</div>

For readability, step content will be properly formatted when talked about in this document.

The vast majority of content gets rendered with reasonable HTML elements. <p>, <em>, <strong>, <ul>, <li>, and <img> tags all look reasonable and are used in a sensible, flat way.

Buttons

The offline format renders buttons (background color of dark-green-1) as:

<p>
  <a href="cpb200cover.jpg" target="_blank">
    <a class="step__button button--colored button--raised button--download">
      Download Link
    </a>
  </a>
<p>

Note the nested <a> tags which is a direct violation of the W3 HTML4 Spec on Links

Images

Images get rendered in an <img> tag with an inline-style specifying a a maximum width of the image:

<p>
  <img src="img/7253806cc0d2fd56.png" style="max-width: 620.50px"/>
</p>

Every image appears to have the same `max-width`.

Lists (Ordered and Unordered)

This format appears to use the same rendering logic as html and fails to render nested lists correctly. Additionally, the number on nested ordered lists appears to be incorrect.

1. Vestibulum id ligula porta felis euismod semper.
    a. Maecenas faucibus mollis interdum.
    b. Aenean lacinia bibendum nulla sed consectetur.
2. Sed posuere consectetur est at lobortis.
    a. Cras mattis consectetur purus sit amet fermentum.
    b. Donec sed odio dui.
3. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor

Becomes:

<ol type="1" start="1">
  <li>Vestibulum id ligula porta felis euismod semper.</li>
</ol>
<ol type="1" start="1">
  <li>Maecenas faucibus mollis interdum.</li>
  <li>Aenean lacinia bibendum nulla sed consectetur.</li>
</ol>
<ol type="1" start="2">
  <li>Sed posuere consectetur est at lobortis.</li>
</ol>
<ol type="1" start="1">
  <li>Cras mattis consectetur purus sit amet fermentum.</li>
  <li>Donec sed odio dui.</li>
  <li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
</ol>

Code Formatting

Inline code is wrapped in <code>...</code> and code blocks get wrapped in <pre><code>...</code></pre> tags.

Info Boxes

Positive info boxes get wrapped in <div class="step__note note--special">...</div>. Negative info boxes get wrapped in <div class="step__note note--warning">...</div>.

Tables

Tables are generated as standard HTML tables. Notably, the child of every table cell is either a <p> tag or a list (<ul> or <ol>)

<td><p>Content</p><td>
<td><ul><li>A list item</li></ul></td>
Clone this wiki locally