Quali sono le migliori pratiche per gestire le interruzioni di linea desiderate nel web design reattivo?

Progetto moltissimi semplici articoli Web a pagina singola per vendite o e-mail. Trovo spesso di riscontrare problemi con i titoli e le mie interruzioni di riga desiderate con diverse larghezze dei media.

Ad esempio, potrei avere un titolo come:

Il nostro nuovo thingamabob è la cosa migliore da quando il pane a fette!

Senza alcuna attenzione alle interruzioni di linea, le interruzioni di linea in questo modo:

Il nostro nuovo thingamabob è la cosa migliore da quando il
pane a fette!

A tutta dimensione del Web, vorrei interrompere la riga dopo "il". Creare due linee.

Il nostro nuovo thingamabob è la
cosa migliore da quando il pane a fette!

Per uno schermo di media larghezza, mi spezzerei due volte:

Il nostro nuovo thingamabob
è la cosa migliore da
quando il pane a fette!

Per schermi ancora più stretti, rompevo dopo "nuovo", dopo "thingamabob" e dopo "cosa". Creazione di quattro righe.

Il nostro nuovo
thingamabob
è la cosa migliore da
quando il pane a fette!

Non voglio davvero usare i tag di interruzione ( <br>) perché questo imposta le interruzioni a tutte le dimensioni. Fino ad ora ho usato domande dei media e le percentuali di larghezza per i vari h1- h5tag in modo che la larghezza delle forze tag una pausa. Ma questo mi sembra "confuso" (a volte è anche molto temperamentale in base al testo reale).

Qual è il modo migliore per controllare le interruzioni di riga senza codificarle nel codice HTML?

Sto solo avvisando questo sulla base del fatto che viene utilizzato per brevi frammenti di testo e non per paragrafi.

La formattazione dei titoli può e deve essere controllata il più possibile entro limiti ragionevoli . JavaScript o altri elementi superflui non sono del tutto "limiti ragionevoli" .

Gli spazi non di rottura invece possono essere utili se usati con moderazione.
Posizionandoli tra le coppie di parole e le terzine che si desidera tenere insieme è possibile ottenere i risultati desiderati.

Tuttavia, non puoi usarne molti consecutivamente, a seconda della lunghezza delle parole che stai usando, il collegamento di troppi costringerà il testo a traboccare dalla finestra o dal suo contenitore.

Qualche rapida sperimentazione sul tuo particolare insieme di parole dovrebbe rivelare le migliori parole da collegare.

Per l'esempio in questa domanda l'HTML potrebbe apparire come:

<span>Our&nbsp;New thingamabob is&nbsp;the best&nbsp;thing since&nbsp;sliced&nbsp;bread!</span>

In realtà non è necessario CSS qui. Il CSS in questo esempio che ho prodotto è solo per divertimento.

In breve, la chiave di questo metodo è limitare il numero di punti in cui il testo può essere interrotto.

Dopo aver riletto la domanda, mi rendo conto di non aver soddisfatto del tutto i requisiti. Per questo caso specifico, e supponendo che ci siano altre pagine che richiedono la stessa attenzione, definirei un singolo <br>per un punto di interruzione a tutta larghezza. Vorrei quindi riutilizzare la stessa classe su ciascuna delle pagine nel punto più ideale dell'intestazione.

Questa <br>classe collasserebbe in qualcosa di più piccolo della larghezza intera agendo come se non fosse nemmeno lì, con l'uso di media query. A dimensioni di viewport inferiori alla larghezza intera, ci affidiamo  solo a.

Un altro esempio con un singolo<br> più vicino al marchio.

HTML:

<span>
    Our&nbsp;New thingamabob is&nbsp;the<br class="full-width-breakpoint"/> best&nbsp;thing since&nbsp;sliced&nbsp;bread!
</span>

Il CSS:

@media screen and (max-width:550px) {    /* Max Width depends on your design */     
    .full-width-breakpoint {             /* only experimentation or */
        display:none;                    /* calculation will reveal */
        line-height:0;                   /* the best max-width */
    }
}

La migliore pratica è riconoscere che non hai alcun controllo reale sulle interruzioni di linea sul Web ed è meglio progettare tenendo presente questo aspetto.

Qualsiasi soluzione contraria dovrà, inevitabilmente, essere confusa. Poiché sarà un hack poiché l'HTML non aderisce alle interruzioni di riga definite dall'utente al di fuori della codifica hardware. Potresti farlo con JS abbastanza facilmente. Imposta i punti di interruzione con intervalli vuoti con classi univoche, quindi in base alle dimensioni della finestra puoi iniettare i tag BR in ogni SPAN desiderato.

Esistono alcuni stili CSS che funzioneranno sui browser più recenti per controllare il modo in cui il browser gestisce il ritorno a capo, ma non ti darà ancora il controllo esatto che stai cercando in questa situazione.

