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,

tout betement je repondrais un tableau ? , il s'agit a premiere vue d'affiché l'une au dessus de l'autre 2 ou 3 données lié sur une échelle de temps .

Clé/temps1 2 3 4
[tablaturestabs en images (accord texte en alt + longdesc vers une vrai partition ?)
paroles .... .. . .. . . . .
AccordsA A B A


Ou je dis la une vrai grosse bétise ?
Modifié par gcyrillus (29 Mar 2009 - 00:02)

Non, les tableaux ça va bien pour des grilles d'accord sans paroles, par exemple :
http://www.tousauxbalkans.net/All_of_Me

Je cherche plutôt, dans le cas précis de ma question précédente, à faire quelque chose qui ressemble à ceci :
http://www.tousauxbalkans.net/Od_lo_ahavti_dai
et de manière non obstrusive, c'est-à-dire que pour le référencement, les gens doivent pouvoir chercher des bouts de paroles dans google et me trouver, sans que ce soit perturbé par des accords au milieu - dans le flux HTML -.
Après, reste à placer ces accords soit à droite (comme ce que j'ai fait), soit au-dessus.
Là j'ai fait pour chaque ligne

<span style="align:right...">les accords</span>la ligne de texte

c'est pas génial por le référencement, car le crawler verra
les accords la ligne de texte

et j'aimerai qu'il ne voit que "la ligne de texte", les accords étant caché dans le flux (par exemple en les mettant dans un attribut title) et seulement visibles graphiquement.

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)