-
Notifications
You must be signed in to change notification settings - Fork 2
Level 0 HTML components
<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><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><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><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.
<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.
<td class="content-table__column" width="30%">Column 1 text</td>
<td class="content-table__column" width="70%">Column 2 text</td><td class="content-table__column" align="[left|center]">Column 1 text</td><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.
<td class="content-table__column [beige|white]">Column 1 text</td>- 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 attributemarkdown="1", e.g., the preceding<p>must be changed to<p markdown="1">. - Footnote content: It's best to add the footnote texts at the very end of the document. The footnotes should be separated by a blank line, 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.”
By default, the footnotes will be 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 the following code (including the line beginning with an asterisk) at the desired location -- NOTE: this code block should NOT be indented, and the * footnotes... line is necessary:
<div markdown="1">
* footnotes will be placed here
{:footnotes}
</div>
{% include image.html src="/assets/images/maibataraki.jpg" caption="A dwelling." %}{% 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.
{% include image-scalable.html src="/assets/images/infoicon.png" scale="[1-100%]" align="[left|center]" column_size="[small|medium|large]" %}-
aligndefaults 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 viacolumn_size. - If
scaleis 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_sizedefaults to"small", which is the width of a standard text column, if not specified. This value is most important when usingalign="left"."medium"and"large"may be appropriate on pages with wider-than-normal content columns.
{% include video.html src="https://d7rcwrflqckpu.cloudfront.net/bh626gj8179_sl.mp4" %}{% include video-no-background.html src="https://d7rcwrflqckpu.cloudfront.net/bh626gj8179_sl.mp4" %}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.
<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.
<a href="/shimai-dances/#unique_section_id_3">Link to Kokaji-kuse tab section</a><a href="/shimai-dances/#unique_tab_group_id_1">Link to tab group</a><a href="/hashitomi/kiri/" target="_blank">Link to Hashitomi Kiri</a><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><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.