D'altra parte, se il tuo obiettivo non è quello di controllare specifiche interruzioni di riga, ma per assicurarti che il blocco di testo si "impili" in righe relativamente uniformi, imposterei la larghezza del DIV in modo diverso per ogni finestra. Non sarà perfetto, ma probabilmente abbastanza vicino e potrebbe essere il miglior compromesso.

C'è un plugin jquery per questo, Balance Text .

È un plug-in Adobe creato insieme alla propostatext-wrap: balance; di Adobe per ottenere un'opzione CSS che farebbe proprio come la funzione Balance Ragged Lines di Adobe InDesign (suona alla grande, ma anche se viene accettata, passeranno anni prima che i browser lo supportino).

Il plugin, tuttavia, funziona ora. Bilancia tutti gli elementi che hanno la classe balance-texto usando jQuery come$('.some-elements').balanceText();

• Ecco una demo ufficiale di Adobe , usando un testo giustificato .

• Ecco una demo che ho fatto usando <h1>s - allineato a sinistra per modificare il codice. Questo mostra alcune delle limitazioni al momento della scrittura:

limitazioni

Questo codice attualmente funziona solo sul testo nei tag a livello di blocco senza elementi in linea.

Nel demo 4 vedrete come qualsiasi cosa all'interno del vostro blocco di testo equilibrato come un <a>collegamento, <span>S o enfasi come <em>, <strong>, <b>, <i>ecc viene rimosso.

Inoltre, confrontando le demo 1, 2 e 5, ti sembrerà di dover usare sia la classe CSS che la chiamata jQuery.

Sembra moderatamente affidabile ma a volte glitch - al momento della scrittura, occasionalmente scivola su quando è in una colonna laterale, lasciando orfani solitari (ma sembra funzionare il 95% + delle volte e non l'ho ancora visto scivolare via tranne quando in una colonna laterale), e per motivi inspiegabili, le mie dimostrazioni non funzionano su Firefox, ma le dimostrazioni di Adobe funzionano (bene in IE9 +, non posso testare in IE8 in questo momento). Se lo usi, considera un po 'di tempo per i test.

Devo occuparmene un po 'regolarmente, con il contributo dei designer che vogliono che le cose si rompano in un certo modo. Ho trovato il modo più semplice per farlo è quello di inserire un intervallo con una classe all'interno del testo, e quindi avere quell'intervallo display: block;per le query dei media.

Quindi sarebbe simile a questo:

<p>This is some text and I want <span class="mobile-only-line-break">only this text to break, but only on mobile</span></p>

Quindi avrei CSS con qualcosa del genere:

@media all and (max-width: 767px) {
.mobile-only-line-break { 
display: block;
}
}

Devi ancora attraversarlo e rifinirlo per assicurarti che le cose si spezzino nel modo desiderato per tutte le larghezze.

Se si tratta di un problema frequente, puoi creare il tuo set di classi di interruzione di linea sul Bootstrap di Twitter o qualsiasi sistema di griglia che stai utilizzando, modellando i nomi delle classi dopo qualsiasi convenzione di denominazione che stai utilizzando.

Puoi usare JavaScript per rilevare la larghezza dello schermo e scrivere la versione corretta (con <br> come hai nel tuo post) in un div vuoto tramite innerHTML.

Sfortunatamente, "interruzioni Web desiderate" e "migliori pratiche Web" non vanno insieme. Lascia andare il tuo desiderio perfezionista di portare ogni parola nel posto giusto: ci sono troppe possibilità di schermate e troppi lettori che non hanno la mentalità del designer che devi anche preoccuparti delle interruzioni di riga nei loro titoli. Cerca Responsive Web Design per comprendere meglio questi problemi.

Il mio metodo attuale ...

<h1>Our New thingamabob is the best thing since sliced bread!</h1>

E il CSS:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
   h1 { margin: 0 auto; text-align: center; width: 280px; }
}

@media only screen 
and (min-width : 321px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (max-width : 320px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-width : 1224px) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    h1 { margin: 0 auto; text-align: center; width: 1200px; }
}


@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}

Le larghezze a volte necessitano di qualche aggiustamento in base al testo reale utilizzato, ma questo è lo schema generale che uso. Riducendo sostanzialmente la larghezza del h1tag in modo che la linea si interrompa dove voglio che si interrompa.

Questo funziona, richiede solo test approfonditi per assicurarsi che si verifichino interruzioni dove desiderato. Tuttavia, in ogni caso sono necessari test approfonditi. Quindi, non è necessariamente più lavoro in questo senso.

È possibile aggiungere white-space: nowrape posizionare <wbr>i punti in cui si desidera consentire le interruzioni di riga. Se questo non è abbastanza e desideri un controllo accurato con le query multimediali, puoi comunque aggiungere classi come<wbr class="mobileOnly">

<wbr>doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr