Imej drop cap CSS, teks dijajarkan dalam ruang putih

Question

Saya tidak fikir ini adalah situasi dropcap setiap hari.

Modal saya "S" ialah imej seperti ini:

Sila ambil perhatian bahawa imej sebenar memanjang ke lajur atas. Bar atas ialah sebahagian daripada imej yang sama, mengandungi S besar dan lukisan di sebelah kiri S. Saya mewarnakan latar belakang biru supaya ia boleh dilihat dengan mudah di sini, tetapi warna semula jadi adalah putih. (Tetapi sila abaikan kawasan kelabu tambahan di bahagian paling atas, ia janggal apabila melakukan tangkapan skrin.) Saya tidak mahu memecahkan bar dan imej atas. Imej yang diberikan kepada saya kelihatan seperti ini - kawasan segi empat tepat dengan bar atas dilukis di sudut kanan atas dan ruang putih di bawah bar atas.

Saya mahu teks kelihatan seperti ini (dibuat menggunakan paint.net):

Perhatikan bahawa baris pertama teks dijajarkan dengan bahagian bawah huruf besar "S" tiga baris pertama berada di bahagian atas kawasan putih dalam imej dan baris empat hingga enam dijajarkan ke kiri dengan jidar; .

Juga ambil perhatian bahawa teks mesti menutup bahagian putih imej.

Juga ambil perhatian bahawa saya tidak dapat menjamin jumlah lebar teks ini akan menjadi EPUB dan boleh dilihat pada berbilang peranti. Oleh itu position:absolute pastinya harus dielakkan.

Inilah HTML yang saya cuba setakat ini, hampir mengalih keluar CSS yang berkaitan sepenuhnya:

<p class="dropcap-para">
<img width=135 height=108 style="float:left" src="image002.jpg"
<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 minima 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
tidak proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

Terima kasih.

Answer 1

Adalah mustahil untuk memberikan nilai tertentu kerana kedudukan "S" dalam imej sebenar tidak diukur. Imej berikut digunakan dalam Contoh A, dan teknik yang sama digunakan untuk menambah imej baharu pada OP dalam Contoh B.

rreeee	rreeee
rreeee	rreeee

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

Set peraturan penting dijelaskan dalam contoh

Contoh A

.foreground

.background

Contoh B

Width: 150px Height: 250px

Width: 250px Height: 250px

Answer 2

Diedit oleh OP: Saya telah mengedit jawapan ini supaya ia sangat hampir dengan perkara yang saya mahu, untuk memadankan kes penggunaan saya yang tepat.

Salah satu pautan web yang dicadangkan oleh S.O. ("vertical-align-text-next-to-an-image") menyediakan idea (serta pautan lain (pengetahuan epub).
Contoh yang kami siarkan menggunakan terjemahan transformasi.

Terdapat faktor lain yang perlu dipertimbangkan apabila berkaitan dengan e-buku… Perlu diingat bahawa pengguna e-buku boleh menukar saiz fon dalam e-buku "boleh dialirkan semula" (yang kami anggap sebagai matlamat anda). Setiap pembaca e-buku boleh menetapkan saiz fon pilihan mereka secara berbeza. Anda perlu mengambil kira faktor ini juga. Mungkin pembaca mungkin memilih satu siri arahan @media untuk pelbagai saiz fon yang berpotensi. Sampel ini telah diuji dalam FF, Chrome, Edge.

Untuk lebih bersedia untuk disesuaikan dengan projek anda:

1. Tambah URL imej latar belakang anda.
2. Tetapkan lebar/tinggi imej tepat dalam CSS.
3. Tetapkan terjemahan transformasi untuk mencapai tahap yang anda inginkan.
4. Tetapkan margin-bawah supaya baris teks bergerak di bawah imej untuk mengisi lebihan jurang.
5. Bina "overbar" atas dalam CSS/Html untuk memenuhi keperluan anda.

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>