Linee guida sul layout HTML per la globalizzazione di pagine Web ASP.NET
Aggiornamento: novembre 2007
La procedura migliore per il layout HTML consiste nell'assicurarsi che sia necessario localizzare solo le stringhe, perché l'interfaccia utente ridimensiona i controlli in base al testo delle stringhe. Ciò rappresenta un vantaggio in quanto l'operazione di ridimensionamento manuale dei controlli viene rimossa dal processo di localizzazione e vengono così eliminati gli errori e i bug che ne possono risultare. Tuttavia il layout dei controlli cambia a seconda della lunghezza delle stringhe, quindi i siti Web localizzati devono essere verificati accuratamente.
Di seguito sono riportate le linee guida per la progettazione di pagine Web ASP.NET per la globalizzazione.
Evitare di utilizzare posizioni assolute.
Specificando posizioni assolute si impedisce il posizionamento e il ridimensionamento automatico degli elementi. Nell'esempio di codice riportato di seguito viene illustrato che cosa è necessario evitare.
<!-- Do not do this. --> <div id = idFindWhatLabel style = "position: absolute; left: 0.98em; top: 1.2168em; width: 4.8em; height: 1.2168em;">Utilizzare la larghezza e l'altezza disponibili per i form.
Per eseguire questa operazione, sono disponibili i due modi seguenti:
Ridimensionare gli elementi principali, ad esempio le tabelle, in base a una larghezza pari a 100%.
Di seguito è riportato un esempio:
<!-- A table sized to take up entire width of the form.--> <table width=100%>Ridimensionare gli elementi utilizzando le espressioni dei fogli di stile CSS in base alle dimensioni complessive del form.
Di seguito è riportato un esempio:
<!-- A div element sized to take up half the width and height of the form. --> <div style=' height: expression(document.body.clientHeight / 2); width: expression(document.body.clientWidth / 2); '>
Utilizzare una cella della tabella per ciascun controllo.
In questo modo è possibile mandare a capo il testo in modo indipendente e garantire il corretto allineamento per le lingue in cui il layout del testo viene disposto da destra a sinistra.
Consentire il ritorno a capo del testo ed evitare di utilizzare l'attributo nowrap per le celle della tabella che contengono testo.
Utilizzare l'attributo nowrap solo quando si desidera che il testo occupi una sola riga ed è disponibile spazio sufficiente per espandere il testo per ogni lingua.
Separare caselle di controllo e pulsanti di opzione dai rispettivi testi dell'etichetta.
Inserire le etichette per le caselle di controllo e per i pulsanti di opzione in celle separate dai controlli. In questo modo il testo va a capo correttamente all'aumentare della lunghezza. Tuttavia è opportuno progettare il form in modo che il testo possa occupare una sola riga anche una volta tradotto.
Lasciare spazio per l'aumento della lunghezza del testo ed evitare le larghezze fisse.
Il testo può diventare più lungo una volta tradotto in altre lingue. Una buona regola consiste nel lasciare spazio per un aumento del 300% per le stringhe corte, vale a dire con meno di 10 caratteri, del 200% per le stringhe di media lunghezza, ovvero 10-20 caratteri e del 100% per le stringhe lunghe, cioè con più di 20 caratteri.
Una soluzione accettabile consiste nell'impostare la larghezza della cella della tabella su una percentuale della larghezza del form, in modo che la cella possa essere ingrandita in proporzione all'intera tabella. È bene tuttavia specificare il minor numero possibile di dimensioni relative, ovvero diverse dal 100%, per sfruttare al massimo le funzioni automatiche del layout HTML.
<!-- The table cell is sized to take up one quarter of the width of the table. --> <td width=25%>Ridimensionare i pulsanti in meno punti possibili.
Spesso vi sono gruppi di pulsanti che devono avere le stesse dimensioni. Se possibile, impostare tali dimensioni in un punto per l'intero gruppo di pulsanti. Lasciare spazio per l'aumento della lunghezza del testo nelle caselle di riepilogo e nelle caselle di gruppo.
Evitare il più possibile di impostare l'altezza.
Non impostare l'altezza della cella per celle della tabella o controlli che contengono testo. È possibile impostare l'altezza della linea per gli elementi dei fogli di stile CSS. L'aspetto della pagina viene modificato se l'utente imposta la dimensione del testo nel browser.
Non utilizzare l'allineamento a destra o a sinistra nei tag HTML.
In genere evitare di impostare align="left" o align="right" per le celle della tabella. Tali impostazioni possono interferire con il layout dei form per lingue in cui il layout del testo va da destra a sinistra.
Evitare i valori dei fogli di stile CSS inline che potrebbero dovere essere modificati.
Mantenere tutti i valori dei fogli di stile CSS, che potrebbe essere necessario modificare durante la localizzazione, nei fogli di stile invece che inline. È compresa l'impostazione del carattere per una pagina.