[編集モード] かさねとは八重撫子の名なるべし

キャンバスに文章を縦書きしたい！　ただそんだけなのに、いろいろ大変だった・・・💧　行揃えのテスト。ウェブフォントの読み込み完了を判定する術のテスト。アドベントカレンダー2022、七日目。

!「https://n3s.nadesi.com/plain/drawPlus.nako3」を取り込む。# 縦書き描画・ウェブフォント読み込み完了判定。
!「https://n3s.nadesi.com/plain/bunsyo-seikei.nako3」を取り込む。# 行揃え

＃ウェブフォント設定
DOM親要素に「<style>
            @font-face {波カッコ}
            font-family: "青柳衡山フォントT_web";
            src: url("https://snowdrops89.github.io/font/Musashi/AoyagiKouzanT.woff")  format('woff');
            {波カッコ閉じ}
            @font-face {波カッコ}
            font-family: "青柳衡山フォントT_縦書き用";/*縦書きすると横になっちゃう記号と平仮名をサブセットフォント化*/
            src: url("https://snowdrops89.github.io/font/Musashi/AoyagiKouzanT_tateWSF.woff")  format('woff');
            {波カッコ閉じ}
        </style>」をHTML設定。
「青柳衡山フォントT_web」のウェブフォント読み込み完了待機。
「青柳衡山フォントT_縦書き用」のウェブフォント読み込み完了待機。

＃文章
文章＝『　那須の黒羽といふ所に知る人あれば、これより野越にかかりて、直道を行かんとす。
　農夫の家に一夜を借りて、明くればまた野中を行く。
　そこに野飼ひの馬あり。
　草刈る男に嘆き寄れば、野夫といへどもさすがに情け知らぬにはあらず。
「いかがすべきや。されどもこの野は縦横に分かれて、うひうひしき旅人の道踏み違へん。あやしう侍れば、この馬のとどまる所にて馬を返し給へ」
　と、貸しはべりぬ。
　小さき者二人、馬の跡慕ひて走る。
　一人は小姫にて、名を「かさね」といふ。
　聞き慣れぬ名のやさしかりければ、

かさねとは八重撫子の名なるべし　　　曾良

やがて人里に至れば、価を鞍壷に結びつけて馬を返しぬ。』

＃設定
「normal 24px 青柳衡山フォントT_縦書き用, 青柳衡山フォントT_web, serif」に描画フォント設定。
行文字数＝20。余白＝10。行間＝5。文字間隔＝5。
文字幅＝「あ」の文字幅取得。
文字高さ＝「あ」の文字高さ取得

＃キャンバスのサイズ設定
原稿＝文章を行文字数で行揃えして、改行で区切る。
描画中キャンバスの「幅」に(文字幅+行間)*((原稿の要素数)-1)+余白*2をDOM属性設定。
描画中キャンバスの「高さ」に(文字高さ+文字間隔)*(行文字数)+余白*2をDOM属性設定。
描画X＝(描画中キャンバスの「幅」をDOM属性取得)-(文字幅+余白)。
描画Y＝余白+文字高さ。

# キャンバスにDOM属性設定すると、描画フォント設定がクリアされちゃうみたい（？）なので再設定。
「normal 24px 青柳衡山フォントT_縦書き用, 青柳衡山フォントT_web, serif」に描画フォント設定。

＃文字描画
文章＝文章を行文字数で行揃え。
文章を[行間,文字間隔]で[描画X,描画Y]へ縦書き文章描画。

デバッグ × キャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] かさねとは八重撫子の名なるべし

素材のアップロード