細かな噴出しなどのコメントをWEBで組む？

質問

現在ホームページを作成していますが、難しく困っています。

というのが、大きな画像を背景にして、文字の部分はテキストで書こうと思い試行錯誤しているのですが問題がありすぎてうまくいきません。

例えばなのですが、これはたまたまWEB上で見つけたイメージなのですが、添付の画像を見てください。
もし、これらの噴出しの文章をすべてテキストで配置しようと思う場合どのようにしたらよいでしょうか？

現在、大きな画像を作成し噴出し部分の文章は消したうえで背景としてまず配置します。
そのDIV要素の中で、色々と考えながらCSSにてコメントを配置しているのですが、気が遠くなります。ID数半端ない状態です。汗）））

さらに、ちょっといけるかも？と思っても、ブラウザによってはマージン、パッディング、フォントサイズや行間隔。同じサイズを設定しても全く異なる場合がありぐちゃぐちゃ状態になってしまいました。涙でそうです。

実は、テキストで配置するのはテキストで書きたいからではないのです。
画像だと、どうしても小さな文字を読みにくく、また、スマホなどで拡大すると汚く表示されてしまいます。

要は、きれいに読むことができればそれで解決です。

どなたか詳しい方いらっしゃいましたら、画像のままで拡大拡大しても綺麗に読める方法があれば教えていただけないでしょうか？
また、やはり画像だと汚くなるので、面倒でもテキストで書くほうがよいという場合、このような感じで細かな設定を、どのブラウザ（ある程度）綺麗に設定する方法をご存知であれば合わせてご教授願います。

どうぞ、よろしくお願いします。

回答No.2

神崎 渉瑠（@taloo） · ベストアンサー

No.1です。一応補足です。
画像にする目的は、ブラウザの設定に係わらず文字の大きさを制作者が指定した物にするためです。
文字の大きさが同じであれば確実に吹き出しの中に収まりますから、ブラウザの設定を考慮する必要がありません。

いずれにしてもHTMLでは無理だと思いますから、
見た目を優先するのであれば、文字をパス（アウトラインフォント）の状態で扱い、描画できるSVGやPDFをお勧めします。
全体をSVGやPDFにすれば全体のズームしかできなくなると思いますので、文字が吹き出しの大きさを超えるという事がなくなると思います。

お礼

有難う御座います。

SVGにて対応しました。
とても丁寧なご説明感謝いたします。

回答No.1

神崎 渉瑠（@taloo）

マージンやパディングはスタイルシートを指定すれば良いですが、
文字の大きさを固定しない（ブラウザ設定による変動を考慮する）のであれば、
吹き出しを擬似フレームにしてスクロールさせるか、
そうでなければ全部画像にする（SVG、CANVASも画像の一種です）しかないと思います。