All geek questions in one place

Translation of lyrics in html

How to present the lyrics and the corresponding translation structure in HTML?

just an example:

Maybe, it's too late or, maybe, early, 
And what I have not thought about for many years, It has not occurred to me for years,
I resembled Don Juan, I resemble now Don Juan, really,
Like a real windy poet. Like a proper flippant man of verse.

How to present it in SEO friendly and semantic way?

PS I really hate the solution with tables and don’t want to put the original row and translate into one container (I think this is terrible and bad for goggles).

+3
source share
5 answers

. , , .

, - ( ):

<style>
.song
{
  background: #444;
  overflow: auto;
  zoom: 1.0;
  padding-bottom: 1em;
  border: 1px solid #000;
}

.song .lyrics
{
  float: left;
  color: #ddd;
  margin: 1em;
  width: 20em;
}

.song #russian.lyrics { background: #009; }

.song #english.lyrics { background: #090; }   

.song .lyrics p { margin: .5em .2em; }
</style>

<div class="song">
    <div id="russian" class="lyrics">
        <p>, , ,  ,</p> 
        <p>      ,</p>
        <p>    -,</p>
        <p>   .</p>
    </div>
    <div id="english" class="lyrics">
        <p>Maybe, it too late or, maybe, early,</p>
        <p>It has not occurred to me for years,</p>
        <p>I resemble now Don Juan, really,</p>
        <p>Like a proper flippant man of verse.</p>
     </div>
</div>
+1

. , , , , , , .:)

, , :

Je ne parle pas d'un bâtiment

[ ]

请 不要 拍 我

[, ]

+4

divs. div, CSS , :

.lyrics {
 float: left;
}

CSS, .

+2

As already mentioned, use divs with CSS to achieve the specific effect you want without tables. Here's a page with a fairly complete overview of CSS positioning to get you started.

As an example of what you can use, try the following:

<html>
<head>
<style type="text/css">
.lyrics {
   width: 200px;
   height: 100px;
   border: 1px solid black;
}
.original {
  float: left;
}
.translation {
  float: right;
}
</style>
</head>
<body>
<div class="lyrics original">(lyrics here)</div>
<div class="lyrics translation">(translation here)</div>
</body>
</html>
+1
source

I really think the table makes the most sense here.

0
source

Source: https://habr.com/ru/post/1715013/

More articles:


All Articles