FaeriMagic FaeriMagic - 5 months ago 9
CSS Question

How to align Japanese text to latin Text

So I have a 3-column pseudo-table to display lyrics. The first column contains the Japanese lyrics while the other two display Romanized and English lyrics respectively.

My problem is that the Japanese lyrics don't align perfectly with the English lyrics, so it looks uneven. They all have line breaks in the right places, and I think all of the text are set at the default font-size, so I'm not sure what the solution is.

Is there a better way to format these lyrics?



.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>透き通る手、砂雑じりの雪に <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> <br>
君の歌、<span class="whisper">(君の歌だけがまだ)</span> <br>
紡ごうと、<span class="whisper">(紡ごうとしている)</span> <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> <br>
kimi no uta, <span class="whisper">(kimi no uta dake ga mada)</span> <br>
tsumugouto, <span class="whisper">(tsumugouto shite iru)</span> <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>




Answer

.lyrics > div { line-height: 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>	
      <br>君の歌、
      <span class="whisper">(君の歌だけがまだ)</span>	
      <br>紡ごうと、
      <span class="whisper">(紡ごうとしている)</span>	
      <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>	
      <br>kimi no uta, <span class="whisper">(kimi no uta dake ga mada)</span>	
      <br>tsumugouto, <span class="whisper">(tsumugouto shite iru)</span>	
      <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>