CSS ドロップ キャップ画像、空白に配置されたテキスト
<p>これは日常的にドロップキャップが発生する状況ではないと思います。 </p>
<p>私の大文字の「S」は次のようなイメージです: </p>
<p>実際の画像は上の欄までとなりますのでご了承ください。上のバーは同じ画像の一部であり、大きな S と S の左側の描画が含まれています。 </strong>ここではわかりやすいように背景を青にしていますが、本来の色は白です。 <em> (ただし、一番上の余分な灰色の領域は無視してください。スクリーン キャプチャを行うときに厄介です。) </em> <strong>トップ バーと画像を壊したくありません。私に提供された画像は次のようになります。右上隅にトップバーが描かれ、トップバーの下に空白がある長方形の領域です。 </strong></p>
<p>テキストを次のようにしたいとします (paint.net を使用して作成): </p>
<p>テキストの最初の行は大文字の「S」の下部に揃えられ、最初の 3 行は画像の白い領域の上部に配置され、4 行目から 6 行目はページの左揃えに配置されることに注意してください。マージン。 </p>
<p>テキストは画像の白い部分を覆う必要があることにも注意してください。 </p>
<p>また、テキストの合計幅は保証できないことにも注意してください。これは EPUB なので、複数のデバイスで表示できます。したがって、<code>position:absolute</code> は絶対に避けるべきです。 </p>
<p>これまでに試した HTML は、関連する CSS をほぼ完全に削除したものです。</p>
<pre class="brush:php;toolbar:false;"><p class="dropcap-para">
<img width=135 height=108 style="float:left" src="image002.jpg" alt="dropcap S"></img>
<span class="funky-text">HE ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodtempor incididunt
労働者と労働者は大規模なアリクアを持ち、最小限の経済的努力を続け、ウラムコを訓練しなければなりません。
Laboris nisi ut aliquip ex ea comodo consequat. Duis aute irure dolor in reprehenderit
Voluptate velit エッセンス cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
自白者ではないが、職務上の責任を負う義務を負っていない。</span></pre>
<p>ありがとうございます。 </p>
