Skip to content

Level 0 HTML components

Jump to bottom
Peter Broadwell edited this page Apr 18, 2020 · 15 revisions

Text container

<div class="text-container">
  <p>Popular term among the performers for the final shōdan of a play.</p>
  <p>We have used the generic term kiri for the last module of both plays.</p> 
</div>

Introductory table

<div class="introductory-table">
  <div class="introductory-table__element">
    <div class="introductory-table__term">Voice</div>
    <div class="introductory-table__definition">Congruent</div>
  </div>
  <div class="introductory-table__element">
    <div class="introductory-table__term">Percussion</div>
    <div class="introductory-table__definition">Congruent</div>
  </div>
  <div class="introductory-table__element">
    <div class="introductory-table__term">Flute</div>
    <div class="introductory-table__definition">Non-congruent</div>
  </div>
</div>

Content table

<table class="content-table">
  <tr class="content-table__row--header">
    <td class="content-table__column">Row Header Column 1</td>
    <td class="content-table__column">Row Header Column 2</td>
    <td class="content-table__column">Row Header Column 3</td>
  </tr>
  <tr class="content-table__row">
    <td class="content-table__column">Row 1 Column 1</td>
    <td class="content-table__column">Row 1 Column 2</td>
    <td class="content-table__column">Row 1 Column 3</td>
  </tr>
  <tr class="content-table__row">
    <td class="content-table__column">Row 2 Column 1</td>
    <td class="content-table__column">Row 2 Column 2</td>
    <td class="content-table__column">Row 2 Column 3</td>
  </tr>
</table>

Content table extended options

Width of entire table

<table class="content-table" width="100%">

Setting width="100%" here will stretch the table to fill the entire content space on the page. Otherwise, the individual columns will only use the minimum amount of horizontal space needed.

Row header style and beige/white background

 <tr class="content-table__row[--header] [beige|white]">

content-table__row--header will format the row as a header row (beige background, green capitalized text, unique border). Otherwise, the class= should begin with "content-table__row". If no other class is specified, the row colors will alternate beige and white. The background color can now be set directly, however, by adding a space and specifying beige or white, e.g., content-table__row beige and content-table__row white will give the row a beige or white background, respectively.

Set column widths by percentage (first row only, applies to entire table)

<td class="content-table__column" width="30%">Column 1 text</td>
<td class="content-table__column" width="70%">Column 2 text</td>

Center or left-justify individual cells

<td class="content-table__column" align="[left|center]">Column 1 text</td>

Set font of individual cells

<td class="content-table__column greentext">Column 1 text</td>

The greentext sets the font to the green, capitalized style. Otherwise, the style defaults to the standard serif font.

Set background color of individual cells

<td class="content-table__column [beige|white]">Column 1 text</td>

Footnotes (using Markdown feature)

  • Footnote reference: The format is [^1] where the "1" actually can be any string that identifies the footnote. The references will be converted into superscripted numbers in ascending order. Important: If the reference is in an HTML element (usually a <p>), then you also must manually edit the enclosing HTML tag to add the attribute markdown="1", e.g., the preceding <p> must be changed to <p markdown="1">.
  • Footnote content: It's easiest to add the footnote texts in the placeholder <div> (see below). The footnotes should be separated by a newline (no need to have blank lines between them, however) and each begins with its identifier as above, followed by a colon, e.g., [^1]:. Note also that it's best to use Markdown syntax rather than HTML in the footnotes when you want to add italics (surround the words with * rather than <em></em>), bold (**), line breaks (end the line with two blank spaces (  ), rather than <br>), etc.

Example footnotes in Markdown:

[^2]: *Yama no ha no kokoro mo shirade yuku tsuki wa uwa no sora nite kage ya taenan*  
      “Will the moon go off into the sky and fade from sight, all unawares of the longing heart at the mountain’s edge?”
...
[^4]: There is another variation in the Noh play from the poem as quoted in Genji. This one is less significant in that it merely changes *honobono mitsuru to honobono mieshi*. I translated the former version “fading out of view”, but a more explicit version would be something like “which one saw vaguely.” *Honobono mieshi* has less explicit agency, and could be rendered, “which appeared vaguely.”

Footnotes placeholder

By default, the footnotes are placed in their own section below the main page content and before the footer, expanding so that they occupy portions of the sidebar column as well as the main content column. This is often not a desirable layout; fortunately, it is possible instead to insert the footnotes elsewhere in the main page content by inserting a code block, which also can contain the footnote contents (see above), at the desired location -- NOTE: after the <div markdown="1">, this code block should NOT be indented, and the * Footnotes... line is necessary, as is the <!-- prettier-ignore --> line:

    <!-- prettier-ignore -->
    <div markdown="1">
