Q. 囲み文字を表示するには?

囲み文字を実現するには、SVGを利用してください。

○のSVG画像と、HTMLファイルの記述例をサンプルとして用意しました。ZIPファイルに含まれるcircle.htmlをCopper PDFで変換してください。

サンプルをダウンロード

やり方は、囲みたい文字の上に○の画像を重ねるだけです。ただし、画像を文字より若干大きくすることと、横にマイナスのマージンを指定して文字に食い込ませること、画像の位置を若干下げることがポイントです。以下のHTMLコード例をご覧ください。

亀<object style="width: 1.2em; height: 1.2em; margin-left: -1.1em; vertical-align: -.2em;"
data="circle.svg" type="image/svg+xml">

widthとheightに1.2emを指定して、大きさを文字の約1.2倍としています。左側マージンに-1.1emを指定しているため、画像が左側の文字の真ん中にくるように重なります。そのままでは画像の下辺が文字のベースラインに合わさり、若干位置が高くなっているため、vertical-align: -.2em;を指定して位置を調整しています。


PDF

Comments are closed.