HOME

文字の背景に canvas を配置して罫線を引く-A

{ svg, javascript で作成したプログラム一覧 }

推奨 ブラウザ : chrome

罫線テスト画像A
罫線テスト画像B

文字列の背景に、 canvas タグを配置して、ノートような罫線を書き出す プログラム作成しました。
ブログの背景に罫線を引こうとして、いろいろ試したのですが、
文字列、画像、ブロック要素などが混在していて、うまく引けません。
文字列だけなら、 css で出来るようですが、
行間より大きい要素、画像、ブロック要素、 a タグ等が含まれる場合は、 css では、出来ないようです。

あれこれ試して、ブロック要素、a タグ、img タグが含まれている場合も
罫線がズレたり、文字に重なったりしないようにしました。
ブロック要素、行間より大きい要素等の背景に罫線を引くと、
低い行間が出来てしまうので、その間には罫線を引かないようにしました。
a タグは、 display を 'inline-block' にして誤魔化しています。
a タグ の中に行間より大きい画像等の要素がある場合、
a タグは、インライン要素なので、その高さが反映されないようです。
'inline-block' にした a タグの中に img 要素がある場合、
img 要素の下に隙間が出来てしまったりします。。。
br タグは、ブラウザによって、位置や高さの値が取れなかったりしました。_(:0 」∠)_
現在使用しているブログのテンプレートに、このプログラムを使用しています。→ ねごとめも
行間をまたぐ高さの子要素を持たない要素の文字列の背景にノートのような罫線を引くプログラムは、
こちら → javascript で文字列の背景にノートのような罫線を引く-B

数学の勉強をやり直ししてたりします。_´ω`)_