Saya mencari metode yang efektif untuk menyelaraskan paragraf dari teks bilingual besar di situs web dua kolom pada skala besar. Dokumen saya adalah teks yang sangat panjang. Halaman web akan memiliki dua kolom masing-masing mengambil 50% dari halaman. Kolom pertama akan memiliki dokumen dalam bahasa Inggris; Kolom kedua akan memiliki dokumen yang sama dalam bahasa Jerman. Setiap paragraf perlu memiliki garis kosong di antara mereka, dan baris pertama setiap paragraf harus berbaris dengan paragraf yang sesuai dalam bahasa lain.

Saya telah menyusun metode gaya styling sebagai kotak menggunakan berikut sebagai contoh dari apa yang telah saya lakukan:

html untuk paragraf pertama (digunakan untuk sisi Inggris dan Jerman):

<div id="box1">

        I.
        <br>

        <p>THE SCIENTIFIC LITERATURE ON THE
PROBLEMS OF THE DREAM
</p>
</div>

css untuk paragraf pertama (digunakan untuk sisi Inggris dan Jerman)

#box 1 {
    height: 175px;
    padding: 0px;
    border: 0px;
    margin: 0px;
    background: #162e2e;
    
  }

Solusi di atas akan menyelaraskan paragraf dengan sangat baik karena ketinggian kotak yang ditentukan. Saya menggunakan tinggi yang sama untuk paragraf yang sesuai dan oleh karena itu paragraf mengambil jumlah ruang yang sama persis sama, bagaimanapun, ini akan sangat sulit dilakukan pada skala. Itu akan membutuhkan kalibrasi setiap paragraf dokumen secara individual. Apakah ada cara lain untuk melakukan ini yang akan efektif dalam skala?

0
user7420124 5 April 2021, 20:26

1 menjawab

Jawaban Terbaik

Anda dapat memiliki setiap paragraf dalam {{x0} terpisah} dengan kelas katakanlah paragraph.

<div class="paragraph">
  ...
<div>

Masing-masing div akan memiliki dua anak, satu untuk teks bahasa Inggris dan lainnya untuk teks Jerman. Kita dapat mendaftar display: flex untuk ini div sehingga paragraf berdampingan.

<div class="paragraph" style="display: flex">
     <p>English Text</p>
     <p>German Text</p>
</div>

Kemudian untuk anak-anak, kita dapat mendaftar flex: 1 1 50% yang berarti, setiap anak akan memiliki lebar 50% dan akan grow dan shrink dalam proporsi yang sama.

<div class="paragraph" style="display: flex">
     <p style="flex: 1 1 50%">English Text</p>
     <p style="flex: 1 1 50%">German Text</p>
</div>

Memisahkan HTML dan CSS, kita mendapatkan ini:

.paragraph {
  display: flex;
}

.paragraph > p {
  flex: 1 1 50%;
  border: 1px solid black;
}
<div class="content">
  <div class="paragraph">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Deutsches Ipsum Dolor id latine Wiener Schnitzel complectitur pri, mea meliore denique Wurst id. Elitr expetenda nam an, Bier ei reque euismod assentior. Odio Currywurst iracundia ex pri. Ut vel Bretzel mandamus, quas natum adversarium ei Wiener Schnitzel diam minim honestatis eum no. Deutsches Ipsum Dolor id latine Wiener Schnitzel complectitur pri, mea meliore denique Wurst id. Elitr expetenda nam an, Bier ei reque euismod assentior. Odio Currywurst iracundia ex pri. Ut vel Bretzel mandamus, quas natum adversarium ei Wiener Schnitzel diam minim honestatis eum no.</p>
  </div>
  <div class="paragraph">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Deutsches Ipsum Dolor id latine Wiener Schnitzel complectitur pri, mea meliore denique Wurst id. Elitr expetenda nam an, Bier ei reque euismod assentior. Odio Currywurst iracundia ex pri. Ut vel Bretzel mandamus, quas natum adversarium ei Wiener Schnitzel diam minim honestatis eum no</p>
    <p>Deutsches Ipsum Dolor id latine Wiener Schnitzel complectitur pri, mea meliore denique Wurst id. Elitr expetenda nam an, Bier ei reque euismod assentior. Odio Currywurst iracundia ex pri. Ut vel Bretzel mandamus, quas natum adversarium ei Wiener Schnitzel diam minim honestatis eum no. Deutsches Ipsum Dolor id latine Wiener Schnitzel complectitur pri, mea meliore denique Wurst id. Elitr expetenda nam an, Bier ei reque euismod assentior. Odio Currywurst iracundia ex pri. Ut vel Bretzel mandamus, quas natum adversarium ei Wiener Schnitzel diam minim honestatis eum no.</p>
  </div>
</div>

Semoga ini memenuhi kebutuhan Anda!.

EDIT: Menambahkan batas untuk melihat perbedaan antara dua teks.

1
shadow-lad 5 April 2021, 19:30