2009-08-12 3 views
3

Как представить тексты песен и соответствующие переводы в HTML?Перевод текстов песен в html

только пример:

 
Может, поздно, может, слишком рано,  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. 

Как представить его в SEO дружественных и семантического пути?

P.S.       Я действительно ненавижу решение со столами и не хочу помещать оригинальную строку и переводить в один контейнер (я думаю, что это ужасно и плохо для поисковых систем).

ответ

1

Хммм. Семантически говоря, я мог видеть аргумент в пользу того, что это списки или абзацы.

Me Я думаю, что я бы с чем-то вроде этого (извинений за код наворотов):

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

Я был бы склонен делать классы «русский» и «лирический», если на странице может быть несколько песен. – Chuck

+0

Большинство текстов песен, которые я видел, это одна песня на странице, поэтому я пошел с таким подходом - маргинальный звонок, хотя это было. OP свободно может изменить это, конечно, должен ли он даже использовать это. – annakata

+0

Я не думаю, что маркировка каждой строки в качестве абзаца правильна семантически.А тег
между каждой строкой был бы лучше. – Alohci

2

Вы используете divs. Вы кладете каждый набор текстов песен в сНу теге, а затем использовать некоторые CSS для форматирования двух див рядом друг с другом, такими как:

.lyrics { 
float: left; 
} 

Есть целый ряд других методов CSS, которые будут делать то же самое.

4

Я бы просто полностью отказался от английских переводов. Я думаю, что большинство музыки звучит более впечатляюще, если вы не можете понять, что говорит певец, и ваши тексты песен, похоже, подтверждают это. :)

Все Серьезность в сторону, я бы на самом деле просто чередовать оригинальный текст и перевод с различными шрифтами, например, так:

Je пе Parle па d'ООН bâtiment

[Я не говорят здание]

请 不要 拍 我

[Пожалуйста, не стреляйте меня]

+3

+1 для не перевод текста - буквальные переводы хорошей лирики часто производят плохую лирику, а если тексты плохо на языке оригинала ...! –

+0

Моя любимая песня Элтона Джона - «Держи меня ближе, Тони Данза». – MusiGenesis

1

Как уже упоминалось, используйте divs с CSS для достижения определенного эффекта, который вы хотите, без таблиц. Вот страница с a pretty comprehensive overview of CSS positioning, чтобы вы начали.
В качестве примера того, что вы могли бы использовать, попробуйте следующее:

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

Achtung! страшные неземные левые и правые классы! – annakata

+0

Хороший улов; исправлено. – Donut

+0

намного лучше;) – annakata

0

Я на самом деле думаю, что таблица имеет наибольший смысл здесь.

Смежные вопросы