日別アーカイブ: 2017-04-22

奥の細道・序文

縦書きに横スクロール

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

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

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

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

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

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

サンプル動作例

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

つき百代はくたい過客かかくにして、きかふとし又旅人也またたびびとなりふねうえ生涯しょうがいをうかべ、うまくちとらえておいをむかふるものは、たびにしてたびすみかとす。古人こじんおおたびせるあり。
もいづれのとしよりか、片雲へんうんかぜにさそはれて、漂泊ひょうはくおもひやまず、海浜かいひんにさすらへ、去年こぞあき江上こうしょう破屋はおくくも古巣ふるすをはらひて、
ややとしくれ春立はるたてかすみそら白河しらかわせきこえんと、そぞろがみものにつきてこころをくるはせ、道祖神どうそじんまねきにあひて、とるものにつかず。
ももひきやぶれをつづり、かさつけかえて、三里さんりきゅうすゆるより、松島まつしま月先心つきまずこころにかかりて、すめかたひとゆずり、杉風さんぷう別墅べっしょうつるに、
 くさ住替すみかわぞひなのいえ
面八句おもてはちくいおりはしらにかけく。

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

※※※※