IPRO - PC Magazine Romania, 2002
Comunitatea experţilor şi a cititorilor PC Magazine - Internet PRO

Formatarea textului

Emanuel Baruch

Design-ul unui sit este esenţial pentru ca acesta să lase o impresie bună asupra vizitatorilor săi. Dacă ne gândim însă că internetul înseamnă informaţie, atunci ceea ce contează cu adevărat la un sit este conţinutul acestuia.

Există nenumărate pagini web care încearcă să ne impresioneze cu diverse efecte "magice" - dar din punct de vedere al informaţiei şi utilităţii lor ele lasă de dorit. Însă un conţinut bine structurat şi interesant (bineînţeles, pentru tematica respectivă) va fi irosit dacă modul de prezentare al acestuia îl împiedică pe vizitator să-l parcurgă cu uşurinţă. Iar aceasta se va întâmpla de fiecare dată când textul este formatat la întâmplare.

Cu ani în urmă, primele browsere apărute nu permiteau formatarea textului. Însă - încet, încet - designerii web au preluat controlul asupra modului în care conţinutul paginilor lor va fi afişat pe ecranele vizitatorilor.

Limite în acest sens există însă chiar şi astăzi, când s-a răspândit deja generaţia a şasea de browsere.

(Internet Explorer 6, Netscape 6, Opera 6). Aceste limite decurg în primul rând din imposibilitatea de a controla setările sistemelor utilizatorilor, precum şi din marea diversitate existentă în acest sens. Concret, un utilizator îşi poate seta programul de navigare astfel încât acesta să afişeze numai un anumit tip de caractere, indiferent de specificaţiile din paginile web. Chiar şi atunci când browserele respectă instrucţiunile de formatare a textului vor apărea diferenţe de la un sistem de operare la altul.

Întâi, să vedem ce înseamnă concret formatarea textului dintr-o pagină web. Există trei elemente care trebuie luate în consideraţie: culoarea textului, corpul de literă (fontul) şi dimensiunea acestuia.

Posibilităţile pe care ni le pune la dispoziţie limbajul HTML şi extensiile acestuia (Foile de stil - Cascading Style Sheets) sunt destul de dezvoltate.

Folosind tag-ul font şi atributele sale, putem controla toate aceste elemente. Iată un exemplu:
<font face="Arial, Verdana, Helvetica" color="#000000" size="3"> text formatat </font>
Cu ajutorul lui face vom preciza corpul de literă dorit. Observaţi că am specificat mai multe tipuri de fonturi într-o enumerare. Aceasta din cauză că fontul ales de noi nu va putea fi văzut de vizitatorul paginii web decât dacă acesta este instalat pe sistemul său. În plus, fontul Arial, de exemplu, nu este disponibil pe sisteme Macintosh. În acest caz, browserul va alege următorul font din listă sau unul cât mai apropiat de cel specificat de noi.

Atributul color ne permite să stabilim culoarea textului. Ca valoare puteţi folosi codul RGB (red-green-blue), codul hexazecimal (care este echivalentul în baza 16 a valorilor RGB) sau denumirea culorilor standard (white, black, red, blue etc). Vă sfătuiesc să apelaţi la a doua variantă, deoarece este mult mai precisă, în acest caz valorile fiind de forma #FFCC99. Iată şi un exemplu pentru codul RBG: rgb(0, 255, 0).

Dimensionarea fonturilor de pe o pagină web cu ajutorul limbajului HTML este destul de limitată, atributul size suportând doar valori întregi (1, 2, 3, etc.). Valoarea prestabilită pentru text este 3. Sunt acceptate şi expresii de genul size=+1 (respectiv size=-1, size=-3 etc.).

