Per mantenere un segno di punteggiatura preceduto da uno spazio insieme alla parola precedente in una pagina web, sostituisci lo spazio normale con uno spazio unificatore oppure racchiudi la coppia in un piccolo elemento span CSS con no-wrap. Sul Mac, usa un test HTML locale per controllare il risultato a diverse larghezze.

Questa guida è per chi modifica il testo o l’HTML di una pagina su Mac, ad esempio l’etichetta di una scheda astratta come Beta : in un riquadro stretto. L’obiettivo è preservare lo spazio visibile impedendo al due punti di andare a capo da solo. Gli esempi mantengono intenzionalmente quello spazio.

Quale soluzione scegliere?

Per prima cosa, decidi se la regola di spaziatura deve far parte del testo o della presentazione della pagina. Unicode definisce U+00A0 NO-BREAK SPACE come la versione unificatrice di uno spazio normale e U+202F NARROW NO-BREAK SPACE come la sua variante più stretta. Offrono due diverse opzioni di spaziatura visibile. Unicode Standard, Chapter 6

Situazione di modifica Soluzione iniziale consigliata Cosa controllare
Puoi modificare il testo e vuoi uno spazio di larghezza normale Sostituisci lo spazio normale con U+00A0 Che il testo salvato contenga ancora il carattere unificatore
Vuoi intenzionalmente uno spazio più stretto Usa U+202F Che il risultato sia appropriato nel font effettivamente usato dalla pagina
Vuoi mantenere uno spazio normale nel testo Applica white-space: nowrap a uno span che contiene l’intera coppia Che lo span includa la parola, lo spazio e la punteggiatura
Puoi solo visualizzare la pagina Correggi il contenuto nella sua sorgente modificabile oppure chiedi a chi la gestisce Un esperimento locale non modifica la pagina originale

Nel sorgente HTML, scrivi Beta :. La tabella dei riferimenti ai caratteri del WHATWG associa   a U+00A0. Sostituisci lo spazio esistente; non lasciare uno spazio normale prima del riferimento. HTML Standard: Named character references

Per una regola di presentazione, inserisci Beta : in uno span inline e applica white-space: nowrap a quello span. Lascia che il paragrafo circostante vada normalmente a capo. MDN documenta che white-space controlla sia la gestione degli spazi bianchi sia la disposizione del testo su più righe. MDN: white-space

La scelta pratica dipende da quanto testo deve restare unito. In questo esempio, proteggi solo Beta :. Proteggere Tile Alpha Beta : Next tile limiterebbe inutilmente l’intera etichetta. Inizia dall’unità più piccola che esprime la relazione desiderata.

Come creare un test locale con TextEdit

Crea un file di test separato prima di modificare una pagina esistente. Apple documenta come usare TextEdit in modalità testo semplice per creare file HTML, salvarli con estensione .html e scegliere Usa .html quando richiesto. Work with HTML documents in TextEdit on Mac

  1. Apri TextEdit e scegli File > Nuovo.
  2. Scegli Formato > Converti in testo semplice.
  3. Incolla l’esempio completo qui sotto.
  4. Scegli File > Salva e assegna al file il nome punctuation-test.html.
  5. Se richiesto, scegli Usa .html.
  6. In Safari, usa File > Apri file per aprire il file salvato.

Questo è un documento HTML autonomo completo. Non richiede librerie, installazioni o connessione di rete. Le tre schede usano lo stesso testo sintetico, ma applicano un trattamento diverso allo spazio prima dei due punti.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Punctuation wrap test</title>
<style>
  body {
    font: 20px/1.5 system-ui, sans-serif;
    margin: 2rem;
  }
  .card {
    width: 14ch;
    max-width: 100%;
    border: 1px solid #888;
    padding: 1rem;
    margin-block: 1rem;
  }
  .pair {
    white-space: nowrap;
  }
</style>
<h1>Punctuation wrap test</h1>
<h2>Ordinary space</h2>
<p class="card">Tile Alpha Beta : Next tile</p>
<h2>Nonbreaking space</h2>
<p class="card">Tile Alpha Beta&nbsp;: Next tile</p>
<h2>Local no-wrap rule</h2>
<p class="card">Tile Alpha <span class="pair">Beta :</span> Next tile</p>
</html>

La conversione del riferimento a carattere nell’esempio è stata verificata con un parser: &nbsp; corrisponde a U+00A0. Durante la preparazione non è stato eseguito il rendering nel browser. Usa il confronto seguente per controllare l’impaginazione nel browser sul Mac.

Confronta il punto di interruzione, non una sola schermata

La larghezza illustrativa 14ch è un punto di partenza, non un breakpoint garantito. Modificala in 10ch, salva, ricarica e poi prova 18ch. Cerca una larghezza alla quale la scheda con lo spazio normale separa i due punti da Beta. Nelle due versioni protette, il risultato desiderato è che Beta e i due punti restino uniti, mentre le altre parole possano spostarsi.

Se inizialmente le tre schede sembrano uguali, ciò non dimostra che i trattamenti degli spazi siano equivalenti. Potrebbe esserci semplicemente spazio sufficiente per la coppia. Varia la larghezza finché il punto di interruzione rilevante non raggiunge la fine della riga, poi aumenta il testo e ripeti il controllo.

