Как выровнять японский текст с латинским текстом

Question

Итак, у меня есть псевдо-таблица с тремя колонками для отображения текста. Первая колонка содержит японскую лирику, в то время как две другие показывают романтическую и английскую лирику соответственно.

Моя проблема заключается в том, что японская лирика не идеально согласуется с английской лирикой, поэтому она выглядит неровной. У всех есть разрывы строк в правильных местах, и я думаю, что весь текст установлен на размер шрифта по умолчанию, поэтому я не уверен, что это за решение.

Есть ли лучший способ отформатировать эти тексты?

.lyrics { 
 
    margin: 1%; 
 
    position: inherit; 
 
    clear: right; 
 
    display: inline-block; 
 
} 
 

 
.japanese-lyrics { 
 
    float: left; 
 
    width: auto; 
 
    clear: left; 
 
    display: inline; 
 
    /*font-size: .796em;*/ 
 
} 
 

 

 
.romanized-lyrics { 
 
    float: left; 
 
    width: auto; 
 
    display: inline; 
 
} 
 

 
.english-lyrics { 
 
    float: left; 
 
    width: auto; 
 
    display: inline; 
 
}

<section class="lyrics"> 
 
      <div class="japanese-lyrics"> 
 
       <h3>日本語歌詞</h3> 
 
       <p>透き通る手、砂雑じりの雪に \t <br> 
 
        ひとすじの詩、描かれモノクロに、 \t <br> 
 
        焼き付いて、瞳から \t <br> 
 
        離れない、 \t <br> 
 
        <br> 
 
        まだ \t <br> 
 
        <br> 
 
        有り触れた、終焉の、言葉、 \t <br> 
 
        美しく、染まろうと揺れながら \t <br> 
 
        裏切りと絶望を落とし、 \t <br> 
 
        コキュトスに煌めかせた \t <br> 
 
        脈打つ河、輝く海、 \t <br> 
 
        その最期に僕らは佇む \t <br> 
 
        <br> 
 
        遠ざかる手、凍り果てる街に \t <br> 
 
        君の歌は、呼応し \t <br> 
 
        響いてく \t <br> 
 
        <br> 
 
        有り触れた、終焉の、言葉、 \t <br> 
 
        無慈悲さの、欠片から \t <br> 
 
        生まれ得た　君の歌 \t <br> 
 
        君の歌　声が、響いては、 \t <br> 
 
        反射して永遠に \t <br> 
 
        僕達を、僕と君だけを \t <br> 
 
        閉ざし行く、緩やかに輪を描き \t <br> 
 
        鳴り響く、メロディは、やがて \t <br> 
 
        狂おしい、叫喚に、呑み込まれ \t <br> 
 
        <br> 
 
        音楽を、<span class="whisper">（僕たちの音を）</span> \t <br> 
 
        君の歌、<span class="whisper">（君の歌だけがまだ）</span> \t <br> 
 
        紡ごうと、<span class="whisper">（紡ごうとしている）</span> \t <br> 
 
        <br> 
 
        僕たちを、赦しあうために \t <br> 
 
        <br> 
 
        そして、せかいは、ひらかれてゆく \t </p> 
 
      </div> 
 
      <div class="romanized-lyrics"> 
 
       <h3>Romanized Lyrics</h3><p>sukitooru te, suna majiri no yuki ni \t <br> 
 
        hitosuji no shi, egakare monokuro ni, \t <br> 
 
        yakitsuite, hitomi kara \t <br> 
 
        hanarenai \t <br> 
 
        <br> 
 
        mada \t <br> 
 
        <br> 
 
        arifureta, shuuen no, kotoba, \t <br> 
 
        utsukushiku, somarou to yurenagara \t <br> 
 
        uragiri to zetsubou wo otoshi, \t <br> 
 
        kokyutosu ni kiramekaseta \t <br> 
 
        myakuutsu kawa, kagayaku umi \t <br> 
 
        sono saigo ni bokura wa tatazumu \t <br> 
 
        <br> 
 
        touzakaru te, kouri hateru machi ni \t <br> 
 
        kimi no uta wa koou shi \t <br> 
 
        hibiiteku \t <br> 
 
        <br> 
 
        arifureta, shuuen no, kotoba, \t <br> 
 
        mujihi sa no, kakera kara \t <br> 
 
        umare eta kimi no uta \t <br> 
 
        kimi no uta koe ga, hibiite wa, \t <br> 
 
        hansha shite eien ni \t <br> 
 
        bokutachi wo, boku to kimi dake wo \t <br> 
 
        tozashi iku, yuruyaka ni wa wo egaki \t <br> 
 
        narihibiku, merodi wa, yagate \t <br> 
 
        kuruoshii, kyoukan ni, nomikomare \t <br> 
 
        <br> 
 
        ongaku wo, <span class="whisper">(bokutachi no on wo)</span> \t <br> 
 
        kimi no uta, <span class="whisper">(kimi no uta dake ga mada)</span> \t <br> 
 
        tsumugouto, <span class="whisper">(tsumugouto shite iru)</span> \t <br> 
 
        <br> 
 
        bokutachi wo, yueushiau tameni \t <br> 
 
        <br> 
 
        soshite, sekai wa, hirakareteyuku \t </p> 
 
      </div> 
 
      <div class="english-lyrics"> 
 
       <h3>English Translyrics</h3> 
 
       <p> 
 
        Snow falls and passes through my hazy hands like grains of sand.<br> 
 
        While reading poetry, I start to see the monochrome lines<br> 
 
        Burn into my eyes. However I try,<br> 
 
        They just won’t fade<br> 
 
        <br> 
 
        Away.<br> 
 
        <br> 
 
        Unremarkably, the words that I speak lose their worth.<br> 
 
        Beautifully, stains start to repeat. My body shakes as<br> 
 
        All the treachery and unhappiness evaporates<br> 
 
        ‘til Cocytus is shimmering under its weight.<br> 
 
        The stream begins to drum, the sea gleams from the sun,<br> 
 
        But in the finale, we just completely stand still.<br> 
 
        <br> 
 
        Right at the city’s edge, the chilling cold seeps through lonely hands.<br> 
 
        Your voice rings loud and clear before I hear<br> 
 
        Your echo resound.<br> 
 
        <br> 
 
        Unremarkably, the words that you speak lose their worth.<br> 
 
        Unforgivingly, ugly fragments bleed.<br> 
 
        From there is where these tunes of yours had bloomed,<br> 
 
        Where your voice consumed all of me. Humming quietly,<br> 
 
        It reverberates on endlessly.<br> 
 
        Circling you and I, spiteful secrets hide and multiply.<br> 
 
        If we close our eyes, if we paint ourselves a beautiful lie,<br> 
 
        We will certainly hear its melody eventually.<br> 
 
        Unbelievably, with a silent scream it’ll overwhelm me.<br> 
 
        <br> 
 
        Listening to these words, <span class="whisper">(Listening to the words we had said,)</span><br> 
 
        Listening to your song, <span class="whisper">(Playing all the songs that you had written,)</span><br> 
 
        I will still spin. <span class="whisper">(It will still spin, forevermore.)</span><br> 
 
        <br> 
 
        For the both of us, everything will be forgiven briefly.<br> 
 
        <br> 
 
        And so then the world will start to suddenly bloom anew.</p> 
 
       </div> 
 
     </section>

