Traduction de paroles en html

Comment représenter les paroles et la traduction correspondante en HTML?Traduction de paroles en html

juste un exemple:

 
Может, поздно, может, слишком рано,  Maybe, it's too late or, maybe, early, 
И о чем не думал много лет,    It has not occurred to me for years, 
Походить я стал на Дон-Жуана,    I resemble now Don Juan, really, 
Как заправский ветреный поэт.    Like a proper flippant man of verse.

Comment le représenter de manière SEO friendly et sémantique?

P.S. Je déteste vraiment la solution avec des tables et je ne veux pas mettre la ligne originale et traduit dans un conteneur (je pense que c'est moche et mauvais pour les googgles).

Source

2009-08-12 Alex Bolotov

Hmmm. Sur le plan sémantique, je pourrais voir un argument en faveur de ces listes ou de ces paragraphes.

Moi, je pense que je partirais avec quelque chose comme ça (mes excuses pour le code ballonnement):

<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's 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>

Source

2009-08-12 20:18:33 annakata

Je serais enclin à faire des classes "russe" et "paroles" au cas où il pourrait y avoir plusieurs chansons sur une page. – Chuck

La plupart des sites de paroles que j'ai vus sont une chanson par page, donc je suis allé avec cette approche - appel marginal si c'était. Le PO est libre de changer cela bien sûr, devrait-il même l'utiliser. – annakata

Je ne pense pas que marquer chaque ligne comme un paragraphe est juste sémantiquement.Une étiquette
entre chaque ligne serait meilleure. – Alohci

Vous utilisez divs. Vous mettez chaque jeu de paroles dans une balise div puis utilisez un peu de CSS pour formater les deux divs à côté de l'autre tels que:

.lyrics { 
float: left; 
}

Il y a un certain nombre d'autres techniques CSS qui feront la même chose.

Source

2009-08-12 20:04:12

Je laisserais simplement les traductions en anglais entièrement. Je pense que la plupart des musiques semblent plus impressionnantes si vous ne pouvez pas vraiment comprendre ce que le chanteur dit, et vos paroles d'exemple semblent le vérifier. :)

sérieusement mis à part, je fait juste alterner les paroles originales et la traduction avec des polices différentes, comme ceci:

Je ne parle pas d'un bâtiment

[Je ne parler un bâtiment]

请不要拍我

[S'il vous plaît ne me tuez pas]

Source

2009-08-12 20:11:08 MusiGenesis

+1 pour ne pas traduire les paroles - les traductions littérales de bonnes paroles produisent souvent de mauvaises paroles, et si les paroles sont mauvaises dans la langue d'origine ...! –

Ma chanson préférée d'Elton John est "Hold Me Closer, Tony Danza". – MusiGenesis

Comme mentionné, utilisez divs avec CSS afin d'obtenir l'effet spécifique souhaité, sans tables. Voici une page avec a pretty comprehensive overview of CSS positioning pour vous aider à démarrer.
À titre d'exemple de ce que vous pouvez utiliser, essayez ceci:

<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>

Source

2009-08-12 20:14:44 Donut

Achtung! les classes gauches et droites insignifiantes redoutables! – annakata

Bonne prise; fixé. – Donut

beaucoup mieux;) – annakata

Je pense en fait une table fait le plus de sens ici.

Source

2009-08-13 11:38:21 Ms2ger

Répondre

Questions connexes