Newsgroup: it.comp.lang.javascript
Titolo: allineare testo e accordi

vorrei scrivere le parole di alcune canzoni con gli accordi per chitarra 
allineati a certe sillabe
con il tag <pre> il risultato e' teribbile!
ho pensato di usare una tabella a due righe per ogni riga del testo.
tutto bene finche' l'accordo si allinea alla prima sillaba di una parola,
se pero' l'accordo va allineato ad una sillaba intermedia, dovendo inserire 
meta' parola in una cella e meta' in un'altra, compare un piccolo spazio...

 con il tag <pre> il risultato e' teribbile!
Si puo' risolvere, credo, con i css. Ho provato un po', eccoti un esempio
al volo (NB nota l'utilizzo dei tag *<br>* e degli spazi *&nbsp;*):
<style type="text/css"><!--
div {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  color: #336699;}
div.lyrics {
  float: left;
  margin: 0px;
  padding: 0px;}
div.phraseLine {
  clear: both;
  margin: 0px;
  padding: 15px 0px 5px 5px;}
--></style>
<div class="phraseLine">
  <div class="lyrics"> <br>Sapore di&nbsp;</div>
  <div class="lyrics">Do<br>sale sapore di&nbsp;</div>
  <div class="lyrics">La-<br>mare che hai sulla&nbsp;</div>
  <div class="lyrics">Re-<br>pelle che hai sulla&nbsp;</div>
  <div class="lyrics">Sol7<br>labbra&nbsp;</div>
</div>
<div class="phraseLine">
  <div class="lyrics"> <br>Quando esci dall'</div>
  <div class="lyrics">Mi-<br>acqua e ti lasci ca</div>
  <div class="lyrics">La-<br>dere vicino a&nbsp;</div>
  <div class="lyrics">Re-<br>me vicino a&nbsp;</div>
  <div class="lyrics">Sol7<br>me</div>
</div>
-- 
~Nando~ :-/__.oO
Apostolo della Prova

 al volo (NB nota l'utilizzo dei tag *<br>* e degli spazi *&nbsp;*):
cosi' allinea alla perfezione (ed e' anche molto piu' veloce delle 
tabelle...), pero' cosi' perdo la possibilita' di avere due font diversi, 
uno per il testo e uno (piu' piccolo) per gli accordi...
p.s. mi scuso per l'ot... ma ho pensato che i programmatori fossero, in 
generale, un po' piu 'svegli' 

credo di aver capito la finezza... (conosco da poco css), credo col tuo 
sistema (che dovro' studiarmelo un po') di riuscire a ottenere capra e 
cavoli
ti ringrazio molto 

 generale, un po' piu 'svegli'
Mhm, questa non l'ho capita... L'OT è stato aggiunto per il semplice fatto
che la domanda in sè non richiede javascript, che è il soggetto del
newsgroup, non per altro.
-- 
~ "Nell'anno 1969 è bastata la potenza di calcolo di due Commodore 64 per
mandare con successo una navicella sulla Luna. Nell'anno 2003 è
necessario un Pentium 4 a 2000 Mhz per far funzionare Windows XP.
Qualcosa deve essere andato storto."

 parecchio piu` semplice...
Capisco "la sforbiciata" la semplificazione della struttura dell'HTML, ma
per il resto la scrittura del CSS mi confonde non poco; ma ti avevo già
detto in un precedente thread che mi risultava decisamente scomoda la
formattazione in quel modo: trovo decisamente più leggibile l'allineamento
a destra, magari con qualche tab, al più.
Un paio di note:
Viene sempre suggerito di utilizzare la forma contratta piuttosto che
quella estesa, laddove possibile. Vedi ad esempio come hai fatto anche tu
per quanto riguarda il padding.
Il tag "i" non andrebbe usato per questione genere di cose (è formalmente
scorretto intendo); in quanto sono tag di "presentazione".
Non ricordo neppure se avevano intenzione di dichiararli deprecati o meno,
dato che cozzavano un po' con la filosofia della separazione della "forma
dal contenuto".
Per questo esistono tag come "em" e "strong" che di fatto, comportano le
stesse cose a livello visivo ma hanno formalmente un significato diverso a
livello di markup (em sta per "enfatizzare", non identifica necesariamente
l'italico, etc).


 parecchio piu` semplice...
Capisco "la sforbiciata" la semplificazione della struttura dell'HTML, ma
per il resto la scrittura del CSS mi confonde non poco; ma ti avevo già
detto in un precedente thread che mi risultava decisamente scomoda la
formattazione in quel modo: trovo decisamente più leggibile l'allineamento
a destra, magari con qualche tab, al più.
Un paio di note:
Viene sempre suggerito di utilizzare la forma contratta piuttosto che
quella estesa, laddove possibile. Vedi ad esempio come hai fatto anche tu
per quanto riguarda il padding.
Il tag "i" non andrebbe usato per questo genere di cose (è formalmente


 newsgroup, non per altro.
vi ringrazio molto per l'aiuto...

 ti ringrazio molto
Figurati, mi diverto a cazzeggiare :)


 posso dargli una... sforbiciata? :-P
No, guarda... e' proprieta' mia, l'ho fatto io e nessuno lo deve toccare :)