În concluzie, putem controla cu uşurinţă modul în care este formatat textul de pe o pagină web. Însă, atributul font nu este foarte flexibil şi nu ne oferă prea multă libertate. Concret, nu putem stabili, de exemplu, distanţa dintre litere, dintre cuvinte, va trebui să folosim tag-ul de fiecare dată când introducem text în pagina web, iar atunci când ne hotărâm să schimbăm, de exemplu, culoarea textului, va trebui să modificăm fiecare tag în parte. Soluţia pentru formatarea complexă a conţinutului unei pagini web este folosirea foilor de stil - Cascading Style Sheets (CSS). Majoritatea designerilor web utilizează deja această tehnologie, care le uşurează simţitor munca. Există trei modalităţi de integrare a foilor de stil într-un sit:

1. Foaie de stil internă - atributele CSS sunt specificate direct în fişierul HTML astfel:
<html>
<head>
<style type="text/css"> ... </style>
</head>

2. Foaie de stil externă - toate atributele CSS sunt introduse într-un fişier separat cu extensia css (fisier.css) iar paginile HTML care va fi formatate cu ajutorul acestora vor include în head-ul lor următorul cod:
<link rel="stylesheet" href="fisier.css" type="text/css">

3. Foaie de stil în tag HTML - aceasta va fi folosită pe un singur tag HTML (de exemplu p):
<p style="atribut:valoare;"> ... </p>
Cele 3 modalităţi de integrare a foilor de stil pot fi combinate, în funcţie de necesităţi. Dacă le folosim pe toate într-o pagină web, cea mai înaltă prioritate o va avea foaia de stil în etichetă HTML, apoi foaia de stil internă şi în cele din urmă foaia de stil externă. Cea mai des utilizată metodă de integrare este foaia de stil externă, deoarece ne dă posibilitatea să controlăm dintr-un singur fişier modul în care apare textul într-un întreg sit.

Să vedem însă ce putem face concret cu aceste foi de stil. În general, tehnologia CSS ne permite să stabilim anumite atribute pentru fiecare tag HTML în parte sau, mai mult, pentru un grup de tag-uri HTML. De exemplu, toate titlurile (H1, H2, H3, H4, H5 şi H6) de pe situl nostru să aibă culoarea roşie şi corp de literă Arial.

Sintaxa CSS este foarte simplă:
Selector { atribut1: valoare; atribut2: valoare}
În exemplul nostru, declaraţia CSS va arăta în felul următor:
H1 {color: red; font-family: Arial} pentru titlurile din grupa H1 sau
H1, H2, H3, H4, H5, H6 {color: red; font-family: Arial} pentru toate titlurile.
În HTML nu va mai trebui să facem alte precizări, odată ce am integrat foaia de stil (internă sau externă). Aşadar, am stabilit un aspect implicit pentru toate titlurile de pe sit, respectiv pentru toate bucăţile de text cuprinse între tag-urile H1, H2, H3, H4, H5 şi H6.

Iată o altă problemă: cum procedăm dacă dorim ca anumite cuvinte din interiorul titlurilor, pe care noi le vom scrie îngroşat (între <b> şi </b>) să apară de culoarea neagră? În mod normal, ar fi trebuit să scriem de fiecare dată:
<H1>Acesta este un <font color="#000000"><b> titlu </b></font> </H1>