Quando riapri il file in TextEdit, usa File > Apri, seleziona il file, scegli Mostra opzioni e, se necessario, seleziona Ignora i comandi per il testo formattato. Apple documenta anche l’impostazione Visualizza i file HTML come codice HTML invece che come testo formattato. Queste opzioni consentono di modificare direttamente il sorgente. Istruzioni di Apple per HTML in TextEdit

Perché uno spazio unificatore potrebbe comunque non funzionare?

Un carattere unificatore funziona secondo le regole del flusso di testo del browser. Prima di aggiungere altri caratteri invisibili, verifica se il problema dipende dal contenuto, da una regola CSS che lo sovrascrive o da un limite dell’impaginazione.

La pagina mostra il riferimento letteralmente

Se la pagina mostra i caratteri &nbsp;, il testo inserito è stato trattato come testo normale e non interpretato come riferimento a un carattere HTML. In un campo sorgente HTML, usa Beta&nbsp;:. In un normale campo di testo, inserisci invece il carattere unificatore vero e proprio.

La stessa distinzione vale per JavaScript. Assegnare una stringa tramite textContent crea testo; non interpreta i riferimenti HTML. Una stringa JavaScript può contenere il carattere come "Beta\u00A0:". Evita anche di assegnare textContent a un intero paragrafo formattato solo per correggere uno spazio: così facendo ne sostituisci i nodi figli esistenti. MDN: Node.textContent

Una regola CSS consente interruzioni di riga insolitamente aggressive

Verifica la presenza di line-break: anywhere. MDN documenta che questo valore consente interruzioni intorno alle unità tipografiche ignorando i divieti associati alle classi glue e word-joiner. Di conseguenza, un carattere unificatore aggiunto non può essere considerato una sovrascrittura incondizionata di tale impostazione. MDN: line-break

Controlla anche overflow-wrap. Il suo valore anywhere permette di dividere una sequenza altrimenti indivisibile quando necessario per evitare un overflow. Questo comportamento di emergenza è diverso da una normale interruzione in corrispondenza di uno spazio. MDN: overflow-wrap

Usa uno span locale senza a capo quando la presentazione richiede che l’intera coppia breve resti unita. Controlla la regola effettivamente applicata a quello span, soprattutto se il foglio di stile della pagina contiene selettori più specifici. Mantieni la correzione circoscritta, così il testo lungo non correlato conserva il comportamento di disposizione esistente.

La punteggiatura occupa un riquadro di impaginazione separato

Verifica se i due punti sono normale testo inline o si trovano dentro un inline-block o un altro elemento inline atomico. Il W3C specifica opportunità di interruzione speciali intorno agli inline atomici, compresa un’eccezione che riguarda gli spazi unificatori adiacenti. Uno spazio inserito accanto a un simile riquadro non equivale a uno spazio all’interno di un’unica sequenza di testo continua. CSS Text Module Level 3: Line Breaking Details

Per questa semplice etichetta, mantieni la parola, lo spazio e la punteggiatura in un unico span inline normale. Se il comportamento desiderato è l’andata a capo automatica, rimuovi un eventuale <br> esplicito che li separa; nowrap impedisce l’andata a capo automatica, ma non elimina le interruzioni forzate. CSS Text Module Level 3: White Space and Wrapping

Come preservare la composizione tipografica del browser e gestire gli spazi stretti?

Mantieni unite le parole senza spezzarne le singole lettere. Il W3C definisce quando la composizione tipografica deve proseguire attraverso i limiti tra elementi inline e quando modifiche come padding, bordi o allineamento intermedi richiedono di interromperla. Un semplice span inline evita di introdurre limiti di formattazione superflui. CSS Text Module Level 3: Shaping Across Element Boundaries

Resta comunque un vincolo fisico: la coppia protetta ha bisogno di spazio orizzontale sufficiente. Se il contenitore diventa più stretto di Beta :, mantenere unita la coppia può causare un overflow. Verifica deliberatamente questa condizione. Poi scegli una soluzione per l’impaginazione, ad esempio allargare la scheda o accorciare l’etichetta, invece di nascondere il testo interessato. Il comportamento senza a capo è documentato nella definizione di white-space del W3C.

Serve una libreria per le interruzioni di riga?

Per una normale pagina browser, questo compito non ne richiede una. La libreria denominata linebreak calcola i punti di interruzione definiti da Unicode; la sua documentazione lascia esplicitamente la scelta delle interruzioni effettive al software che conosce la larghezza disponibile e le dimensioni del testo visualizzato. Il README attualmente dichiara il supporto alla versione 13 di Unicode. Documentazione di foliojs/linebreak

Questo limite è importante se un altro strumento usa già la libreria. Un elenco di possibili interruzioni non stabilisce dove un browser manderà a capo il testo composto. Per questa attività di modifica della pagina, lascia al browser la composizione del font e l’impaginazione finale, ed esprimi il vincolo desiderato tramite il carattere o il CSS locale.

Prima di trasferire la correzione, verifica tre aspetti: lo spazio resta visibile, la parola e la punteggiatura rimangono unite vicino alla fine di una riga e il testo circostante può ancora andare a capo. Usa uno spazio unificatore quando la relazione fa parte del testo oppure uno span circoscritto senza a capo quando fa parte della presentazione. Ricontrolla la pagina effettiva alla larghezza minima utile.

Fonti