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. 

HTML Tag poco noti...: DIALOG

Oggi esistono molti framework che permettono di costruire un sito o un'app usando linguaggi di alto livello, che quindi prescindono da una conoscenza puntuale di HTML. Tuttavia sapere quali sono le possibilità a propria disposizione è sempre utile ed usare sempre un framework che costruisce le cose significa anche da un lato fidarsi completamente e dall'altro non avere possibilità di introdurre cose nuove.

Con la solito filosofia di scrivere le cose qui allo scopo di ricordarle... riporto alcuni tag poco noti o usati in modo diverso dal solito, cominciando dal primo, di cui fino a poco tempo fa non conoscevo l'esistenza.

Dialog

Per far comparire un dialogo spesso si costruisce un <div> nascosto, cambiandone la visibilità quando necessario, oppure usando l'interfaccia di jQueryUI. È invece possibile fare tutto da HTML + CSS + JS; il codice della pagina si presenta molto semplice; quello che segue mostra un dialogo modale che presenta semplicemente un messaggio:

HTML

<dialog id="dialogo">

<p class="message">Sto avvisando l'utente</p>

<button id="closeButton">Ok, ho capito</button>

</dialog>

Javascript

const dialog = document.getElementById("dialogo");

const openButton = document.getElementById("openButton");

const closeButton = document.getElementById("closeButton");

//evento click di apertura del pulsante esterno al dialogo

openButton.addEventListener("click", () => {

dialog.showModal();

})

//evento click di chiusura del pulsante interno al dialogo

closeButton.addEventListener("click", () => {

dialog.close();

})

Avendo chiamato la .showModal(), il dialogo (alla fine, il browser) impedisce ogni azione sulla pagina sottostante, eliminando la necessità di porre al di sotto uno strato che intercetti il mouse. Se vogliamo che lo sfondo venga in qualche modo nascosto o ridotto in importanza (dato che non è attivo), possiamo usare lo pseudo-elemento ::backdrop; un esempio di foglio di stile minimale:

CSS

#dialogo {

border-radius: 5px;

}

#dialog::backdrop {

opacity: 0.8;

}

Se invece il metodo di apertura fosse stato .show(), allora il dialogo sarebbe stato non modale: la pagina sarebbe stata libera di interagire con l'utente (niente ::backdrop!), con tutti gli eventuali problemi (e soluzioni!) che arrivano in quel modo (tra questi, la necessità di poter individuare bene il dialogo e la possibilità di spostarlo col mouse).

Usare i risultati

Dialoghi con il solo pulsante di chiusura sono utili per comunicare un evento, con la sola necessità di sapere che l'utente l'abbia visto. Ma spesso è necessario avere una risposta dall'utente, per esempio quando ha appena richiesto la cancellazione di un elemento; è allora necessario un ritorno alla chiusura del dialogo.
Questo passaggio avviene tramite la variabile del Dialogo .returnValue: normalmente contiene il pulsante che ha lanciato il metodo .close() del dialogo (cioè il pulsante con cui si è chiuso il dialogo). All'evento di chiusura si otterrà il risultato del dialogo:

Javascript

//evento di chiusura del dialogo

dialog.addEventListener("close", () => {

doSomething(dialog.returnValue) //usiamo il risultato per qualcosa

})

Se abbiamo bisogno di più informazioni oltre al pulsante premuto (magari nel dialogo c'era un campo di testo e un menu) allora all'interno del dialogo dovrà essere previsto un form, che ci aiuterà a riportare indietro tutti i valori che ci servono.

Disponibilità

Il tag dialog e le sue funzionalità sono disponibili dal marzo 2022 e framework non aggiornati non lo usano. Tuttavia, è una funzionalità ormai assodata e accettata da tutti i browser moderni.