Indentare: Lățimea textului în CSS - aceasta este una dintre acele lucruri „teribile“, care sunt în mod constant sperie copii mici încep designeri. Și puțini oameni pot pur și simplu și să explice de ce nu se poate utiliza justifica. Toate explicațiile sunt reduse la afirmația „pur și simplu nu-l și folosesc.“
Și e totul un lucru rău?
De ce face acest lucru
Exemple de aliniere a textului în lățime (atât pe stânga și dreapta), puteți vedea de multe ori în ziare și reviste. Este utilizat pentru o lățime mică coloană pentru a se evita neplăcut la ochi „memorarea“ a textului în partea dreaptă a rândului. Această aliniere crește lizibilitatea și viteza de citire. Lățimea mici coloanei vă permite uita să acopere întreaga linie și să nu alunece în mod continuu de la stânga la dreapta, ceea ce reduce în mod semnificativ sarcina pe ochii cititorului.
Iată câteva exemple pentru comparație:
Un exemplu de aliniere a textului în coloane spre stânga.
Alinierea EXEMPLU textului în coloane pe întreaga lățime.
Evident, a doua opțiune este mai ușor de citit, și doar pare mai armonioasă (există o linie suplimentară de ancorare verticală, ceea ce face ca textul aspect mai puțin aglomerat).
Cum funcționează pe Web
Sunt de acord că alinierea în browser-ul are unele probleme. Specificarea CSS-proprietate text-align: justifica o coloană de text de lățime mică (de exemplu, în 2-300 pixeli), puteți vedea ceva de genul:
Există locuri „problematice“ în forma unor spații mari între cuvinte, descompune imaginea de ansamblu a textului. Există exemple, și mai rău, atunci când, de exemplu, în linia de doar două cuvinte scurte, iar acestea sunt aliniate pe părți opuse. Adică, în coloanele destul de înguste, browsere întotdeauna încearcă să se întindă câteva cuvinte pe întreaga lățime a liniei, indiferent de numărul și lungimea lor. Și este aceasta este o problemă majoră pentru designeri web.
Oh, ne-ar fi ajutat într-adevăr unele proprietăți în CSS -spetsifikatsii min-cuvânt-spațierea sau max-cuvânt-spațierea. dar aceasta este doar fantezia mea și trebuie să folosim ceea ce este acolo.
justifică-tester permite „on the fly“ pentru a modifica lățimea coloanelor de text, dimensiunea fontului, stilul fontului, saturația culorilor și aliniere.
La fel ca în cazul precedent, sper, script-ul vă va ajuta să se ocupe de problemele și de a găsi soluțiile potrivite. trebuie să efectueze încercări în fiecare caz (soluții de proiectare, dimensiunea fontului, lățimea coloanei, etc.).
concluzii definitive care pot fi aplicate „întotdeauna și pentru tot ceea ce“ nu se poate face aici. Nu voi argumenta cu cei care au decis deja pentru mine să nu folosească site-uri de justificare, doar împărtășesc câteva recomandări și observațiile lor cu cei care au decis să „ia riscul“.
rezultate mici
Găsiți „lacune“ în text simplu. Este suficient să se deplaseze ușor departe de monitor și de a reduce claritatea :) (strabism) pentru a vedea nu litere și cuvinte individuale, și întreaga unitate ca un întreg. Și sunteți sigur de a observa „pete albe“. În astfel de locuri, direcția privirii descompune și începe să se miște, nu de la stânga la dreapta, ca de obicei, și în sus.
Pentru cele mai multe set de dimensiuni medii (x-mici, mici, 11-12-13-14 px), probleme de aliniere pronunțate sunt observate în coloanele, o lățime de 400 px (până la 10 cuvinte pe linie). Ei trebuie să continue, dar sunt mai puțin vizibile, deoarece distanța dintre cuvinte este mai mult sau mai puțin egale. Prin urmare, este de dorit să se utilizeze pentru rândurile justifica lățime mai mică de 400 px.
În cazul în care, cu toate acestea, trebuie doar să se alinieze textul la lățimea și lungimea liniilor este mic, încercați să mărească distanța dintre linii (linie de înălțime), până la punctul în care adâncitura dintre liniile de text ar depăși distanța de spații mari între cuvinte. Acest lucru va menține o lizibilitate acceptabilă.
Ei bine, chiar și această aplicație pot fi folosite în alte scopuri. pentru a demonstra clienții individuali care doresc să „cauciuc“ aspectul textului de pe site-ul lor va fi dificil de citit la rezoluție înaltă a monitorului (vorbesc despre „cauciuc“ și aspect nu adaptiv).
Atunci ajută-mă să pune la dispoziția altora, sau pentru a ține pasul cu cele mai recente evoluții: