撫子のとこなつかしき色を見ば

SVGで縦書き描画できたー☆　超簡単です♪　フォントは標準のままでも約物が横向いたり位置ずれたりしないし、ウェブフォントも読み込み完了を待つ必要は無いし、アンチエイリアスで文字ぼやけたりしないし、良き～良き～♫　アドベントカレンダー2022、七日目。

文法命令一覧

エディタ

プログラム

!『https://n3s.nadesi.com/plain/SVG.nako3』を取り込む。# SVG描画
!「https://n3s.nadesi.com/plain/bunsyo-seikei.nako3」を取り込む。# 行揃え
描画中キャンバスの「高さ」に0をDOM属性設定。

＃SVG作成
縦書きテスト＝[300,300]のSVG親要素作成。
ウェブフォント指定＝縦書きテストにSVG定義領域作成。

＃ウェブフォント設定
ウェブフォント指定に「<style>
    @font-face {波カッコ}
        font-family: "衡山毛筆フォント_web";
        src: url("https://snowdrops89.github.io/font/Musashi/KouzanMouhituFont.woff")  format('woff');
    {波カッコ閉じ}
</style>」をHTML設定。

＃文章
文章＝『「撫子を飽かでも、この人びとの立ち去りぬるかな。いかで大臣にも、この花園見せたてまつらむ。世もいと常なきをと思ふに、いにしへも、もののついでに語り出でたまへりしも、ただ今のこととぞおぼゆる」
　とて、すこしのたまひ出でたるにも、いとあはれなり。

源氏…なでしこのとこなつかしき色を見ば
　　　　　もとの垣根を人やたづねむ

「このことのわづらはしさにこそ、繭ごもりも心苦しう思ひきこゆれ」
　と、のたまふ。君、うち泣きて――

玉鬘…山がつの垣ほに生ひしなでしこの
　　　　　もとの根ざしをたれかたづねん

はかなげに聞こえないたまへるさま、げにいとなつかしく若やかなり。』

＃設定
行文字数＝20。余白＝20。行間＝8。文字間＝0。文字サイズ＝20。
フォント＝「"衡山毛筆フォント_web",serif」
フォントにSVG文字フォント設定。「{文字サイズ}px」にSVG文字サイズ設定。

文字幅＝文字サイズ。
文字高さ＝文字サイズ。

文章＝文章を行文字数で行揃え。
原稿＝文章を改行で区切る。

用紙幅＝(文字幅+行間)*((原稿の要素数)-1)+余白*2。
用紙高＝(文字高さ+文字間)*(行文字数)+余白*2。
縦書きテストの「幅」に用紙幅をSVG属性設定。
縦書きテストの「高さ」に用紙高さをSVG属性設定。
縦書きテストの「viewBox」に「0 0 {用紙幅} {用紙高}」をSVG属性設定。
描画X＝(縦書きテストの「幅」をSVG属性取得)-(文字幅/2+余白)。//xは文字の中央？
描画Y＝余白。//yは上端？

＃描画
ベージュ色にSVG塗り色設定。
[0,0,用紙幅,用紙高]へSVG四角描画。

黒色にSVG塗り色設定。
[描画X,描画Y]に[行間,文字間]で文章をSVG縦書き文章描画。

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