HTML: tag poco noti - sulle traduzioni

L'attributo TRANSLATE

Molti browser sono in grado di riconoscere in che lingua è stato scritto il testo di una pagina; allora, usando qualcuno dei servizi web (il più famoso è ovviamente quello di Google) possono fornire la pagina tradotta nella lingua preferita dall'utente, che avrà inserito questa informazione nelle preferenze del browser stesso.

Bisogna dire che ultimamente, tramite anche l'uso di un po' di AI, queste traduzioni stanno diventando leggibili, talvolta non ci accorgiamo nemmeno che la pagina originale è in una lingua completamente differente dalla nostra.

Però non sempre la traduzione completa è la cosa migliore è nei casi comuni i vari servizi fanno già una buona filtratura: la frase in inglese "pick the mouse and draw something on the screen" viene tradotta, giustamente come "prendi il mouse e disegna qualcosa sullo schermo"; d'altra parte, la frase "the cat caught the mouse" è tradotta come "il gatto ha preso il topo": il traduttore si è accorto che i due contesti sono differenti: nel primo caso ha riconosciuto che si trattava del dispositivo di puntamento di un computer, mentre nel secondo il riferimento indicava proprio l'animale. Allo stesso modo, il traduttore verso il francese sa invece che il mouse viene tradotto con souris, stesso nome dell'animale; quindi anche la lingua può essere importante.

Da notare che fino a poco tempo fa non era così scontato: qualcuno si ricorderà delle istruzioni di pulizia dei mouse, in cui si diceva "pulire la palla del topo"...

Tuttavia non sempre la procedura riesce a comprendere tutto alla perfezione, o addirittura qualche volta siamo noi che vorremmo che certe parole non fossero tradotte: per esempio, in una pagina pubblicitaria non voglio che il nome del prodotto, registrato esattamente in quel modo, venga mai tradotto. Sotto Natale (non so perché solo allora) compaiono pubblicità di profumi, in cui si usa il sostantivo francese parfum nel nome del prodotto anche in italiano. Qui diventa difficile anche per l'AI. Ed è qui che entra in gioco l'attributo translate.

È un attributo che può essere inserito in qualunque tag contenga del testo; se non presente, il valore di default è yes ed il testo contenuto al suo interno viene tradotto normalmente dal browser (o meglio, dal servizio invocato dal browser. Ma se invece viene inserito con valore no, il testo contenuto viene lasciato in originale, non tradotto:

<p translate='no'>Questo testo non viene tradotto</p>

Non è di uso frequente, ma qualche volta può essere utile, anche come indizio di professionalità di chi ha costruito il sito. È supportato da tutti i maggiori browser.

HTML Tag poco noti...: DETAILS/SUMMARY

Questo è un altro tag (o meglio, una coppia di tag) piuttosto dimenticati, nonostante siano disponibili su tutti i browser da qualche anno.

Supponiamo di voler presentere presentare una pagina piuttosto ordinata, con eventualmente la possibilità di vedere dettagli e annotazioni non necessari ad una prima lettura. Penseremo certamente al famoso triangolino che, cliccato, ruota su se stesso ed apre uno spazio in cui compaiono i dettagli. Si tratta di un'interfaccia a cui ci hanno abituati il Finder del Mac e l'Explorer di Windows, per non parlare di Linux.

In questi casi, bisognava costruire "a mano" quello che serviva: il triangolino (una figura) seguita dal titolo; una funzione javascript si occupava di impostare a visibile la regione nascosta (di solito un <div>) e di sostituire il triangolino con la sua versione "aperta"; un secondo click faceva il contrario, nascondendo la regione e riportando il triangolo nella posizione chiusa. Trattandosi di un click sullo stesso oggetto, la funzione doveva prima stabilire se la condizione iniziale fosse aperta o chiusa. Nulla di trascendentale, però si trattava comunque di un certo numero di righe da scrivere.

Dal 2020 con i maggiori browser conosciuti non è più necessario tutto questo giro: basta inserire il tag <details>, che si occupa di aprire e chiudere il suo contenuto e aggiornare l'immagine del triangolino. Il tag  <summary> al suo interno presenta il titolo che dobbiamo cliccare per aprire e chiudere: il codice più semplice è il seguente:

<details>

<summary>Informazioni</summary>

Questa è l'informazione che viene mostrata.

</details>

Senza necessità di alcun javascript, questo codice porta al seguente effetto (cliccare sul triangolino):

Informazioni

Questa è l'informazione che viene mostrata.

Il tag <summary> deve essere il primo a comparire all'interno del <detail>: se non c'è o non è il primo, il browser inserisce un suo default (di solito sarà qualcosa simile a Details).

Naturalmente, si possono poi stilare i componenti:

summary {

font-weight: bold;

color: red;

}

details {

border: 1px solid black;

border-radius: 4px;

padding: 4px;

color: gray;

}

details[open] summary {

color: blue;

}

ottenendo come risultato:

Informazioni

Questa è l'informazione che viene mostrata.

Come si vede, è possibile mostrare stili differenti usando il termine [open] per indicare la situazione di aperto. È anche possibile far partire la pagina con i dettagli aperti, introducendo l'attributo open (se si vuole che parta chiuso, non lo si mette e basta: open = false non funziona!).

Ogni volta che un <summary> viene cliccato e quindi viene cambiato lo stato open/close, viene generato un evento toggle, che possiamo usare per aggiungere azioni.

Inoltre, possiamo creare una lista di tag <details> e se tutti hanno lo stesso attributo name="xyz", allora il broser si occupa anche di mostrare aperto solo uno della lista: cliccando su uno chiuso, questo viene aperto ed il precedente viene chiuso, tutto in automatico.

Ultima cosa: il tag <summary> viene preparato come un elemento di una lista (display:list-item), per cui è possibile usare le proprietà conseguenti per esempio per inserire icone diverse dal triangolino. Però non è possibile inserire l'animazione di apertura/chiusura, che col metodo vecchio veniva aggiunta tramite javascript.