縦書きに横スクロール

電子媒体で文章を表示するには、横書きで縦スクロール方式がほとんどです。詩、俳句、短歌などは横書きで表現したいものです。これからの表現方式には、HTMLがもっともっと使われることでしょう。

紙による表現を凌駕し、音や色が加わってより豊かな表現になることでしょう。今回、h2vRを使った縦書きとMarquee with CSS プラグインを利用した横スクロールを共演して、それなりに見栄えを整えた文章を表現してみました。

縦書きの横スクロール仕組み

縦書きはDIV要素にh2vr_XXのクラス名、横スクロールはmarqueeのクラス名を定義します。今回は、marqueeのDIV領域の入れ子として、h2vr_XXのDIV要素を宣言しています。それぞれ個別に利用する方法については、すでに当ブログで述べており、遡って紐解いていただくとありがたいです。

縦書きにした文章や画像が、いとも簡単にスクロールしたことには、たいへん驚きました。苦労したことは以前に解決済みと思われたmarqueeのイベント関数で文法エラーが発生して、まだ未解決です。

朗読との同期は、setTimeout関数にて切り抜けています。あか抜けたプログラミングは課題として残しています。

サンプル動作例

例により、松尾芭蕉、奥の細道「序文」を弟子の曽良を伴って出かけた旅姿、現代語訳とともに以下に表示します。再実行はブラウザのボタンをクリックします。

月つき日ひは百代はくたいの過客かかくにして、行ゆきかふ年としも又旅人也またたびびとなり。舟ふねの上うえに生涯しょうがいをうかべ、馬うまの口くちとらえて老おいをむかふる物ものは、日ひび旅たびにして旅たびを栖すみかとす。古人こじんも多おおく旅たびに死しせるあり。
予よもいづれの年としよりか、片雲へんうんの風かぜにさそはれて、漂泊ひょうはくの思おもひやまず、海浜かいひんにさすらへ、去年こぞの秋あき江上こうしょうの破屋はおくに蜘くもの古巣ふるすをはらひて、
やや年としも暮くれ、春立はるたてる霞かすみの空そらに白河しらかわの関せきこえんと、そぞろ神がみの物ものにつきて心こころをくるはせ、道祖神どうそじんの招まねきにあひて、取とるもの手てにつかず。
もも引ひきの破やぶれをつづり、笠かさの緒お付つけかえて、三里さんりに灸きゅうすゆるより、松島まつしまの月先心つきまずこころにかかりて、住すめる方かたは人ひとに譲ゆずり、杉風さんぷうが別墅べっしょに移うつるに、
　草くさの戸とも住替すみかわる代よぞひなの家いえ
面八句おもてはちくを庵いおりの柱はしらにかけ置おく。

芭蕉　　　　曽良
©TacM,2017 Ver0.03

　『奥の細道序文』　松尾芭蕉
月日は永遠に旅を続ける旅人であり、来ては去り、去っては来る年もまた同じように旅人である。船頭として船の上に生涯を浮かべ、馬子として馬のくつわを引いて老いを迎える者は、毎日旅をして旅をすみかとしている。古人の中には旅の途中で命を無くした風流人が多くいる。私もいつの年からか、ちぎれ雲が風に吹かれて漂うように誘惑されて、旅に出て歩きたい気持ちが我慢できず、海や浜辺をさすらい、去年の秋、隅田川の畔を破れ小屋において蜘蛛の巣を取り払って暮らしているうちに、次第にその年も暮れ、春になり霞(かすみ)が立ち込める空を見るにつけても、あの名高い白河の関を越えようと、人の心をそわそわさせる神が取り付いて私の心を狂わせ、道祖神が招くような気がして取るものも手につかない。旅行着の破れ目を直し、笠の紐（ひも）を付け替えて、足に灸をすえると、あの有名な松島の月の美しさが真っ先に気にかかって、住んでいる家は他人に売り、杉風の別宅に引越しする時に、句を詠んだ。「草の戸も」の句を発句とする連句の初めの８句を草庵の柱に掛けておく。

※※※※