CSS-Drop-Cap-Bild, Text im Leerraum ausgerichtet

Question

Ich glaube nicht, dass dies eine alltägliche Dropcap-Situation ist.

Mein großes „S“ ist ein Bild wie dieses:

Bitte beachten Sie, dass das eigentliche Bild bis zur oberen Spalte reicht. Die obere Leiste ist Teil desselben Bildes und enthält das große S und die Zeichnung links vom S. Ich habe den Hintergrund blau eingefärbt, damit er hier gut sichtbar ist, aber die natürliche Farbe ist weiß. (Aber bitte ignorieren Sie den zusätzlichen grauen Bereich ganz oben, das ist bei Screenshots umständlich.) Ich möchte die obere Leiste und das Bild nicht beschädigen. Das mir zur Verfügung gestellte Bild sieht folgendermaßen aus: ein rechteckiger Bereich mit einer oberen Leiste in der oberen rechten Ecke und einem weißen Raum unter der oberen Leiste.

Ich möchte, dass der Text so aussieht (erstellt mit paint.net):

Beachten Sie, dass die erste Textzeile am unteren Rand des großen „S“ ausgerichtet ist; die ersten drei Zeilen befinden sich oben im weißen Bereich im Bild und die Zeilen vier bis sechs sind linksbündig an der Seite ausgerichtet Marge.

Beachten Sie außerdem, dass der Text den weißen Teil des Bildes abdecken muss.

Beachten Sie außerdem, dass ich nicht garantieren kann, dass es sich hierbei um eine EPUB-Datei handelt, die auf mehreren Geräten angezeigt werden kann. Daher sollte position:absolute unbedingt vermieden werden.

Hier ist der HTML-Code, den ich bisher ausprobiert habe, wobei das relevante CSS fast vollständig entfernt wurde:

<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 eiusmod tempor incididunt
ut laboure et dolore magna aliqua.
Laboris ut aliquip ex ea consequat consequat
Voluptate velit essential cillum dolore eu fugiat nulla pariatur
nicht proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

Vielen Dank.

Answer 1

不可能给出具体的值，因为没有测量“S”在实际图像中的位置。以下图像用于示例 A 中，并且在示例 B 中使用相同的技术将新图像添加到 OP 中。

.foreground	.background
Width: 150px Height: 250px	Width: 250px Height: 250px

.foreground 是浮动的，段落的文本环绕在它周围。 .background 位于所有内容下方，以便 .foreground 覆盖 .background 的 150 像素，并且段落文本位于 之上。背景。

示例中注释了重要的规则集

示例 A

/*
The font-size on html or :root will be default size for 1rem. 
The values will vary with font-size (2.25ch), font-family, and 
dimensions of image.
*/

html {
  font: 2.25ch/2 "Segoe UI" /* 2 line-height for line spacing */;
}

article {
  margin-top: -250px /* Moves it up the height of the image */;
}

img {
  display: block /* Makes all tags behave uniformly first */;
}

.foreground {
  float: left /* This image sits on top of .background */;
}

.background {
  position: relative /* Takes image out of the normal "flow" */;
  top: 250px /* Moves it down the height of .foreground */;
  z-index: -1 /* Moves it below everything on the z axis */;
}

p {
  padding-top: 135px /* Moves it down so the first line is aligned to "S" */;
}

<article>
  <!-- 250x250px jpg -->
  <img src="https://i.ibb.co/k3hS6rP/sy.jpg" class="background">
  <!-- 150x250px jpg -->
  <img src="https://i.ibb.co/Fs0xtNb/s.jpg" class="foreground">
  <p>HE ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

示例 B

/*
The font-size on html or :root will be default size for 1rem. 
The values will vary with font-size (2.55ch), font-family, and 
dimensions of image.
*/

html {
  font: 2.55ch/1.6 "Segoe UI" /* 1.6 line-height for line spacing */;
}

article {
  margin-top: -12.3rem /* Moves it up the height of the image */;
}

img {
  display: block /* Makes all tags behave uniformly first */;
}

.foreground {
  float: left /* This image sits on top of .background */;
  margin-top: 2.5rem;
}

.background {
  position: relative /* Takes image out of the normal "flow" */;
  top: 12.3rem /* Moves it down the height of .foreground */;
  z-index: -1 /* Moves it below everything on the z axis */;
}

p {
  padding-top: 6.6rem /* Moves it down so the first line is aligned to "S" */;
}

<article>
  <!-- 250x250px jpg -->
  <img src="https://i.ibb.co/dmj8s0J/background.png" class="background">
  <!-- 150x250px jpg -->
  <img src="https://i.ibb.co/gWqt8s4/foreground.png
" class="foreground">
  <p>HE ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

Answer 2

由OP编辑： 我已经编辑了这个答案，它非常接近我想要的，以匹配我的确切用例。

其中一个汽车 S.O.建议的网络链接（“vertical-align-text-next-to-an-image”）提供了想法（以及另一个链接（epub 知识)。
我们发布的这个示例使用了变换翻译。

谈到电子书时，还有其他因素需要考虑...... 请记住，电子书用户可以更改“可重排”电子书中的字体大小（我们认为这是您的目标）。每个电子书阅读器可能会以不同的方式设置他们喜欢的字体大小。您也需要考虑这个因素。也许读者可能会选择一系列针对各种潜在字体大小的 @media 命令。此示例在 FF、Chrome、Edge 中进行了测试。

要进一步准备以适合您的项目：

1. 添加您的背景图片网址。
2. 在 CSS 中设置准确的图像宽度/高度。
3. 设置变换翻译以达到您想要的水平。
4. 设置 margin-bottom，使文本行移动到图像下方以填充多余的间隙。
5. 在 CSS/Html 中构建上部“overbar”以满足您的需求。

html,
body {
  font-family: Arial, sans-serif;
  font-size: 1em;
  line-height: 1.4;
}

* {
  box-sizing: border-box;
}

.first {
  font-family: Arial, sans-serif;
  font-size: 1em;
  line-height: 1.4;
  margin: 0 0 0 0;
}

.dropcap {
  float: left;
  font-family: Arial, sans-serif;
  font-size: 5em;
  line-height: 1;
  margin-bottom: -0.5em;
  /*-- move margin after moving the image --*/
  margin-right: -0.95em;
  margin-top: -0.1em;

  position: relative;
  /*-- move image up/down --*/
  top: 40%;
  transform: translateY(-40%);
}

.bgi {
  background-image: url("https://i.stack.imgur.com/JlxL1.png");
  z-index: -1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;

  box-sizing: border-box;
  /*-- set image size --*/
  width: 135px;

  height: 108px;
}

<section>
<p>&nbsp;</p><!--still need to factor in your overbar here-->
<p>&nbsp;</p>
<p class="first"><span class="dropcap bgi"></span>HE IS leaving today. orem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Nullam luctus dapibus nisl sit amet egestas. Ut ac lacus risus. Cras quis accumsan turpis. Duis cursus libero quis laoreet mollis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Nullam luctus dapibus nisl sit amet egestas. Ut ac lacus risus. Cras quis accumsan turpis. Duis cursus libero quis laoreet mollis. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Nullam luctus dapibus nisl sit amet egestas. Ut ac lacus risus. Cras quis accumsan turpis. Duis cursus libero quis laoreet mollis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Nullam luctus dapibus nisl sit amet egestas. Ut ac lacus risus. Cras quis accumsan turpis. Duis cursus libero quis laoreet mollis.</p>
</section>