Cu ajutorul foilor de stil ajunge însă următoarea declaraţie:
H1 b { color: #000000 }
H1 b i { color: #000000 } va determina scrierea cu culoare neagră doar a acelor cuvinte care vor fi scrise italic şi vor fi incluse într-un bloc de text îngroşat, care la rândul său trebuie să facă parte dintr-un titlu H1:
<H1>Acesta este <b> text îngroşat iar <i> acesta este roşu </i>!</b></H1>
În concluzie, atunci când selectorii sunt despărţiţi prin virgulă, aceştia vor forma un grup cu aceleaşi proprietăţi. Dacă virgula lipseşte, proprietăţile se referă la cel din urmă selector, atunci când este inclus în selectorul care îl precede. Cele două modalităţi de grupare a selectorilor pot fi combinate:
H1 b, H1 i { color: #000000 } este echivalentul lui
H1 b { color: #000000 }
H1 i { color: #000000 }

De cele mai multe ori ne dorim ca numai unele elemente din cadrul unei pagini web să aibă anumite proprietăţi (de exemplu, numai anumite paragrafe să fie scrise roşu şi mai mic, numai anumite expresii să fie scoase în evidenţă prin utilizarea unui font diferit etc.) Pentru aceasta a fost introdusă în HTML eticheta class, care funcţionează astfel:

În foaia de stil vom scrie (de exemplu, vom crea o clasă numită "verde" care va scrie textul îngroşat şi cu culoare verde):

.verde { font-weight: bold; color: #00FF00}
Iar în HTML, atunci când apare un element care dorim să fie formatat ca atare (o expresie dintr-un paragraf, de exemplu), vom preciza:
<p> Acesta este un paragraf iar aceasta este o <span class="verde"> expresie "verde" </span> </p>
O clasă poate fi definită doar pentru un anumit tip de selector sau pentru un grup de selectori, astfel:
p.verde { font-weight: bold; color: #00FF00}
H1, H2.verde { font-weight: bold; color: #00FF00}

În primul caz, class="verde" va fi afişat doar de tag-urile de paragraf (p) iar în al doilea, doar de H1şi H2.
Combinând toate posibilităţile de precizare a unor elemente într-o foaie de stil, vă lăsăm să descoperiţi singuri asupra căror elemente dintr-o pagină web se va răsfrânge următoarea definiţie CSS:
H1, p i, p b span.verde, div.verde H2 {font-weight: bold; color: #00FF00}

Pe lângă atributul class mai poate fi folosit şi atributul ID pentru stabilirea unor elemente de foi de stil:
#abc { font-weight: bold; color: #00FF00}
H1#abc { font-weight: bold; color: #00FF00}
În HTML, aceste elemente vor fi apelate astfel:
<p id=abc> paragraf cu ID </p>

Până acum nu am acordat o importanţă prea mare atributelor şi valorilor CSS, ci am ales câteva exemple la întâmplare. Totuşi, ele sunt acelea care oferă în ultimă instanţă posibilitatea controlării precise a modului în care apare textul dintr-o pagină web pe ecranele vizitatorilor săi. Iată în continuare cele mai utile atribute folosite pentru formatarea textului, împreună cu valorile lor posibile.

• font-family - este echivalentul CSS al atributului HTML face folosit împreună cu tag-ul font.
  
• font-style - stabileşte modul în care este afişat fontul: normal, italic sau oblique.
  
• font-variant - fontul va fi scris normal sau cu litere "minuscule" (small-caps). Acestea sunt de fapt litere majuscule, însă mai mici.
  
• font-weight - defineşte grosimea caracterelor. Valorile posibile sunt: normal, bold, bolder şi lighter sau valorile numerice 100, 200, 300, 400, 500, 600, 700, 800 şi 900, unde 100 este cea mai subţire iar 900 cea mai groasă.
  
• font-size - precizează dimensiunea caracterelor. Există o serie de valori relative: xx-small, x-small, small, medium, large, x-large, xx-large, smaller şi larger. Atenţie, aceste valori vor fi interpretate în mod diferit de la browser la browser, însă cu siguranţă vor fi respectate anumite proporţii între ele. Putem folosi însă şi valori numerice. Unitatea de măsură poate fi pixeli (px), puncte (pt), inci (in), centimetri (cm), milimetri (mm), picas (pc), ems (em) sau procente (%). Valorile în pixeli, puncte, inci, centimetri milimetri şi picas sunt fixe, adică dimensiunea caracterelor va fi aceeaşi indiferent dacă utilizatorul şi-a setat browserul astfel încât să afişeze fonturile mai mari sau mai mici decât în mod normal. (În Intenet Explorer se bifează una din opţiunile pe care le găsim la View -> Text size iar in Netscape se alege increase respectiv decrease font tot din meniul View.) Dacă precizăm o valoare în procente sau ems, dimensiunea caracterelor va putea fi reglată de utilizator în funcţie de preferinţe, deoarece mărimea efectivă a fontului este relativă în aceste cazuri. Aici trebuie să menţionez că am văzut nenumărate situri cu caractere mult prea mici, chiar ilizibile. Vă sfătuiesc să folosiţi valori fixe de 12 - 13 pixeli sau 10 - 11 puncte iar dacă doriţi să lăsaţi mai multă libertate vizitatorilor (în special celor cu vederea mai slabă) atunci setaţi dimensiunea fonturilor la 0,8 - 1 em.
  
• word-spacing şi letter-spacing - permite controlul spaţiului dintre cuvinte, respectiv dintre literele unui cuvânt. Valorile sunt numerice, ca şi în cazul lui font-size.
  
• text-decoration - ornează fonturile cu diverse efecte: underline (subliniere), overline (linie deasupra textului), line-through (tăierea textului cu o linie orizontală), blink (pâlpâire), none (nici un efect). De remarcat aici este faptul că none va elimina sublinierea implicită a linkurilor.
  
• text-indent - va deplasa prima linie a unui paragraf mai în interior. Dimensiunea acestuia va fi dată de o valoare numerică, la fel ca în cazul lui font-size.
  
• text-align - textul va fi aliniat la stânga (left), la dreapta (right), centrat (center) sau în bloc, atât la stânga cât şi la dreapta (justify).
  
• text-transform - permite scrierea cu majuscule a textului: capitalize (va fi scris cu majusculă doar prima literă din cuvânt), uppercase (toate caracterele vor fi transformate în majuscule), lowercase (toate caracterele vor fi transformate în minuscule), none (nici o modificare).
  
• line-height - stabileşte înălţimea liniei de text, indiferent de dimensiunea fontului. Valorile sunt aceleaşi, ca şi în cazul lui font-size.
  
• color - culoarea textului. Ca şi în HTML, puteţi folosi valori RGB, hexazecimale sau denumiri standard.
  
• background-color - culoarea fundalului pentru text.
  
• background-image - precizează o imagine care va apărea în fundalul liniei textului. Sintaxa este următoarea: margin-top, margin-bottom, margin-right, margin-left - stabilesc un spaţiu (deasupra, jos, la dreapta, la stânga) între text şi elementele care îl înconjoară. Dacă avem aceeaşi valoare, putem folosi doar atributul margin. Dimensiunea spaţiului poate fi relativă sau fixă, în funcţie de unitatea de măsură folosită.
  

Există şi alte atribute CSS pentru formatarea textului, iar o documentaţie detaliată în acest sens o puteţi găsi pe Internet la adresa www.w3.org/TR/REC-CSS1. După cum observaţi, foile de stil ne dau posibilitatea să stabilim până în cel mai mic detaliu modul în care va fi afişat textul pe ecran. Astfel, mulţi dintre noi suntem tentaţi să abuzăm de aceasta varietate de setări posibile şi să folosim cât mai multe dintre ele pe paginile noastre web. Totuşi, să ţinem cont de faptul că simplitatea lasă de cele mai multe ori o impresie mai bună decât abundenţa.

Iată câteva sfaturi concrete:

Culori
Dacă vă pricepeţi la combinarea culorilor, puteţi obţine efecte interesante şi deosebit de sugestive prin aplicarea de nuanţe diferite pe unele paragrafe sau doar pe unele cuvinte. (un exemplu: www.wpdfd.com). În cazul în care nu sunteţi sigur pe anumite combinaţii de culori, vă sugerez să le folosiţi cu măsură în formatarea textului, mai ales atunci când pagina web este împodobită cu diverse imagini. În general, alegeţi culori care să contrasteze cu fundalul (aici trebuie să menţionez că folosirea unor imagini oricât de artistice în fundal va îngreuna întotdeauna parcurgerea textului) şi nu uitaţi că un sit trebuie să păstreze o anumită unitate în design iar mai multe culori nu însemna neapărat şi o mai bună percepţie a mesajului vostru.

Dimensiuni
Textul de pe paginile web trebuie să fie în primul rând uşor lizibil. Aşa cum am mai spus, gândiţi-vă dacă vizitatorii vor putea efectiv să citească ceea ce scrie pe sit. În acest sens este indicată testarea sitului pe diverse browsere şi chiar pe diferite sisteme de operare. În general, folosiţi diferite dimensiuni pentru titluri, subtitluri şi text pentru a le delimita.

Fonturi
Alegerea unui tip de caracter potrivit este una din cele mai delicate probleme atunci când trebuie transmis un mesaj în scris. Din păcate (sau din fericire...) pe web folosirea diverselor fonturi este destul de limitată, deoarece, pentru a fi afişat corect de un browser, tipul respectiv de caracter trebuie să fie instalat pe sistemul utilizatorului. Există o serie de fonturi care sunt prezente pe majoritatea calculatoarelor şi pe care vi le recomand să le utilizaţi. Fonturile pot fi împărţite în mai multe categorii:

Fonturi serif - Acestea se caracterizează prin faptul că au mici liniuţe la extremităţile caracterelor. Binecunoscutul Times Roman face parte din această categorie. Numeroase teste au dovedit faptul că aceste fonturi sunt mai uşor de urmărit şi de aceea sunt folosite în majoritatea ziarelor şi revistelor. Pe web însă, nu au cunoscut o răspândire prea mare. Totuşi, este fontul implicit în Internet Explorer şi Netscape Navigator.

Fonturi sans serif - acestora le lipsesc liniuţele caracteristice fonturilor Serif, caracterele lor fiind rotunde şi netede. Majoritatea paginilor web le folosesc pentru că, pe ecranele monitoarelor, acestea par a fi mai uşor de citit. Cele mai răspândite sunt Arial, Verdana şi Helvetica. Trebuie menţionat faptul că Verdana este un font creat special pentru utilizarea pe Internet.

Fonturi monospaţiale - în mod normal, litera I - de exemplu - dintr-un font ocupă mai puţin loc decât litera P. În cazul acestei clase de fonturi, spaţiul ocupat de fiecare literă este acelaşi. Ele sunt folosite mai ales în titluri şi anteturi. Courier este un astfel de font.

Fonturi decorative - acesta sunt de obicei rodul unor artişti şi se caracterizează prin diverse efecte grafice deosebite. Mulţi designeri rămân impresionaţi de expresivitatea unor astfel de caractere, încât le folosesc din plin pe paginile web, mai ales pe butoane. De multe ori însă, acestea sunt foarte greu lizibile şi devin chiar obositoare. Iată câteva exemple: Avern şi Lhabia

Nu există o reţetă general valabilă despre ce tip de font să folosim atunci când dorim să exprimăm un anumit mesaj. Este evident însă, că o pagină web a unui pictor va avea alte tipuri de caractere decât cea a unei bănci. O convingere destul de larg răspândită spune că nu este bine să combinăm mai multe fonturi serif sau mai multe fonturi sans serif. Aşadar, dacă de exemplu folosim Times Roman pentru titluri sau comentarii, ar fi bine să folosim Verdana pentru corpul de text. Se subînţelege că prezenţa a mai mult de 2-3 tipuri de fonturi pe o pagină web devine o provocare pentru vizitator.

Fonturile, la fel ca şi culorile, transmit în mod subtil anumite stări.

În final, vă sfătuiesc să nu formataţi la întâmplare textul de pe paginile web. Folosiţi foile de stil.

Argumente precum incompatibilitatea cu diverse browsere (Internet Explorer 3) nu mai sunt valabile astăzi. Deja a apărut limbajul CSS2, mult îmbunătăţit faţă de versiunea 1, despre care am discutat aici, şi este în curs de implementare în principalele browsere. Şi încă un sfat: textul cursiv (italic) este greu de citit, aşa că folosiţi acest efect doar pe anumite cuvinte şi expresii, nu pe paragrafe sau pagini întregi.

Emanuel Baruch
emanuel@cubus.ro