CSS 드롭 캡 이미지, 공백에 정렬된 텍스트

Question

저는 이것이 일상적인 드롭캡 상황이 아니라고 생각합니다.

대문자 "S"는 다음과 같은 이미지입니다.

실제 이미지는 상단까지 확장되어 있으니 참고해주세요. 상단 표시줄은 큰 S와 S 왼쪽의 그림을 포함하는 동일한 이미지의 일부입니다. 여기서는 잘 보이도록 배경을 파란색으로 색칠했는데, 자연색은 흰색입니다. (그러나 맨 위에 있는 추가 회색 영역은 화면 캡처를 할 때 불편하므로 무시하십시오.) 상단 표시줄과 이미지를 깨뜨리고 싶지 않습니다. 나에게 제공된 이미지는 다음과 같습니다. 오른쪽 상단 모서리에 위쪽 막대가 그려져 있고 위쪽 막대 아래에 흰색 공간이 있는 직사각형 영역입니다.

텍스트를 다음과 같이 표시하고 싶습니다(paint.net을 사용하여 생성됨).

텍스트의 첫 번째 줄은 대문자 "S"의 아래쪽에 정렬되며 처음 세 줄은 이미지의 흰색 영역 상단에 있고 4~6줄은 여백에 맞춰 왼쪽으로 정렬됩니다. .

또한 텍스트는 이미지의 흰색 부분을 덮어야 합니다.

또한 전체 텍스트 너비는 보장할 수 없으며 이는 EPUB이며 여러 장치에서 볼 수 있습니다. 따라서 position:absolute는 반드시 피해야 합니다.

관련 CSS를 거의 완전히 제거한 지금까지 시도한 HTML은 다음과 같습니다.

<p class="dropcap-para">
<img 너비=135 높이=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 rerehenderit.
Voluptate velit Essence cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat cupidatat.
Proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.</span>

감사합니다.

Answer 1

실제 이미지에서 "S"의 위치는 측정되지 않기 때문에 구체적인 값을 부여하는 것은 불가능합니다. 다음 이미지는 예제 A에서 사용되었으며, 동일한 기술을 사용하여 예제 B의 OP에 새 이미지를 추가했습니다.

rreee	rreee
rreee	rreee

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

예제에 주석이 달린 중요한 규칙 세트

예 A

으아악 으아악

예 B

으아악 으아악

Answer 2

OP 편집: 이 답변을 편집하여 정확한 사용 사례와 일치하도록 내가 원하는 것과 매우 가깝습니다.

자동차 S.O.에서 제안한 웹 링크 중 하나("vertical-align-text-next-to-an-image")는 아이디어를 제공합니다(또 다른 링크(epub 지식)).
우리가 게시한 예에서는 변환 변환을 사용합니다.

전자책과 관련하여 고려해야 할 다른 요소가 있습니다… 전자책 사용자는 "리플로우 가능" 전자책의 글꼴 크기를 변경할 수 있습니다(귀하의 목표라고 가정). 전자책 리더마다 선호하는 글꼴 크기를 다르게 설정할 수 있습니다. 이 요소도 고려해야 합니다. 아마도 독자들은 다양한 잠재적인 글꼴 크기에 대해 일련의 @media 명령을 선택할 수도 있습니다. 이 샘플은 FF, Chrome, Edge에서 테스트되었습니다.

프로젝트에 맞게 추가 준비를 하려면:

1. 배경 이미지 URL을 추가하세요.
2. CSS에서 정확한 이미지 너비/높이를 설정하세요.
3. 원하는 수준에 도달하도록 변환 번역을 설정하세요.
4. 여백-하단을 설정하여 텍스트 줄이 이미지 아래로 이동하여 초과된 간격을 채울 수 있도록 합니다.
5. 필요에 맞게 CSS/Html의 상단 "오버바"를 구축하세요.

으아악 으아악