【HTML】ボタンを画像で作りたくないけど、テキストは変なところで改行されてヤダ？それ、SVGでいーんじゃない？
最近のHTML、CSSは画像を使わなくてもでどうにかなる場面が多い。
概要
ノンデザイナーによるHTML、CSS格闘の話です。
スマホ用のWebサイトを作り、下記のようなボタンを用意しました。
<button type="button">結果を見る</button>
いたって普通のボタンですね。
実際にはこれにpaddingやらborder-raduisやらついているのでもう少しいい感じのボタンです。
余談ですが今回はTailwindCSSで色々していますので、classに色々つけています。
何が起きたのか
開発はPC上で行っていたので、ブラウザのレスポンシブデザインモードで見ていました。
実機での確認は最後に行う予定だったので大体で作成。
いい感じじゃ～んと十数台の実機で確認を始めると、端末によって
結果を見
る
と表示されてしまいました。うーん、美しくない。
一応、スマホからしかアクセスしない想定、タブレット端末はあってもいいけど...くらいな感じです。
特別、画面幅に合わせてボタンの横幅を変えたい、というこだわりはなかったものの画像の用意が諸事情で出来なかったためCSSなどでなんとかするしかありませんでした。
SVGという手がある！
そこで思いついたのがテキストをSVG(画像)として描画する、という方法。
SVGなら大きさが変わっても劣化しないですし、勝手に改行されるということもありません。
この後、viewBoxの概念に少々振り回されてしまったのですが、分かりやすい解説のページはこちら。
『SVGのviewBoxをわかりやすく紐解く』
具体値は一部省略しています。
<button>
<svg viewBox="0 0 X X">
<text text-anchor="middle" font-family="XXX" fill="XXX" x="X" y="X">
結果を見る
</text>
</svg>
</button>
各属性の詳しい解説はググれば出てくるので割愛します。
ハマったポイントやコツをば。
- svgタグの描画範囲とviewBoxの描画範囲は別の扱いであるため、文字のbuttonタグの中に置いたviewBoxの範囲によってはテキストが表示されず、上手くテキストが描画されていないと勘違いした。
- 文字の色、フォントはtextタグ内で指定するのがよい。ブラウザによって継承したCSSの設定が使用されない場合があるため。class属性で共通で書いたらうまく行くかもしれない(未検証)
- viewBoxは名前の通り描画のボックスであり、開始地点とwidth, heightを指定。textタグのx属性とy属性はviewBox内での位置を調整するもの。
- viewBoxの位置が意図通り指定されていればbuttonタグの横幅が画面幅によってレスポンシブであっても、常に中央に配置可能。
文字数分の最低限のwidthがないと、viewBoxによる描画範囲が足りなくなり、文字が見切れるようになってしまうため、画面幅に合わせてJavaScriptでfont-size属性を動的に変えるなどは考えないといけないかもしれません。
※今回は文字数もさほど多くないため捨てました。
参考サイト
『「10分でわかるSVG 基礎編」サンプル』
『SVGによるテキストの描画サンプル』
Discussion