縦書き対応のフォーム実装: amp-up

皆さん、

ブラウザでの縦書きフォームへの対応が進んでいないことは、
すでに指摘されている通りです。しかし、ブラウザに頼ることな
くJavascriptで縦書きフォームに対応してしまった実装が現れま
した。amp-up.io社のamp-upというオンラインテスト環境です。

縦書き表示される選択候補から選ぶこと(HTMLのselect相当）と
一行以内の縦書き文字列を入力すること(HTMLのinput相当）が
出来ています。長文の入力(HTMLのtextarea相当）はまだ
未実装です。

縦書き・ルビの例題(https://qti.amp-up.io/testrunner/start/16)
を見ていただければ感じがつかめます。古文と漢文の
テスト問題も入れてあります。漢文用のスタイルシート
は、オープンソースのkanbunHTMLにあるものを用いて
います。漢文HTMLの作成にも、kanbunHTMLのJavascript
を用いています。

このオンラインテスト環境は、1EdTechという団体が制定したQTI3
という仕様に基づいています。QTI3は、HTMLに基づいていますが、
HTMLのフォーム要素を一切使っておらず、独自の宣言的要素を導
入しています。たとえば一行以内の文字列入力は、
qti-text-entry-interaction要素を使います。

QTI3ではCSS Writing Modesを利用できるのですが、それだけでは
不便なので共有CSSスタイルシートを用意し、それを呼び出すため
のHTMLクラスを用意しようとしています。これについては、
Vertical Writing Support in QTI 3という文書をご覧ください。

国内のNet Learning社からのプレスリリースにamp-upに
ついての情報があります。

URL
- プレスリリース <https://www.netlearning.co.jp/press-r/20230220.html>
- 縦書き・ルビの例題 <https://qti.amp-up.io/testrunner/start/16>
- kanbunHTML <https://github.com/untunt/kanbunHTML>
- amp-up.io
- QTI3仕様 <https://www.imsglobal.org/spec/qti/v3p0/oview>
- Vertical Writing Support in QTI 3
<https://docs.google.com/document/d/1I4Ik9jRgrjyBemUTsFhrlsf_cHxGN5EMNs5gjcQPi8g/edit#heading=h.v966kfbe0x2j>

 --
慶應義塾大学政策・メディア研究科特任教授
株式会社ネットラーニング

村田 真