CSS ドロップ キャップ画像、空白に配置されたテキスト

Question

<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>

Answer 1

実際の画像における「S」の位置を測定していないため、具体的な値を示すことはできません。次の画像は Example A で使用されており、同じ手法が Example B で新しい画像を OP に追加するために使用されています。

えええええ	えええええ
えええええ	えええええ

.foreground はフロート表示され、段落のテキストが折り返されます。 .background は、.foreground が .background の 150 ピクセルをカバーし、段落テキストが より上になるように、すべてのコンテンツの下に配置されます。背景＃＃＃。

例でコメントされている重要なルール セット

例A

リーリー リーリー

例B

リーリー リーリー

Answer 2

OPによる編集: この回答を編集して、私のユースケースに正確に一致するように、私が望むものに非常に近いものにしました。

自動車 S.O. が提案した Web リンクの 1 つ (「vertical-align-text-next-to-an-image」) はアイデアを提供します (また、別のリンク (epub 知識 ))。 投稿した例では、変換変換を使用しています。

電子書籍に関しては、他にも考慮すべき要素があります… 電子書籍ユーザーは、「リフロー可能な」電子書籍のフォント サイズを変更できることに留意してください (これがあなたの目的であると想定されます)。電子書籍リーダーごとに、好みのフォント サイズの設定が異なる場合があります。この要素も考慮する必要があります。おそらく読者は、さまざまな潜在的なフォント サイズに合わせて一連の @media コマンドを選択するかもしれません。このサンプルは FF、Chrome、Edge でテストされました。

プロジェクトに合わせてさらに準備を進めるには:

背景画像の URL を追加します。
CSS で正確な画像の幅/高さを設定します。
変換変換を希望のレベルに設定します。
余分なギャップを埋めるためにテキスト行が画像の下に移動するように margin-bottom を設定します。
ニーズに合わせて CSS/HTML で上部の「オーバーバー」を作成します。

リーリー リーリー