Giustificazione del testo su più colonne 
Auteur : Valentina F.Ho realizzato un sito (www.inesergo.it) che contiene parti di testo strutturato su più colonne.
Per create il testo su più colonne ho molto semplicemente affiancato tre oggetti testo con il loro rispettivo contenuto. Ho poi applicato la giustificazione allo scritto perchè venisse allineato correttamente.
Il problema sorge per ciascuna delle ultime righe di ciascun oggetto testo: dove cioè il testo vero e proprio rimane più corto rispetto alla larghezza del suo contenitore (la colonna), si ottiene un effetto di "spezzatura" sgradevole all'occhio.
Di seguito un'immagine per far capire quanto succede:
Molto peggio l'effetto che si ottiene nella versione mobile, dove gli oggetti testo diventano uno seguente all'altro e le "spezzature" diventano veri e propri "buchi" all'interno della continuità dello scritto.
Come si può ovviare a questo problema? Come si può far sì che lo scritto si adatti alla largezza della colonna anche nell'ultima riga del singolo oggetto testo?
Grazie 1000
Valentina
nell'oggetto testo non hai alternative... perchè non provi ad usare l'oggetto html dividendo il testo su più colonne seguendo questa guida...
https://www.mrwebmaster.it/css/layout-colonne-css3_11679.html
così non hai bisogno di dividere manualmente il testo alla fine delle colonne, senza contare che se dovessi fare delle aggiunte o eliminare del testo, saresti costretta ad aprire vari oggetti testo e sistemare di nuovo manualmente le divisioni...
Auteur
Ho già preso in considerazione la cosa: x quanto riguarda la versione desktop sarebbe ottimo, ma sulla versione mobile renderebbe il testo illeggibile xche' manterrebbe le 3 colonne e costringerebbe il testo in uno spazio vitale troppo ridotto. Addirittura si andrebbe a capo poco più che x ogni parola. Impensabile.
Non vorrei che l'unica possibilità fosse fare un sito destkop e uno mobile diversi invece che rendere lo stesso sito responsive e poi dover fare un redirect......
Possibile non ci siano alternative?
ciao valentina,
potresti inserire una media queries di questo tipo per portare il testo, alle risoluzioni inferiori a due colonne o addirittura ad una...
#testo {
column-count: 3;
text-align:justify;
column-fill: balanced;
column-rule:1px solid red;
column-gap:30px;
}
@media screen and (max-width: 480px) {
#testo {
column-count: 2;
text-align:justify;
column-fill: balanced;
column-rule:1px solid red;
column-gap:30px;
}
}
questo un esempio con un div con nome testo, per il desktop con tre colonne, quando si scende a 480 diventa a due, ma potresti prevedere a una...
A quel punto, codici per codici inserisci la disattivazione dell'impaginazione su tre colonne in base alla risoluzione, tramite
media queries
______________________
@media (max-width: 479px) {
#testo{column-count: 1;}
}
______________________
ciao
... son troppo lento...
beh si, è a stessa cosa che ho scritto io... può impostare a 2 o a 1 colonna...
... se userai il testo in unico oggetto per tutta la larghezza della riga, semplificheresti di molto l'uso del CSS3 già precedentemente suggerito...
... intanto, ...visto che il testo di quella sezione della pagina del tuo LINK è pulito, prova (semplicemente per fare una prova!) ad incollare >> questo codice ( temporaneo!), in > Passo_3 | Proprietà Pagina | ESPERTO | Codice Personalizzato | sezione: Prima della chiusura del TAG >/HEAD>...
.
ciao
.
Auteur
Alt, Riepilogo: se non ho capito male:
1) devo creare un unico oggetto testo contenente TUTTO lo scritto e applicare al suo Div la regola (che mi hai scritto) che dice che sopra (x esempio) i 480 px deve dividere il testo in 3 colonne e al di sotto di quei px deve mantenere il testo in una colonna?
Ok. Provo
oggetto html...
... SI', ...anche se io non posso provare nel programma, e per come ti avevo anticipato, e che puoi dedurre provando direttamente il mio codice (copia/incolla), solo a fini sperimentali...
.
Auteur
Come al solito ho fatto la prova su supergiggia.altervista.org ma la cosa sembra non funzionare.
Creando un unico oggetto testo contenente tutto lo scritto (che se non erro si chiama #imCell_30, come scritto da te sul codice temporaneo) e copiando il codice pari pari nella sezione esperto come ho fatto per l'altro problema che avevo posto e per cui mi avevi dato tu la soluzione, vedo che il testo rimane su una colonna.
Sicuramente sbaglio qualcosa....
Devo creare un unico oggetto HTML come dice Skeggia?
... hai fatto bene per come ti avevo detto...(*)
... in questo caso, essendo unico Oggetto Testo, devi sostituire il precedente mio codice (di prova sperimentale), con >>questo (temporaneo!) ...
.
ciao
(*) ... così puoi formattare il testo a piacere...
.
@Kol, ho provato io e funziona bene sul browser di incomedia ma con mozzilla sovrappone il testo e crome lo taglia...
@Valentina, considerando il fatto che userai spesso questo foglio di stile nel tuo sito, penso che la soluzione più pratica sia quella di inserirlo in statistiche e seo, così che sia disponibile per tutte le pagine.
Poi nell'oggetto testo, attivando l'oggetto html, inserirai il testo tra due div con un'ID sempre uguale, corrispondente al css. Automaticamente tutti i testo a cui metterai quel div risulteranno incolonnati.
Ciao
ancora non ho capito se hai fatto la prova con i codici che ti ho postato... avresti risolto da molto tempo...
... grazie, ho corretto il TXT, non so come mai era rimasta nella penna il width... ...
... ho provato ad editare il >> clone (!) ...
...
... non ho il programma, ma penso, per quel che ricordo dalle precedenti versioni, che se non si è più che esperti questo metodo potrebbe produrre errori se non integrato da accorgimenti extra...
... magari con la v.16 sarà diverso; ...chi può provare potrà verificare...
.
ciao
Auteur
In realtà sto brancolando un po' nel buio.
Ho riletto il tuo post ma non so dove inserire la "media queries" di cui fai cenno, e non ho capito se devo usare l'oggetto testo o quello html, nè se lo devo usare (come nel caso di Kol) con un testo unico che viene suddiviso in 3 o una colonna a seconda della dimensione dei px da un codice esterno (la queri).
Hai presente? Avrei bisogno di una guida passo passo a prova di dura di comprendonio...
Il bello del computer è che a provare non si rompe ne si consuma nulla!
Comunque sono approcci leggermente diversi che portano allo stesso risultato.
Oggetto html: inserisci tutto li, testo e codice (i mediaqueri in sezione esperto): hai il vantaggio di avere tutto sotto controllo.
oggetto testo: metti il testo nell'oggetto testo e poi i media queri nella proprietà pagina, prima del tag head, personalizzando il valore del div, o meglio ancora assegnandolo tu dopo aver abilitato il codice html.
Il consiglio che ti davo io era quello di inserire il foglio di stile non nella pagina ma in tutto il sito (passo1 >statistiche e seo >prima della chiusura di Head) per poterlo utilizzare anche in altre pagine senza doverlo reinserire.
@Kol putroppo non ho fatto in tempo a prendere il secondo esempio per provarlo... dileguossi!
ciao
screenshot...
... speravo che mi dicessi qualcosa sul mio precedente dubbio espresso sul <DIV> nel testo...
... ... @Kol putroppo non ho fatto in tempo a prendere il secondo esempio per provarlo... ...
... essendo una directory tempornea, quando faccio altri esperimenti possono venire a dileguarsi i precedenti...
... comunque il mio codice, anche se lei non l'ha detto, lo si vede attuato nel > LINK! (rg.44-96) di Valentina...
ciao
.
Hai ragione, e si che lo sapevo!
Se ci sono deri ritorni a capo ws5 introduce dei <div> suoi, spezzando quello inserito e rendendolo inutilizzabile...
Quindi per usare l'oggetto testo niente ritorni a capo ma inserire il tag <p> al loro posto.
... grazie Giorgio
...per la tua verifica e riscontro... ... 
...
Auteur
Concordo: il bello del computer è che non si consuma nulla!
Allora: ho fatto la prova sulla pagina "cultura". Ho messo un unico oggetto testo con tutto lo scritto abilitando il codice html per inserire il nome del div="testo". Poi ho inserito l'istruzione nella sezione esperto.
Così come ho fatto sembra non funzionare. Immagino di aver dimenticato/sbagliato qualcosa ma non so cosa.
Riesti ad aiutarmi?
Ho provato invece tutto il codice di Kol sulla index e a me sembra funzionare.... certo, c'è sempre da individuare il div-id e da applicare la regola pagina per pagina ma mi sembra funzionare.....
valentina: usare l'oggetto testo per inserire del codice html secondo me è un artifizio... prova a fare come ti ho suggerito più volte con un oggetto html (inserisci il testo con il div e nella sezione esperto il css... tutto in unico oggetto) seguendo lo screenshot che ho postato sopra... risolvi in 5 minuti... poi fai come vuoi...
Si Valentina, non funziona per il motivo che condividevo con Kol.
L'oggetto testo inserisce dei suoi <div> quando incontra un ritorno a capo vanificando quello inserito da te.
Quindi invece del ritorno a capo metti il tag <br> che svolge quella funzione senza dare problemi.
Ciao
Auteur
Fatto e provato, sempre nella pagina cultura.
Il codice effettivamente funziona, salvo che le dimensioni dell'oggetto HTLM non si adattano (perdona il giro di parole) alle rimodulazioni del testo. Ecco ciò che uccede:
...!... sul mio Chrome v.49 (*) non funziona, mancando le stringe di codice dedicate...!...
... magari è solo un mio problema; comunque fai lo stesso un controllo sui altri PC/browser...
... per la barra di scroll senza programma non saprei, ma! non puoi usare l'opzione per l'altezza automatica...?...
(*) ... per WinVista non si ricevono più aggiornamenti
.
hai provato ad assegnare all'oggetto html l'altezza automatica?
Auteur
Si, ho provato, ma il risultato non cambia.
Auteur
Provato anche questo: il codice viene visualizzato nel browser!
In quella posizione il foglio di stile ha bisogno del tag di apertura <style> e di chiusura </style> e all'inerno metti il codice css
Ciao
Auteur
Ok, inserito il tag apertura style il problena codice è risolto
rimane quello dello scroll..... tant'è che website da questa indicazione:
dove gli altri oggetti presumo siano questi, peraltro non eliminabili
prova ad inserire il seguente comando nel css che comprende il codice per le colonne...
#imHTMLObject_8_01 {height:100% !important;}
ricavando il numero ID dell'oggetto html da te utilizzato...
se non la conosci ti scrivo la procedura per ricavarlo:
lancia l'anteprima, poi con il tasto destro dal menu a discesa che compare clicca su "analizza elemento"...
ti si apre la finestra con il codice... in alto a destra c'è una freccetta... cliccala una sola volta (diventa celeste)...
fai clic sull'oggetto html delle colonne... il codice ti si posizionerà sul tag relativo (forse ti si posiziona sul DIV, ma appena sopra c'è il tag dell'oggetto... sostituisci il numero che ti ho scritto io con il tuo...
... l'oggetto html x testo è "inscatolato", quindi secondo me! la stringa di codice da aggiungere per la correzione scroll potrebbe essere questa:
#imCell_88 div {height:100% !important;}
...!... ma a questa stregua finisce lo scopo dell'Oggetto HTML...!...
...!... infatti, manca il LINK >> [continua a leggere] ...!...
.
Auteur
Alla fine ho inserito questo codice suggerito da Kol:
!-- testo diviso in colonne ==K== ... per sezione </HEAD> ... INIZIO ... -->
<style>
#imCell_30 , #imCell_30 *{ width:100% !important; min-height:0px !important; }
@media (min-width: 1250px) {
#imCell_30 {
padding: 10px;
column-count: 3;
column-gap: 30px;
-moz-column-count: 3;
-moz-column-gap: 30px;
-webkit-column-count: 3;
-webkit-column-gap: 30px;
} }
@media (max-width: 1249px) and (min-width: 480px) {
#imCell_30 {
padding: 10px;
column-count: 2;
column-gap: 30px;
-moz-column-count: 2;
-moz-column-gap: 30px;
-webkit-column-count: 2;
-webkit-column-gap: 30px;
} }
@media (max-width: 480px) {
#imCell_30 {
padding: 10px;
column-count: 1;
column-gap: 30px;
-moz-column-count: 1;
-moz-column-gap: 30px;
-webkit-column-count: 1;
-webkit-column-gap: 30px;
} }
</style>
<!-- testo diviso in colonne ==K== ... per sezione </HEAD> ... FINE ... -->
Ha solo una serie di problemi sugli ACCAPO (lavora veramente bene solo sui testi ininterrotti) e sui margini del DIV (non sono riuscita a capire se prevalgono quelli dell'oggetto testo su altri eventuali parametri tipo padding 10px).
la pagina http://inesergo.it/darioargento.html per farmi capire.
Lavorando veramente bene solo su testi ininterrotti, il blocco testo diventa un po' troppo pesante all'occhio (lungo, continuativo e senza interruzioni).
E' possibile a questo punto creare un DIV cui applicare questo codice ma che lavori su 2 colonne (che poi diventa una sotto i 480 px) ad un altro DIV testo che lavorino affiancati ma con regole separate?
Auteur
Ok, lavorando un po' su questo codice e con un po' di pazienza negli accapo direi che il problema è risolto.
Ancora una volta grazie 1000 a tutti, anche per la pazienza!