2009-08-12 11 views
3

どのように歌詞とそれに対応するHTMLの翻訳ストロークを表現するのですか?htmlでの歌詞の翻訳

単なる例:SEOフレンドリーでセマンティックな方法でそれを表現する方法

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

P.S.      私はテーブルを使ったソリューションが本当に嫌いです。元の行を入れたくないので、1つのコンテナに翻訳しています(私はゴーグルにとっては醜いと悪いと思う)。

答えて

1

うーん。意味論的に言えば、私はこれらのリストまたは段落の議論を見ることができた。

ミー私はこのような何か(コードの膨張のための謝罪)で行くと思う:

<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

私が見たほとんどの歌詞サイトは1ページに1曲ですので、私はそのアプローチに行ってきました。 OPは、もちろんこれを使用しても、自由に変更することができます。 – annakata

+0

私は、各行を段落としてマークするのが意味上正しいとは思わない。各行の間に
というタグがあればよいでしょう。 – Alohci

2

divを使用します。あなたはdivタグに歌詞の各セットを置くと、その後のようなお互いに次の二つのdiv要素をフォーマットするためにいくつかのCSSを使用します。同じことを行います他のCSSテクニックの数があります

.lyrics { 
float: left; 
} 

4

私は英語の翻訳を完全に中止します。私は歌手が何を言っているのかを実際に理解することができないと、ほとんどの音楽がより印象的に聞こえると思います。 :)

さておきすべての深刻さは、私は実際にちょうどのようなので、オリジナルの歌詞と異なるフォントで翻訳を交互になります。

帝北東パルレPASドールの国連bâtiment

[Iはしないでください

请不要]建物を話す拍

我[私を撮影しないでください]

+3

+1歌詞のリテラルな翻訳は、しばしば悪い歌詞を生成し、歌詞が元の言語で悪い場合...! –

+0

私の好きなElton Johnの曲は、 "Hold Me Closer、Tony Danza"です。 – MusiGenesis

1

前述のとおり、CSSでdivsを使用すると、必要な特定の効果を得ることができます。ここでは、あなたが始めるのに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

私は実際にはテーブルがここで最も理にかなっていると思います。