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:
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.
Thank you.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 inExample A, and the same technique is used inExample Bto add new images to the OP.
.foregroundis floated, with the paragraph's text wrapped around it..backgroundis positioned below all content so that.foregroundcovers 150 pixels of.backgroundand 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" */; }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" */; }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:
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; }