CETEIcean 1.7.0 → 1.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "CETEIcean",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "description": "JavaScript library to load a TEI XML document and register it as HTML5 custom elements.",
   "main": "src/CETEI.js",
   "keywords": [
@@ -23,8 +23,8 @@
     "http-server": "^14.1.1",
     "onchange": "^6.1.1",
     "rollup": "^2.57.0",
-    "rollup-plugin-terser": "1.0.1",
-    "terser": "^3.17.0"
+    "rollup-plugin-terser": "^7.0.2",
+    "terser": "^5.14.2"
   },
   "scripts": {
     "build": "rollup -c rollup.config.js",

package/src/CETEI.js

@@ -1,7 +1,7 @@
-import defaultBehaviors from './defaultBehaviors';
-import * as utilities from './utilities';
-import {addBehaviors, addBehavior, applyBehaviors, removeBehavior} from './behaviors';
-import {learnElementNames, learnCustomElementNames} from './dom';
+import defaultBehaviors from './defaultBehaviors.js';
+import * as utilities from './utilities.js';
+import {addBehaviors, addBehavior, removeBehavior} from './behaviors.js';
+import {learnElementNames, learnCustomElementNames} from './dom.js';
 
 class CETEI {
   constructor(options){
@@ -10,7 +10,6 @@ class CETEI {
     // Bind methods
     this.addBehaviors = addBehaviors.bind(this);
     this.addBehavior = addBehavior.bind(this);
-    this.applyBehaviors = applyBehaviors.bind(this);
     this.removeBehavior = removeBehavior.bind(this);
 
     // Bind selected utilities
@@ -412,7 +411,7 @@ processElement(elt) {
 // Given a qualified name (e.g. tei:text), return the element name
 tagName(name) {
   if (name.includes(":"), 1) {
-    return name.replace(/:/,"-").toLowerCase();;
+    return name.replace(/:/,"-").toLowerCase();
   } else {
     return "ceteicean-" + name.toLowerCase();
   }
@@ -438,6 +437,15 @@ template(str, elt) {
   return result;
 }
 
+// Define or apply behaviors for the document
+applyBehaviors() {
+  if (window.customElements) {
+    this.define.call(this, this.els);
+  } else {
+    this.fallback.call(this, this.els);
+  }
+}
+
 /* 
   Registers the list of elements provided with the browser.
   Called by makeHTML5(), but can be called independently if, for example,
@@ -446,7 +454,7 @@ template(str, elt) {
 define(names) {
   for (let name of names) {
     try {
-      let fn = this.getHandler(this.behaviors, name);
+      const fn = this.getHandler(this.behaviors, name);
       window.customElements.define(this.tagName(name), class extends HTMLElement {
         constructor() {
           super(); 
@@ -472,7 +480,7 @@ define(names) {
       // When using the same CETEIcean instance for multiple TEI files, this error becomes very common. 
       // It's muted by default unless the debug option is set.
       if (this.debug) {
-          console.log(tagName(name) + " couldn't be registered or is already registered.");
+          console.log(this.tagName(name) + " couldn't be registered or is already registered.");
           console.log(error);
       }
     }

package/src/behaviors.js

@@ -71,12 +71,3 @@ export function removeBehavior(ns, element) {
   }
   delete this.behaviors[`${p}:${element}`];
 }
-
-// Define or apply behaviors for the document
-export function applyBehaviors() {
-  if (window.customElements) {
-    this.define.call(this, this.els);
-  } else {
-    this.fallback.call(this, this.els);
-  }
-}

package/test/EEBOTest.html

@@ -75,7 +75,6 @@
       CETEIcean.getHTML5('https://raw.githubusercontent.com/textcreationpartnership/A00689/master/A00689.xml', function(data) {
         document.getElementById("TEI").innerHTML = "";
         document.getElementById("TEI").appendChild(data);
-        CETEIcean.addStyle(document, data);
         // Fix combining abbreviation marker in Chrome
         if (!!window.chrome) {
           var gs = document.getElementsByTagName("tei-g");

package/tutorial_en/README.md

@@ -4,7 +4,7 @@
 
 This tutorial will walk you through the steps to publish a TEI file online using CETEIcean. We will start with a simple (though quite large) file in TEI P5 form, `fpn-washington.xml`, which we want to display in a web browser.
 
-First, a note about viewing the results of your work: CETEIcean's default method for displaying TEI relies on loading a TEI file from another location. Not all browsers will allow you to do this when you view an HTML file directly on your file system. You should try it, but if it doesn't work, then you will have to run a web server, put your files on a web server, or use a text editor with preview capabilities. [Atom](https://atom.io), with the `atom-html-preview` plugin is the example we will use for this tutorial, but there are many other options. You should download and install Atom, or an equivalent text editor, before starting this tutorial. A text editor is different from other programs you may already use for editing 'text', such as LibreOffice or Word, in that it edits only plain text files.
+First, a note about viewing the results of your work: CETEIcean's default method for displaying TEI relies on loading a TEI file from another location. Not all browsers will allow you to do this when you view an HTML file directly on your file system. You should try it, but if it doesn't work, then you will have to run a web server, put your files on a web server, or use a text editor with preview capabilities. [Visual Studio Code](https://code.visualstudio.com/), with the `Html Preview` plugin is the example we will use for this tutorial, but there are many other options. You should download and install Visual Studio Code, or an equivalent text editor, before starting this tutorial. A text editor is different from other programs you may already use for editing 'text', such as LibreOffice or Word, in that it edits only plain text files.
 
 We will start by setting up a directory structure for our files. You may simply want to copy the structure of this tutorial, which looks like:
 
@@ -62,9 +62,13 @@ Inside your new script element, add the lines:
 
 You don't need to be a JavaScript expert to use CETEIcean, but learning how the basics work will be helpful. If you want advanced behaviors, you will have to know JavaScript. An excellent guide is available from the [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide) (MDN) in many languages. The lines of code above are doing a few things: first, a variable, `c` is defined as a new CETEI object. This will do the work of loading and styling our source file for us. Next, we tell `c` to load the source file and turn it into HTML Custom Elements, and we're also giving it a function that will take the results and put them into the `<body>` of our index.html file. `document.getElementsByTagName('body')` calls a function available on the built-in `document` object (`document` is the HTML document loaded into the browser) that finds all the body elements and returns them in an Array (a list whose members can be accessed by index number). There is only one body element, so we're getting the first item in the Array, at index 0. To that item, an HTML Element, we are appending as a child the TEI document we just loaded.
 
-At this point, if you're using Atom, you should be able to run HTML Preview from the Packages menu and see your document. If you aren't using Atom, you can try putting your documents on a web server. If you're familiar with using GitHub, you can use GitHub Pages ([tutorial](https://guides.github.com/features/pages/)—you can skip the themes step and just use a repository with the tutorial you're reading in it). If you have Python installed on your computer, you can run a simple web server in the tutorial directory with the command:
+At this point, if you're using Visual Studio Code, you should be able to run HTML Preview with ctrl+shift+v or cmd+shift+v and see your document. You may need to disable security settings when prompted in order for this to work. If you aren't using Visual Studio Code, you can try putting your documents on a web server. If you're familiar with using GitHub, you can use GitHub Pages ([tutorial](https://docs.github.com/en/pages/quickstart)—you can skip the themes step and just use a repository with the tutorial you're reading in it). If you have Python 3 installed on your computer, you can run a simple web server in the tutorial directory with the command:
 ```bash
-python -m SimpleHTTPServer
+python3 -m http.server
+```
+If you have NodeJS installed, you can use:
+```bash
+npx serve
 ```
 Your computer may also come with web serving capabilites built in, or you can install [MAMP](https://www.mamp.info) or something similar.
 

package/tutorial_ja/README.md

@@ -0,0 +1,202 @@
+# CETEIcean と TEI Publishing を始めるにあたって
+
+[CETEIcean](https://github.com/TEIC/CETEIcean) は JavaScript のプログラムであり、Webでの (Text Encoding Initiative XML)[https://tei-c.org/release/doc/tei-p5-doc/en/html/index.html]  のファイル公開を簡単にできるようにするためのものです。CETEIceanが何をしているかを理解するためには、TEIとその活用に関する若干の背景知識が必要になります。入門的な資料は、 [TEI by Example](https://teibyexample.org/) でみつけられるはずです。 
+
+このチュートリアルでは、CETEIceanを用いてTEIファイルを公開するための一連のステップを解説します。TEI P5の形式の（大きいですが）単純なファイル、`fpn-washington.xml`を用いて解説を始めます。我々はこのファイルをWebブラウザに表示することを目指します。
+
+はじめに、作業結果の表示に関して留意していただきたい点があります。CETEIceanのデフォルトのTEI表示方法は、別の場所からTEIファイルを読み込むことに依存しています。この場合、ローカルのファイルシステム上のHTMLファイルを直接表示することになりますので、ブラウザによっては許可しない場合があります。まずは試してみていただくとよいのですが、うまくいかない場合は、Webサーバーを動かすか、ファイルをWebサーバーに置くか、プレビュー機能のあるテキストエディタを使うことになります。このチュートリアルでは、[Visual Studio Codo](https://code.visualstudio.com/) の `Html Preview` プラグインを使用しますが、他にも多くの選択肢があります。このチュートリアルを始める前に、Visual Studio Code または同等のテキストエディタをダウンロードし、インストールしておく必要があります。（あるいはPythonのような簡易HTTPサーバを稼働できるプログラミング言語でもよいです。）テキストエディタは、LibreOfficeやWordのような「テキスト」を編集するためのプログラムとは異なり、プレーンテキストファイルのみを編集するものです。
+
+まず、今回のファイルのためのディレクトリ構造を設定することから始めましょう。このチュートリアルの構造をコピーして、次のようにするとよいでしょう。
+
+```
+  tutorial/
+      |
+       --- css/
+            |
+             --- tei.css
+      |
+       --- js/
+            |
+             --- CETEI.js
+      |
+       --- fpn-washington.xml
+       --- meros.xml       
+       --- README.md (the file you are reading)
+```
+
+ルートのディレクトリ（フォルダ）に`index.html` というファイルを作成して、内容を以下のようにしてみてください：
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  
+</head>
+<body>
+  
+</body>
+</html>
+```
+
+これは、TEIファイルを表示するための命令を入れるシェルとして機能します。TEIと同様に、HTMLファイルには`head`と呼ばれるヘッダーと`body`があります。CSS (Cascading Style Sheets)とJavaScriptファイルへのリンクを置き、CETEIceanを動かすためのJavaScriptを少し書きます。では、`<head>`以下の最初の空白行に以下のように記述してください：
+
+```html
+  <link rel="stylesheet" href="css/tei.css">
+```
+
+これはCSSファイルをHTMLページにリンクし、そこに用意されたスタイル命令にアクセスできるようにします（まだ少ししかありませんが、これから追加していきます）。次に、スタイルシートのリンクの後に次の行を追加して、CETEIceanライブラリをリンクします：
+
+```html
+  <script src="js/CETEI.js"></script>
+```
+
+これでファイルを読み込む準備ができました。index.html` ファイルにもう一つ `<script></script>` 要素を追加します。ただし、今回は `@src` 属性は付けません (この中にスクリプトを入れるからです)。
+
+今回作成した`<script>`エレメントの内側に、以下の行を追記してください：
+
+```js
+  let c = new CETEI();
+  c.getHTML5('fpn-washington.xml', function(data) {
+    document.getElementsByTagName("body")[0].appendChild(data);
+  });
+```
+
+CETEIceanを使うにあたっては、JavaScriptの専門家である必要はありませんが、基本的な動作を学んでおくことは有用です。もし、高度な動作をさせたいのであれば、JavaScriptの知識が必要でしょう。優れたガイドが[Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide) (MDN)から多くの言語で提供されています。
+
+では、上のコードの行を簡単に解説しておきましょう。上の行はいくつかのことを行っています：まず、変数 `c` が新しいCETEIオブジェクトとして定義されています。このオブジェクトはソースファイルの読み込みとスタイル指定を行なってくれます。次に、`c`にソースファイルを読み込んでHTMLカスタム要素に変換するように指示し、その結果を受け取ってindex.htmlファイルの`<body>`に配置する関数も与えています。`document.getElementsByTagName('body')` は組み込みの `document` オブジェクト (`document` はブラウザに読み込まれた HTML ドキュメント) で利用できる関数を呼び出して、すべての body 要素を見つけて Array (インデックス番号でアクセスできるリスト。Pythonで言うリストとほぼ同じ。) で返しています。body 要素はひとつだけなので、Array の1つ目（0から数えるので0番）にある項目を取得します。その項目であるHTML要素に、先ほど読み込んだTEIドキュメントを子要素として追加しています。
+
+## TEI/XMLファイルをindex.htmlのJavscriptに読み込む
+
+この時点で、Visual Studio Codeを使用している場合は、ctrl+shift+v か cmd+shift+v でHTMLプレビューを実行し、文書を見ることができるようになっているはずです。この機能を使用しようとしてプロンプトが表示されることがあれば、セキュリティ設定を無効にする必要がある場合があります。 Visual Studio Code を使っていない場合は、ドキュメントをウェブサーバーに置いてみるとよいでしょう。GitHub の使用に慣れているなら、GitHub Pages ([tutorial](https://guides.github.com/features/pages/)-テーマのステップをスキップして、読んでいるチュートリアルが入っているリポジトリだけを使うことができます) を使用することができます。Python 3がインストールされていれば、tutorialディレクトリで簡単なWebサーバをコマンドで実行することができます。
+
+```bash
+python3 -m http.server
+```
+
+あるいは、もし NodeJS をインストールしてある場合は以下のようにすることもできます：
+
+```bash
+npx serve
+```
+
+また、お使いのコンピュータにウェブサーバー機能が組み込まれている場合もありますし、[MAMP](https://www.mamp.info)などをインストールすることもできます。
+
+現時点でのプレビューには様々な不具合があり、それを修正する必要があります。まず、CSSを追加してファイル内のTEI要素を処理することから始め、その後、CETEIceanの動作を追加してより洗練されたことを行うことにしましょう。もしまだXMLソースファイルをご覧になっていなければ、今すぐご覧になって、CETEIceanがすでに行っていることと、行っていないことを確認されるとよいでしょう。そうするとまず、画像付きの図が適切に読み込まれていることに気づくでしょう（画像がウェブサイトにホストされているため、オンラインの場合の話ですが）。teiHeader` のコンテンツは表示されないはずです。ページの始まりや行の始まりは無視されますが、`div`要素や`p`要素はブロックとしてフォーマットされます。少し調べると、ソースファイルの本文には19種類の要素があることがわかります：
+
+ * div
+ * head
+ * p
+ * pb
+ * hi
+ * figure
+ * graphic
+ * lb
+ * sic
+ * opener
+ * dateline
+ * closer
+ * salute
+ * signed
+ * emph
+ * lg
+ * l
+ * foreign
+ * name. 
+ 
+これらの中には、特別なスタイルや動作が必要ないものと、絶対に必要なものがあります：
+
+`css/` フォルダにある `tei.css` ファイルを見てみましょう。ご覧のように、今のところ2つのルールしかありません：
+
+```css
+tei-div {
+  display: block;
+}
+tei-p {
+  display: block;
+  margin-top: .5em;
+  margin-bottom: .5em;
+}
+```
+CSSセレクタの要素名には "tei "が付いていますが、これはCETEIceanがTEI要素をHTMLカスタム要素に変換するために行っていることです。これらのルールは、divがブロックとして表示され（新しい行で始まり、最後に改行される）、段落と同様に、後者も前後に多少のスペースを持つことを意味します。現在スタイルが設定されていない要素にどのようなスタイルを適用するかを決めるのは必ずしも容易ではありませんが、まずは簡単なケースをいくつか挙げてみましょう。ソースのXML文書では、目次と索引にリストを使っており、それらには常に `@type="simple"` が付いています。CSSを使って、これらをリストとしてフォーマットすることができます。以下を `tei.css` ファイルに追加してください：
+
+```css
+tei-list[type=simple] {
+  list-style-type: none;
+}
+tei-list[type=simple]>tei-item {
+  display: list-item;
+}
+```
+
+上記のCSSの最初のセレクタ（tei-list[type=simple]の部分）は `<tei-list type="simple">` 要素にマッチし、リストアイテムが箇条書きや数字で装飾されてはならないことを「list-style-type: none」で指定しています。2 番目のセレクタ（tei-list[type=simple]>tei-itemの部分）は `<tei-list>` 要素をリストアイテムとして識別します (HTML の `<li>` と同じです)。この変更を行ってからプレビューを再読み込みすると、目次がリストとしてフォーマットされているのがわかると思います。余白や別のスタイルを追加して、見栄えをよくするために実験することもできます。また、`<hi rend="italics">` の要素も同様にして簡単に扱うことができます：
+```css
+tei-hi[rend=italics] {
+  font-style: italic;
+}
+```
+
+改行（Line beginning）はちょっとややこしく、CSSの「擬似セレクタ」が必要です：
+
+```css
+tei-lb:before {
+  white-space: pre;
+  content: "\A";
+}
+```
+
+上記のものは、各 `<tei-lb>` の前に改行文字 (「 \A 」) を挿入し、(例えばコードのブロックのように) 整形されたテキストとして扱うようにブラウザに指示するものです。HTMLでは通常、改行は書式設定のために無視されるため、このようにしなければなりません。CSSでできることは他にもありますが、これはCETEIceanの振る舞い（behaviors）を書式設定のために使うことができるかどうかを検討する良いポイントになります。HTMLには`<lb/>`に相当する要素、`<br>`があります。もし、`<tei-lb>`の中に`<br>`を入れたらどうでしょうか？それは、いくつかの behaviors を追加することで可能です。index.html の `<script></script>` タグ内のコードの1行目と2行目の間に、次のように追加します：
+
+```js
+  let behaviors = {
+    "tei": {
+      "lb": ["<br>"],
+    }
+  };
+  c.addBehaviors(behaviors);
+```
+
+上記のものは、Javascriptオブジェクトを作成し、変数 `behaviors` に代入しています。そして、 `addBehaviors` メソッドを使用して、先ほど作成した `CETEI` オブジェクト（つまり、変数 `c` ）にそれを渡します。behaviorsオブジェクトの中に、"tei"（すべてのカスタム要素のプレフィックス）というラベルの付いたセクションがあり、その中で要素のbehaviorsを定義しています。CETEIceanは "lb "のような要素名（接頭辞のないTEI名を使用していることに注意）にマッチするものを見つけると、それを適用します。`<lb/>`の場合には、1つの `<br>` 要素を含むリストを探し、そして、見つかった `<tei-lb>` 要素のコンテンツの前に `<br>` タグを挿入します。そして、ブラウザから見た最終的な結果は次のようになります：
+
+```html
+<tei-lb><br></tei-lb>
+```
+ブラウザは `<tei-lb>` が何をするものかわからないので無視しますが、`<br>` は何をするのかわかるので、改行として表示します。この挙動を利用する場合、`tei-lb`に対するCSSルールは必要ないことと、ソースファイルの中のすべての改行に対して2つの改行が付いてしまうことに注意してください。
+
+Behaviors はこれよりもっと複雑にすることもできます。ソースファイルには `<div>` 要素があり、それらは入れ子になっていて、さらに `<head>` 要素を持つ場合があることにお気づきでしょう。HTML では、異なるレベルのヘッダーを `h1`、`h2`、`h3` などで表現します（最大で `h6` まで）。これをより洗練された動作で行うことができます。
+
+```js
+  let behaviors = {
+    "tei": {
+      "head": function(e) {
+        let level = document.evaluate("count(ancestor::tei-div)", e, null, XPathResult.NUMBER_TYPE, null);
+        let result = document.createElement("h" + level.numberValue);
+        for (let n of Array.from(e.childNodes)) {
+          result.appendChild(n.cloneNode());
+        }
+        return result;
+      },
+      "lb": ["<br>"],
+    }
+  };
+  c.addBehaviors(behaviors);
+```
+
+上記の新しい「head」behaviorsは何か異なることをしています。Array の代わりに JavaScript の関数を使用し、パラメータとして処理される要素（`e`）を取得します。それは `<tei-head>` を含む `<tei-div>` の深さを含む `level` 変数を作り、そのレベルに対応する `<h[level]>` 要素を作り、現在の要素の内容をそこにコピーし、新しい header 要素を返します。CETEIceanは `<tei-head>` の内容を隠し、代わりにheading要素を表示します。ここで示したコードには潜在的なバグがあることに注意してください：非常に深くネストされたドキュメントでは、例えば `<h7>` 要素が生成されるかもしれませんが、それは有効なHTMLではありません。現在のソースは3階層以上にはなりませんが、`<h6>` 以上にならないようにするためのチェックを追加するとよいでしょう。
+
+CETEIceanは多くのビルトイン動作を備えており、例えばTEIの`<graphic>`は、我々の側で何もしなくても処理されます。ビルトインされた動作にマッチを追加することで、ビルトインされた動作を置き換えたり、オフにしたりすることができます。もし、デフォルトでは隠されているTEI Headerの内容を表示したいのであれば、次の…
+
+```js
+  "teiHeader": null,
+```
+
+…をbehaviorsオブジェクトに追加してください。その際、ヘッダーの内容に対応するCSSスタイルやbehaviorsを追加しておくとよいでしょう。
+
+## 日本語ファイルのための補足
+
+`<ruby>`を適切に表示させたい場合、一度生成したHTMLを修正して表示する方法を`example/index_ja.html`に示してあります。もっと良い方法があるかもしれませんが、とりあえず一例として参照してください。
+
+
+このチュートリアルでは、ソースファイルに関するすべての可能性を検討するわけではありません。ソースのマークアップをどのように表現するかは、実験して決めてください。より完全な例は [example/](example) フォルダーにあります。また、オリジナルの HTML バージョンと TEI P4 ソースは <https://docsouth.unc.edu/fpn/washington/menu.html> で見ることができます。

package/tutorial_ja/css/tei.css

@@ -0,0 +1,8 @@
+tei-div {
+  display: block;
+}
+tei-p {
+  display: block;
+  margin-top: .5em;
+  margin-bottom: .5em;
+}

package/tutorial_ja/example/css/tei.css

@@ -0,0 +1,98 @@
+p.break {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 80%;
+  border-top: thin solid silver;
+  color: gray;
+}
+tei-byline {
+  display: block;
+  text-align: center;
+}
+tei-closer {
+  display: block;
+}
+tei-closer>tei-salute {
+  display: block;
+}
+tei-closer>tei-signed {
+  display: block;
+  text-align: right;
+}
+tei-div {
+  display: block;
+}
+tei-div[type=dedication]>tei-lg {
+  margin: auto;
+  text-align: center;
+}
+tei-docauthor {
+  display: block;
+  text-align: center;
+}
+tei-docauthor>tei-name {
+  display: block;
+  font-size: 2em;
+}
+tei-docimprint {
+  display: block;
+  margin-top: 10em;
+  text-align: center;
+}
+tei-doctitle>tei-titlepart {
+  display: block;
+  text-align: center;
+}
+tei-doctitle>tei-titlepart[type=main] {
+  font-size: 3em;
+}
+tei-doctitle>tei-titlepart[type=subtitle] {
+  font-size: 2em;
+}
+tei-emph[rend=bold] {
+  font-weight: bold;
+}
+tei-figure {
+  display: block;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  text-align: center;
+}
+tei-figure>tei-p {
+  font-size: 80%;
+  font-family: Arial, Helvetica, sans-serif;
+  text-align: center;
+}
+tei-hi[rend=italics] {
+  font-style: italic;
+}
+tei-l {
+  display: block;
+}
+tei-lg {
+  display: block;
+  margin-left: 5em;
+}
+tei-list[type=simple] {
+  list-style-type: none;
+}
+tei-list[type=simple]>tei-item {
+  display: list-item;
+}
+tei-p {
+  display: block;
+  margin-top: .5em;
+  margin-bottom: .5em;
+  text-align: justify;
+}
+tei-tei {
+  font-family: Georgia, 'Times New Roman', Times, serif;
+}
+tei-text {
+  display: block;
+  width: 750px;
+  margin: auto;
+}
+tei-titlepage {
+  display: block;
+}
+

package/tutorial_ja/example/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="css/tei.css">
+  <script src="../js/CETEI.js"></script>
+  <script>
+    let c = new CETEI();
+    let behaviors = {
+      "tei": {
+        "head": function(e) {
+          let level = document.evaluate("count(ancestor::tei-div)", e, null, XPathResult.NUMBER_TYPE, null);
+          let result = document.createElement("h" + (level.numberValue>7 ? 7 : level.numberValue));
+          for (let n of Array.from(e.childNodes)) {
+            result.appendChild(n.cloneNode());
+          }
+          return result;
+        },
+        "lb": ["<br>"],
+        /* Insert a <p> with the content of the <pb>'s @n attribute inside it
+           Add a line above with CSS */
+        "pb": ["<p class=\"break\">$@n</p>"],
+      }
+    };
+    c.addBehaviors(behaviors);
+    c.getHTML5('../fpn-washington.xml', function(data){
+      document.getElementsByTagName('body')[0].appendChild(data);
+    });
+  </script>
+</head>
+<body>
+
+</body>
+</html>

package/tutorial_ja/example/index_ja.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="css/tei.css">
+  <script src="../js/CETEI.js"></script>
+  <script>
+    let c = new CETEI();
+    let behaviors = {
+      "tei": {
+        "head": function(e) {
+          let level = document.evaluate("count(ancestor::tei-div)", e, null, XPathResult.NUMBER_TYPE, null);
+          let result = document.createElement("h" + (level.numberValue>7 ? 7 : level.numberValue));
+          for (let n of Array.from(e.childNodes)) {
+            result.appendChild(n.cloneNode());
+          }
+          return result;
+        },
+        "lb": ["<br>"],
+        /* Insert a <p> with the content of the <pb>'s @n attribute inside it
+           Add a line above with CSS */
+        "pb": ["<p class=\"break\">$@n</p>"],
+      }
+    };
+    c.addBehaviors(behaviors);
+    c.getHTML5('../meros.xml', function(data){
+      document.getElementsByTagName('body')[0].appendChild(data);
+      let ruby = document.querySelectorAll('tei-ruby')
+      ruby.forEach(function(e1){
+        let rbt = e1.querySelectorAll('tei-rb,tei-rt')
+        let ruby = document.createElement('ruby');
+        rbt.forEach(function(e2){
+          let rbt = document.createElement(e2.tagName.replace(/TEI-/,''));
+          rbt.textContent = e2.textContent;
+          ruby.append(rbt);
+        });
+        e1.replaceWith(ruby);
+      });
+    });
+  </script>
+</head>
+<body>
+
+</body>
+</html>