どうもです！あの完全に蛇足なんですけど、投稿されたコードの一部をこんな感じで頭に改行記号を付けたらちゃんと縦になりました（改行の分長くなってるので高さを変えてあります...）。理由は分かんないですけど内部仕様が関係してそうです...ここまでやる必要はない気もするんですけど参考までに... pic.twitter.com/m0i0aPjC8G
— 黒狐 (@inaba_darkfox) November 30, 2022
どうもCENTER, CENTERで指定すると自然に改行で縦書きにしようとしたときに上の文字が消える謎の現象が発生するようです...LEFT, TOPでは普通に縦書きできたので。理由は分かんないですけどそういうことみたいですね...上記のやり方は 多分改行を使うことで消える文字の身代わりを作ってるぽいです。 pic.twitter.com/NZ3LElYl4b
— 黒狐 (@inaba_darkfox) November 30, 2022
どうやら2番目のCENTERがまずいらしいです。1番目と2番目で違う処理をしてるようで、2番目のCENTERが改行をうまく処理できないみたいです。なのでこれを使うときは横だけCENTERで調整して、TOPで高さだけいじるのが良さそうです。 pic.twitter.com/DJsjnJHoDx
— 黒狐 (@inaba_darkfox) December 1, 2022
そしてなぜNEORTでは正常に表示されたんだろう…と考えていたんですが、どうやらバージョンにより文字が消えるバグがあるようです。改行コード付きはp5 ver1.5.0だと先頭の文字が消え、1.4.0だと正常に表示されます。textAlignの2つめをTOPにすると1.5.0でも正常に表示されました。 pic.twitter.com/ELaBCA7sXi
— レオナ (@reona396) December 1, 2022
あと追加で…text描画時にtext("文字列", x, y, w, h)のようにwとhを指定した場合、この領域がrectModeの指定に影響受けちゃうというのもわかりました pic.twitter.com/aNtNX9hVyT
— レオナ (@reona396) December 1, 2022
いくつか落とし穴があって、
* textAlign()の2個目のパラメータをCENTERにして改行コード入りのテキストを表示すると文字が消失する場合がある
* text()の4個目、5個目のパラメータを指定してボックス内に描画した時、その領域がrectMode()の影響を受けている(これは仕様らしい)
* バージョンが古いとセーフな場合もある(ver1.4.0など)
* フォントが読み込めないのかとも疑ったがあまり関係なさそう
というわけで、文字をセンタリングしながら縦書きにしたい場合は改行コードを使わずtextWrap()を利用するのが良さそうです。
とはいえtextWrap()を利用するとtextAlign()の指定が効かなくなるようなので位置調整は適宜やる必要があるようです。
See the Pen
text_tategaki_sample by reona396 (@reona396)
on CodePen.