Answer 1

.lyrics> DIV { высота строки: 25px; }

.lyrics { 
 
    margin: 1%; 
 
    position: inherit; 
 
    clear: right; 
 
    display: inline-block; 
 
} 
 
.lyrics > div { 
 
    line-height: 25px; 
 
} 
 
.japanese-lyrics { 
 
    float: left; 
 
    width: auto; 
 
    clear: left; 
 
} 
 
.romanized-lyrics { 
 
    float: left; 
 
    width: auto; 
 
} 
 
.english-lyrics { 
 
    float: left; 
 
    width: auto; 
 
}

<section class="lyrics"> 
 
    <div class="japanese-lyrics"> 
 
    <h3>日本語歌詞</h3> 
 
    <p>透き通る手、砂雑じりの雪に 
 
     <br>ひとすじの詩、描かれモノクロに、 
 
     <br>焼き付いて、瞳から 
 
     <br>離れない、 
 
     <br> 
 
     <br>まだ 
 
     <br> 
 
     <br>有り触れた、終焉の、言葉、 
 
     <br>美しく、染まろうと揺れながら 
 
     <br>裏切りと絶望を落とし、 
 
     <br>コキュトスに煌めかせた 
 
     <br>脈打つ河、輝く海、 
 
     <br>その最期に僕らは佇む 
 
     <br> 
 
     <br>遠ざかる手、凍り果てる街に 
 
     <br>君の歌は、呼応し 
 
     <br>響いてく 
 
     <br> 
 
     <br>有り触れた、終焉の、言葉、 
 
     <br>無慈悲さの、欠片から 
 
     <br>生まれ得た　君の歌 
 
     <br>君の歌　声が、響いては、 
 
     <br>反射して永遠に 
 
     <br>僕達を、僕と君だけを 
 
     <br>閉ざし行く、緩やかに輪を描き 
 
     <br>鳴り響く、メロディは、やがて 
 
     <br>狂おしい、叫喚に、呑み込まれ 
 
     <br> 
 
     <br>音楽を、 
 
     <span class="whisper">（僕たちの音を）</span> \t 
 
     <br>君の歌、 
 
     <span class="whisper">（君の歌だけがまだ）</span> \t 
 
     <br>紡ごうと、 
 
     <span class="whisper">（紡ごうとしている）</span> \t 
 
     <br> 
 
     <br>僕たちを、赦しあうために 
 
     <br> 
 
     <br>そして、せかいは、ひらかれてゆく</p> 
 
    </div> 
 
    <div class="romanized-lyrics"> 
 
    <h3>Romanized Lyrics</h3> 
 
    <p>sukitooru te, suna majiri no yuki ni 
 
     <br>hitosuji no shi, egakare monokuro ni, 
 
     <br>yakitsuite, hitomi kara 
 
     <br>hanarenai 
 
     <br> 
 
     <br>mada 
 
     <br> 
 
     <br>arifureta, shuuen no, kotoba, 
 
     <br>utsukushiku, somarou to yurenagara 
 
     <br>uragiri to zetsubou wo otoshi, 
 
     <br>kokyutosu ni kiramekaseta 
 
     <br>myakuutsu kawa, kagayaku umi 
 
     <br>sono saigo ni bokura wa tatazumu 
 
     <br> 
 
     <br>touzakaru te, kouri hateru machi ni 
 
     <br>kimi no uta wa koou shi 
 
     <br>hibiiteku 
 
     <br> 
 
     <br>arifureta, shuuen no, kotoba, 
 
     <br>mujihi sa no, kakera kara 
 
     <br>umare eta kimi no uta 
 
     <br>kimi no uta koe ga, hibiite wa, 
 
     <br>hansha shite eien ni 
 
     <br>bokutachi wo, boku to kimi dake wo 
 
     <br>tozashi iku, yuruyaka ni wa wo egaki 
 
     <br>narihibiku, merodi wa, yagate 
 
     <br>kuruoshii, kyoukan ni, nomikomare 
 
     <br> 
 
     <br>ongaku wo, <span class="whisper">(bokutachi no on wo)</span> \t 
 
     <br>kimi no uta, <span class="whisper">(kimi no uta dake ga mada)</span> \t 
 
     <br>tsumugouto, <span class="whisper">(tsumugouto shite iru)</span> \t 
 
     <br> 
 
     <br>bokutachi wo, yueushiau tameni 
 
     <br> 
 
     <br>soshite, sekai wa, hirakareteyuku</p> 
 
    </div> 
 
    <div class="english-lyrics"> 
 
    <h3>English Translyrics</h3> 
 
    <p> 
 
     Snow falls and passes through my hazy hands like grains of sand. 
 
     <br>While reading poetry, I start to see the monochrome lines 
 
     <br>Burn into my eyes. However I try, 
 
     <br>They just won’t fade 
 
     <br> 
 
     <br>Away. 
 
     <br> 
 
     <br>Unremarkably, the words that I speak lose their worth. 
 
     <br>Beautifully, stains start to repeat. My body shakes as 
 
     <br>All the treachery and unhappiness evaporates 
 
     <br>‘til Cocytus is shimmering under its weight. 
 
     <br>The stream begins to drum, the sea gleams from the sun, 
 
     <br>But in the finale, we just completely stand still. 
 
     <br> 
 
     <br>Right at the city’s edge, the chilling cold seeps through lonely hands. 
 
     <br>Your voice rings loud and clear before I hear 
 
     <br>Your echo resound. 
 
     <br> 
 
     <br>Unremarkably, the words that you speak lose their worth. 
 
     <br>Unforgivingly, ugly fragments bleed. 
 
     <br>From there is where these tunes of yours had bloomed, 
 
     <br>Where your voice consumed all of me. Humming quietly, 
 
     <br>It reverberates on endlessly. 
 
     <br>Circling you and I, spiteful secrets hide and multiply. 
 
     <br>If we close our eyes, if we paint ourselves a beautiful lie, 
 
     <br>We will certainly hear its melody eventually. 
 
     <br>Unbelievably, with a silent scream it’ll overwhelm me. 
 
     <br> 
 
     <br>Listening to these words, <span class="whisper">(Listening to the words we had said,)</span> 
 
     <br>Listening to your song, <span class="whisper">(Playing all the songs that you had written,)</span> 
 
     <br>I will still spin. <span class="whisper">(It will still spin, forevermore.)</span> 
 
     <br> 
 
     <br>For the both of us, everything will be forgiven briefly. 
 
     <br> 
 
     <br>And so then the world will start to suddenly bloom anew.</p> 
 
    </div> 
 
</section>