* Footnotes must be added below (see https://github.com/sul-cidr/noh/wiki/Level-0-HTML-components#footnotes-using-markdown-feature)
{:footnotes}
[^1]: Footnote 1.
[^2]: Footnote 2.
</div>

Image container with background, with optional caption

{% include image.html src="/assets/images/maibataraki.jpg" caption="A dwelling." %}

Image container without background, with optional caption

{% include image-no-background.html src="/assets/images/nohkan-small.jpg" caption="Available at <a href=\"https://nohken.ws.hosei.ac.jp/nohken_material/htmls/index/pages/y17/29.html\">Hōsei University.</a>" %}

Note the escaped quotation marks in the caption string. These are needed whenever the caption string for an image container (with or without background) contains double quotes.

Scalable image with left-justify option (no caption)

{% include image-scalable.html src="/assets/images/infoicon.png" scale="[1-100%]" align="[left|center]" column_size="[small|medium|large]" %}
  • align defaults to "center"; setting it to "left" moves the image to the left edge of the column; note that the width of the column is specified via column_size.
  • If scale is not set, the image will appear at its actual size. Setting the value from "1%" to "100%" scales the image to the specified percentage of the enclosing column.
  • column_size defaults to "small", which is the width of a standard text column, if not specified. This value is most important when using align="left". "medium" and "large" may be appropriate on pages with wider-than-normal content columns.

Video containers

There are two options for video containers: video.html provides a beige background with a small border around the video player, whereas video-no-background.html has no background and no border around the video player. The containers support the same parameters. These are:

  • src= The link to the video file (.mp4) to be played (required)
  • link= A short descriptive text that appears in the upper right, next to the "i" info icon, if present (optional)
  • title= Large text that appears in the top left when the info "i" icon is hovered/clicked (optional)
  • paragraph[1,2,3]= Three levels of smaller text that appear below the title (if present) when the info "i" icon is hovered/clicked (optional)

A simple example of a video player with no background:

{% include video-no-background.html src="https://d7rcwrflqckpu.cloudfront.net/bh626gj8179_sl.mp4" %}

Replace video-no-background.html with video.html to place the background behind the player. Note that the "i" info icon will only be present if the title or paragraph[1,2,3] parameters are provided.

Audio player within a minicard

Audio player minicards can be added to a set of minicards (within a <ul class="mini-cards__container"> element) by inserting the following template:

{% include audio-clip.html src="https://d7rcwrflqckpu.cloudfront.net/soundfiles/taiko-yo.m4a" text="yo" %}

where a <li class="mini-cards__element"> would otherwise be used.

Tabs container

<div class="tabs-container">
  <div class="tabs-container__links">
    <div class="wrapper">
      <div id="unique_tab_group_id_1"></div>
    </div>
  </div>
  <div class="tabs-container__content">
    <div class="wrapper">
      <section title="Tab 1 - Name" id="unique_section_id_1">
        <p>Tab 1 content</p>
      </section>
      <section title="Tab 2 - Name" id="unique_section_id_2">
        <p>Tab 2 content</p>
      </section>
      <section title="Tab 3 - Name" id="unique_section_id_3">
        <p>Tab 3 content</p>
      </section>
    </div>
  </div>
</div>

Note that both the ID for the tab container (unique_tab_group_id_1 in the example) and the tab section IDs (e.g., unique_section_id_3) must be unique on that page.

Linking to a specific tab in a tabs container

<a href="/shimai-dances/#unique_section_id_3">Link to Kokaji-kuse tab section</a>

Linking to a tabs container

<a href="/shimai-dances/#unique_tab_group_id_1">Link to tab group</a>

Example link within text (opens a new tab)

<a href="/hashitomi/kiri/" target="_blank">Link to Hashitomi Kiri</a>

Example links within a video

<a href="/hashitomi/kiri/#startTime=6:40">Link to Hashitomi Kiri (Level 2) @ 6:40</a>
<a href="/hashitomi/#startTime=400">Link to Hashitomi (Level 1) @ 400 seconds (==6:40)</a>

Example link to open a popout video player

<a href="#0" onclick="window.open('/popout/hashitomi/#t=01:30,1:38&autoplay&autoclose', 'new', 'width=640,height=360');return false;">Popout Window</a>

The values autoplay and autoclose are optional. The timestamps are in the format t=<startTime>,<finishTime> -- each is optional, and they will default to the beginning and the end of the video respectively. Some additional usage notes and caveats are available here.

Clone this wiki locally