Paragraful Perfect

Istoric
* Elementul paragraf face parte din cele 20 de etichete initiale despre care vorbea Tim-Berners Lee in "HTML Tags". * Paragraful, ca unitate semantica, are o importanta considerabila in contextul dezvoltarii HTML 5.

Ce este paragraful perfect ?

* In mod ideal, un paragraf trebuie sa creeze o buna impresie vizuala, fara a distrage atentia de la textul in sine.

Definirea paragrafului
Familia de Fonturi ( type-face )
* O regula de bun simt, dar nu incontestabila, este folosirea familiilor de fonturi sans-serif pentru corpul de text. * Este posibil ca familiile de fonturi serif sa fie mai putin lizibile la dimensiuni mici, din cauza complexitatii lor, dar sunt si alti factori de luat in considerare ( x-height ). * Georgia este o familie de fonturi serif optimizata pentru lectura pe ecran. * In alegerea unui font pentru web ( @font-face font ) primeaza diversitatea gamei oferite de familia de fonturi. Este de preferat astfel sa evitam optiuni precum font-style: bold si sa folosim fontul corespunzator din familie. * Pentru a realiza acest lucru, trebuie sa declaram fonturile folosite folosind declaratia @fontface. Astfel, daca vrem ca atunci cand folosim proprietatea font-style: italic pentru familia de fonturi Georgia sa fie apelat fontul Georgia_Italic.ttf si sa evitam simpla modificare a fontului de baza, vom declara aceste fonturi cu @font-face: @font-face { font-family: 'Georgia'; src: url('Georgia.ttf') format('truetype'); /* Fontul "obisnuit"

*/ font-style: normal; resursa. */ font-weight: normal; } @font-face { font-family: 'Georgia'; /* Trebuie sa fie acelasi nume de familie ca si in blocul de mai sus. */ src: url('Georgia_Italic.ttf') format('truetype'); font-style: italic; */ font-weight: normal; } body { font-family:'Georgia', Verdana, serif; rezerva. */ } em { font-style: italic; /* Daca @font-face este suportat, fontul web cursiv este folosit. Daca nu, stilul cursiv Georgia este preluat din calculatorul utilizatorului. Oricum, un font Georgia, distorsionat pentru a aparea aldin, nu este permis. */ } /* Ofera un font de /* ... Nu este un font cursiv-aldin */ /* Asociaza valoarea italic cu aceasta resursa /* La fel pentru ingrosarea fontului. */ /* Asociaza valoarea normal cu aceasta

* Fonturile incorporate sunt frecvent folosite pentru titlurile paginii, in timp ce pentru corpul paginii sunt utilizate fonturile de sistem, cum ar fi Verdana. Unul din avantajele acestui font este faptul ca arata bine si la dimensiuni mic, datorita reconfigurarii inteligente a pixelilor, prin "delta hinting".

Marimea Fontului Si Masura

* Folosirea unui font de 16 px pentru paragraf este un standard de facto pe web. * Valoarea de 16px este definita ca reprezentand 100%, prin includerea in blocul declaratiei body.

* Daca folosim o valoare procentuala raportata la cea de baza, trebuie sa ne asiguram ca aceasta va reprezenta o valoare intreaga si nu una cu virgula. Astfel, pentru un font de baza de 16px, un font de 18px va fi exprimat procentual prin valoarea de 112.5%. Vom preveni in acest mod diferentele existente intre navigatoare in ceea ce priveste rotunjirea valorilor pixelilor. * Normalizarea marimii implicite a fontului faciliteaza valorilor exprimate in em. Daca dorim sa redam textul din elementul h3 la o marime de 1.5 din cea a fontului de paragraf, vom folosi o valoare de 1.5em.

Spatiile intre linii

* Pentru controlul distantei dintre linii se foloseste proprietatea CSS line-height. * Prin line-height se controleaza inaltimea intregii linii, atat a textului, cat si a spatiului care ii urmeaza. * O inaltime a liniei de 1.5 ori mai mare in raport cu dimensiunea fontului va fi suficienta: p { font-size: ; /* Implicit 1em line-height: 1.5; /* Aceasta proprietate accepta si valori exclusiv numerice */ } * Din nou, este foarte important ca inaltimea liniei sa fie exprimata in valori intregi. * Toate componente dintr-o pagina ar trebui sa aiba o valoare inaltimii divizibila cu valoarea inaltimii liniei unui paragraf.

Spatierea cuvintelor si justificarea

* Alinierea textului se face cu text-align: justify. * Pentru a controla mai bine acest tip de aliniere, este disponibila si proprietatea textjustify - ofera o solutie pentru problema despartirii in silabe la sfarsit de rand.

Tuse De Final
* Paragrafele separate de o margine ( margin: 0 0 1.5em; ) nu mai au nevoie de indentare.

* Folosind selectori adiacenti, putem aplica o proprietate CSS doar pentru anumite elemente: p + p { text-indent: 1.5em; /* Indentarea nu se aplica la primul paragraf */ } * Putem folosi selectori adiacenti pentru a evidentia glifa din primul paragraf: h1 + p:first-letter { font-size: 2em; line-height: 0; /*Inaltimea liniei trebuie ajustata pentru a compensa dimensiunea augmentata a fontului, altfel intreaga linie va fi afectata. */ } * Rafinamentul acestor modificari consta in faptul ca sunt aplicate semantic si contextual.