だらっと学習帳

Processingとか p5.jsとか 好きです

p5.js ver1.5.0には文字を改行コードを使って縦書きにした際に文字が消失するバグがあるようです。






いくつか落とし穴があって、
* textAlign()の2個目のパラメータをCENTERにして改行コード入りのテキストを表示すると文字が消失する場合がある
* text()の4個目、5個目のパラメータを指定してボックス内に描画した時、その領域がrectMode()の影響を受けている(これは仕様らしい)
* バージョンが古いとセーフな場合もある(ver1.4.0など)
* フォントが読み込めないのかとも疑ったがあまり関係なさそう

というわけで、文字をセンタリングしながら縦書きにしたい場合は改行コードを使わずtextWrap()を利用するのが良さそうです。
とはいえtextWrap()を利用するとtextAlign()の指定が効かなくなるようなので位置調整は適宜やる必要があるようです。


See the Pen
text_tategaki_sample
by reona396 (@reona396)
on CodePen.


このエントリーをはてなブックマークに追加



原稿頑張ってます!
応援よろしくお願いします。
このエントリーをはてなブックマークに追加



「クリエイティブコーディングとは?」というテーマでオンライン登壇しました。
みなさまありがとうございました。

資料は下記に置いています。


このエントリーをはてなブックマークに追加

↑このページのトップヘ