CSS drop cap image, text aligned in white space

Question

I don't think this is an everyday dropcap situation.

My capital "S" is an image like this:

Please note that the actual image extends all the way to the upper column. The top bar is part of the same image, containing the large S and the drawing to the left of the S. I colored the background blue so it can be easily seen here, but the natural color is white. (But please ignore the extra gray area at the very top, it's awkward when doing screen captures.) I don't want to break the top bar and image. The image provided to me looks like this - a rectangular area with a top bar drawn in the upper right corner and white space below the top bar.

I want the text to look like this (created using paint.net):

Note that the first line of text is aligned with the bottom of the capital "S"; the first three lines are at the top of the white area in the image, and lines four through six are left aligned with the page margin.

Also note that the text must cover the white portion of the image.

Also note that I cannot guarantee total text width; this will be an EPUB and can be viewed on multiple devices. Therefore position:absolute should definitely be avoided.

Here's the HTML I've tried so far, almost completely removing the relevant CSS:

<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 exercitation 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. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

Thank you.

Answer 1

It is impossible to give a specific value because the position of "S" in the actual image is not measured. The following images are used in Example A, and the same technique is used in Example B to add new images to the OP.

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

.foreground is floated, with the paragraph's text wrapped around it. .background is positioned below all content so that .foreground covers 150 pixels of .background and the paragraph text is above . background.

Important rule sets commented in the examples

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

Example 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

Edited by OP: I've edited this answer so it's very close to what I want, to match my exact use case.

One of the automotive S.O. suggested web links ("vertical-align-text-next-to-an-image") provides ideas (as well as another link (epub knowledge).
The example we posted uses transform translation.

There are other factors to consider when it comes to e-books… Keep in mind that e-book users can change the font size in "reflowable" e-books (which we assume is your goal). Each e-book reader may set their preferred font size differently. You need to consider this factor as well. Perhaps readers might choose a series of @media commands for various potential font sizes. This sample was tested in FF, Chrome, Edge.

To further prepare to suit your project:

1. Add your background image URL.
2. Set exact image width/height in CSS.
3. Set transform translation to your desired level.
4. Set margin-bottom so that lines of text move below the image to fill excess gaps.
5. Build the upper "overbar" in CSS/Html to suit your needs.

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>