Paroles de chansons + accords, accessibilité et sémantique correcte ?

Je voulais répondre aux sujets :
http://forum.alsacreations.com/topic-6-29224-1-Tablature-accessible-.html
et
http://forum.alsacreations.com/topic.php?fid=4&tid=26304
mais ceux-ci sont clos
donc je crée un nouveau t(r)opic

Bonjour, je suis en train de me prendre la tête avec ce problème...
ce qui m'embête avec ce code (et aussi les autres présentés plus haut) :

ghost a écrit :

<p><em><span>D</span></em>Have you ever felt some <em><span>A</span></em>kind of emptiness <em><span>Bm</span></em>inside?</p> 
<p><em><span>D</span></em>Have you ever felt some <em><span>A</span></em>kind of emptiness <em><span>Bm</span></em>inside?</p> 
</body>

c'est que Google va référencer la phrase suivante :
« DHave you ever felt some Akind of emptiness »
le D et le A des accords vont venir mettre le bazar dans le référencement !

Ce que je souhaite, c'est qu'une recherche dans google permette de retrouver la phrase. Les accords étant juste affichés (en css ou javascript) à l'écran.

Voici 3 essais pas très concluants...

===== 1er essai ====

<style type="text/css">
.verse {font-family: Comic Sans MS;font-size: 11pt;}
.verse .chord:before {
	content: attr(title) "<br />";
	display: block;
	clear: both;
	background: #ABCDEF;
	font-family: Arial;
	font-weight: normal;
}
.verse .chord {
	font-weight: bold;
}
</style>
<div class="verse">
<span class="chord" title="A">J</span>'ai
<span class="chord" title="E">de</span>mandé à la
<span class="chord" title="F#m">lu</span>ne
<br />
<span class="chord" title="A">Et</span> le
<span class="chord" title="E">so</span>leil ne le sait
<span class="chord" title="F#m">pas</span>
</div>

avec le :before, j'affiche l'accord au-dessus du span... mais en fait le <br /> n'est pas pris en compte, dans la ligne content: je ne peux pas mettre de code HTML. zut !


===== 2e essai =====

<style type="text/css">
.verse2 {font-family: Comic Sans MS;font-size: 11pt; }
.verse2 .chord:before {
	content: attr(title);
	background: #ABCDEF;
	z-index: -1;
	font-family: Arial;
	font-weight: normal;
	font-size: 75%;
	position: relative;
	bottom: 1em;
	left: 1em;
}
.verse2 .chord {
	font-weight: bold;
	line-height: 1.5em;
	padding: 0px;
}
</style>
<div class="verse2">
<span class="chord" title="A">J</span>'ai
<span class="chord" title="E">de</span>mandé à la
<span class="chord" title="F#m">lu</span>ne
<br />
<span class="chord" title="A">Et</span> le
<span class="chord" title="E">so</span>leil ne le sait
<span class="chord" title="F#m">pas</span>
</div>

Là, c'est presque bien... les accords sont au-dessus des spans... mais du coup il reste des gros blancs à gauche de chaque span. Pas terrible!
Et encore les résultats sont différents sur Opera, Chrome, Firefox. Pour IE il faut un hack en JS.


===== 3e essai =====

je me suis dit plutôt que mettre les accords au-dessus, les mettre à droite, sur la même ligne, en float:right sur .verse2 .chord:before.
Problème, mes accords apparaissent dans l'ordre inverse, sur les 2 lignes j'aurai donc F#mEA alors que dans l'ordre c'est A, E, F#m.


===== 4e essai =====

là, les accords sont écrits dans le texte et donc seront vu par le moteur de recherche... donc en fin de ligne (sinon ça "casse" les expressions recherchés - ce dont j'ai parlé au tout début).

<dl>
<dd>J'ai demandé à la lune <span style="float:right;">A - E - F#m</span></dd>
<dd>Et le soleil ne le sait pas <span style="float:right;">A - E - F#m</span></dd>
</dl>

mais les accords à droite se décalent d'une ligne, et parfois aussi horizontalement !
sans compter que la recherche "la lune et le soleil" ne marchera pas puisque "A - E - F#m" est inséré au milieu.

Quelqu'un a trouvé une solution ???
Modifié par iubito (26 Mar 2009 - 23:27)

Bonjour,

Je ne sais pas si j'ai bien tout compris mais pourquoi ne pas doubler ?

Paroles seules
Paroles et accords

Ce qui permet de trouver les paroles via google sans être perturber par les accords.
Modifié par knarf (29 Mar 2009 - 14:50)