Image en lettrine CSS, texte aligné dans un espace blanc

Question

Je ne pense pas que ce soit une situation de lettrine quotidienne.

Mon "S" majuscule est une image comme celle-ci :

Veuillez noter que l’image réelle s’étend jusqu’à la colonne supérieure. La barre supérieure fait une partie de la même image, contenant le grand S et le dessin à gauche du S. J'ai coloré le fond en bleu pour qu'il soit facilement visible ici, mais la couleur naturelle est le blanc. (Mais veuillez ignorer la zone grise supplémentaire tout en haut, c'est gênant lors des captures d'écran.) Je ne veux pas casser la barre supérieure et l'image. L'image qui m'a été fournie ressemble à ceci : une zone rectangulaire avec une barre supérieure dessinée dans le coin supérieur droit et un espace blanc en dessous de la barre supérieure.

Je veux que le texte ressemble à ceci (créé à l'aide de paint.net) :

Notez que la première ligne de texte est alignée avec le bas du « S » majuscule, les trois premières lignes se trouvent en haut de la zone blanche de l'image et les lignes quatre à six sont alignées à gauche avec la marge ; .

Notez également que le texte doit couvrir la partie blanche de l'image.

Notez également que je ne peux pas garantir la largeur totale du texte. Il s'agira d'un fichier EPUB et pourra être consulté sur plusieurs appareils. Par conséquent, position:absolute doit absolument être évité.

Voici le code HTML que j'ai essayé jusqu'à présent, en supprimant presque complètement le CSS correspondant :

<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 labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercice ullamco.
Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in.
Voluptate velit essence cillum dolore eu fugiat nulla pariatur.
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

Merci.

Answer 1

Il est impossible de donner une valeur précise car la position du « S » dans l'image réelle n'a pas été mesurée. Les images suivantes sont utilisées dans l'Exemple A, et la même technique est utilisée pour ajouter de nouvelles images à l'OP dans l'Exemple B.

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

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

Ensembles de règles importantes annotées dans les exemples

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

Exemple 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

Modifié par OP : J'ai modifié cette réponse pour qu'elle soit très proche de ce que je veux, pour correspondre exactement à mon cas d'utilisation.

L'un des liens Web suggérés par SO automobile ("vertical-align-text-next-to-an-image") fournit des idées (ainsi qu'un autre lien (connaissance epub).
L'exemple que nous avons publié utilise la traduction par transformation.

Il y a d’autres facteurs à prendre en compte lorsqu’il s’agit d’ebooks… Gardez à l’esprit que les utilisateurs de livres électroniques peuvent modifier la taille de la police dans les livres électroniques « redistribuables » (ce qui, nous supposons, est votre objectif). Chaque lecteur de livre électronique peut définir différemment sa taille de police préférée. Vous devez également prendre en compte ce facteur. Les lecteurs pourraient peut-être choisir une série de commandes @media pour différentes tailles de police potentielles. Cet échantillon a été testé dans FF, Chrome, Edge.

Pour mieux préparer votre projet :

1. Ajoutez l’URL de votre image d’arrière-plan.
2. Définissez la largeur/hauteur exacte de l’image en CSS.
3. Définissez la traduction de transformation pour atteindre le niveau souhaité.
4. Définissez la marge inférieure de manière à ce que la ligne de texte se déplace sous l'image pour combler l'espace supplémentaire.
5. Construisez la "overbar" supérieure en CSS/Html en fonction de vos besoins.

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>