水無月ばけらのえび日記

bakera.jp > 水無月ばけらのえび日記 > SVGのテキストとMedia Queries

SVGのテキストとMedia Queries

2012年3月6日(火曜日)

SVGのテキストとMedia Queries

公開: 2012年2月13日16時10分頃

最近、SVGを使うことが多くなってきたのですが、テキストの処理がHTMLとは少し異なり、やや癖があります。そのあたりを少しメモしておきます。

テキストの改行

HTMLの場合は、要素内に適当にテキストを書くと、その要素の中にテキストが表示されます。要素の幅に対して長いテキストが入った場合は、テキストは自動的に改行されます。

SVG1.1の場合、テキストを置くにはtext要素を使い、text要素自体にx属性y属性で座標を指定して配置します。この要素には幅という概念がなく、テキストが自動で折り返されることはありません。SVG1.1では「自動改行はない」という旨がはっきり書いてあります。

SVG performs no automatic line breaking or word wrapping. To achieve the effect of multiple lines of text, use one of the following methods:

以上、SVG1.1 10.1 Text Introduction より

改行するするための方法は3つ挙げられています。

  • text要素を複数使い、それぞれに良い感じの座標を指定する
  • text要素の中でtspan要素を複数使い、それぞれに良い感じの座標を指定する
  • SVG以外の手段に頼る (たとえばXHTMLを埋め込む)

text要素を複数使うと、それぞれのテキストは別々の塊とみなされます。たとえば、選択するときにひとかたまりに選択できなかったりする可能性があります。単なる折り返しの場合はtspan要素を使うのが良いでしょう。

といっても、tspanを使えば改行されるというわけではなく、個々のtspanに座標を指定する必要があるので面倒ですが。

参考: SVG Tiny 1.2の場合

……と、SVG1.1では実に面倒なのですが、SVG Tiny 1.2 (www.w3.org)にはtextArea要素 (www.w3.org)があり、テキストを流し込めば自動で折り返しできるようになっています。HTMLのbr要素に相当するtbreak要素 (www.w3.org)もあります。

以下にtextAreaのサンプル画像があります。

ここでテキストが表示されればtextArea要素が使えるということなのですが、IE9, Firefox10, Chrome17では表示されないようです。単に SVG Tiny 1.2 に対応していないのでしょう。

というわけで、SVG1.1のtspan要素で地道にやるしかなさそうです。

テキストのセンタリング

HTMLの場合、CSSのtext-alignプロパティを使えばすぐにセンタリングできます。

SVG1.1では、text-anchor (www.w3.org)を middle に設定します。ただしこの場合、指定した座標がテキストの中心になるように、座標から左右に向かってテキストが伸びる形になります。座標を変えずにtext-anchorをstartからmiddleに変えると、テキストの位置は左にずれます。

※左と書きましたが、これは書字方向がLTRの場合です。text-anchorにはleft, rightという指定はなく、start, endがあります。初期値はstartですが、これは書字方向がLTRなら座標の位置が左端に、RTLなら右端になるという指定です。left, rightという指定方法よりも格好いいと個人的には思います。

style要素を使って指定することもできます。画像内のすべてのテキストをセンタリングにする場合は、以下のように書いておくと楽です。

<style type="text/css">
text {
text-anchor: middle;
}
</style>

text-anchorは継承されますので、textに指定すると子要素のtspanにも指定が効きます。

テキストのサイズ

フォントまわりでは、HTMLと同じようにfont-sizeやfont-familyなどが使えます。ほとんどの場合、複数のテキストに同じサイズ、同じフォントを指定すると思いますので、style要素で指定するのが便利だと思います。

ブラウザによっては、SVG内のテキストにも最小フォントサイズの指定が有効なので注意が必要です。少なくともChromeでは、SVG画像を縮小しても、テキストのサイズは一定以下にならないようです。テキストの周囲の図や枠などはいくらでも小さくなりますので、テキストがはみ出したり、重なったりする可能性があります。

逆に、Chrome以外のブラウザではテキストが際限なく縮小されます。これはこれで、読めないほど小さくなってしまうおそれがあります。

Media Queries

SVG画像の中でstyle要素を使ってCSSを書くことができるのですが、このとき、Media Queries (www.w3.org)が使えます。少なくともIE9, Firefox10,Chrome17では有効でした。

SVGを使う場合、画像が拡大・縮小されることを想定しているケースが多いと思います。Media Queriesを使うと、縮小されたとき、あるいは拡大されたときにだけ異なるスタイルを適用することができるようになり、SVGの幅が広がります。

先に述べた「Chromeだけ最小フォントサイズがある」という問題についても、むしろ縮小時にフォントサイズを大きくするようなスタイルを指定することで、他のブラウザの挙動をChromeに近づけることができます。

Media Queriesは今のところフォントサイズにしか使っていませんが、うまく活用すればいろいろなことができそうで、可能性を感じています。

最大の問題は、Illustrator (www.amazon.co.jp)からの書き出しではそんな気の利いたことができないということです。このような機能を活用しようとすると、SVGのXMLをテキストエディタ等で編集する必要があります。それなりにSVGの知識を持っている人でないと編集できません。

SVGのオーサリングをどうするのか、というのは今後の課題になるかもしれません。

関連する話題: Web / HTML / SVG / CSS

最近の日記

関わった本など

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターンデザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチコーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーションウェブの仕事力が上がる標準ガイドブック 5 WebプログラミングWeb Site Expert #13Dreamweaver プロフェッショナル・スタイル [CS3対応] (Style for professional)

その他サイト