Tabelele cu textul vertical

Să aruncăm o privire la masa, prezentat mai jos. Nu vom îngropa în conținut - am luat primul disponibil, să acorde o atenție la proiectarea, în special în direcția textului în primele două coloane.

Tabelele cu textul vertical

În mod surprinzător, o astfel de formatare familiară și convenabil nu este tipic pentru web din cauza lipsei de sprijin adecvat. Odată cu apariția CSS3, va, dar acum, sunt create astfel de sprijin aceste tabele, de obicei prin intermediul unor imagini fără a utiliza în acest scop, etichetele de masă. Ei bine, să aștepte vremuri de lumină, dar ceea ce ne împiedică să experimenteze și să încerce să găsească o soluție acum?

Obiectiv :. Dana tablitsaneobhodimo că textul în celule cu clasa verticală atunci când sunt afișate într-un browser are direcția verticală „de jos în sus“

există o soluție numai CSS pentru Internet Explorer. Numai „greșit“ browser-ul, deoarece versiunea 5.5, parțial suporti în CSS3 pentru aceste scopuri scris-mode proprietate. Cuprins în IE în funcțiune și propietarnoe aspect-flux. dar nici de prima, nici a doua proprietate cu ajutorul mine și nu a reușit să stabilească textul în direcția corectă, „de jos în sus“. A fost necesar să se utilizeze filtre suplimentare și fliph flipv pentru rotire pe orizontală și pe verticală a textului. În cele din urmă am ajuns la următoarea descriere a clasei verticale:

Prin stabilirea acestor stiluri în Internet Explorer afișează textul în direcția corectă.

În căutarea soluției universale, în primul rând vine în minte este o idee evidentă: înlocuiți conținutul text pe grafic identic, dar rotit cu 90 de grade. De exemplu, textul «Hello World!» Poate fi înlocuit cu ceva de genul

Tabelele cu textul vertical
. sau „elemente celulare cheie de conținut“ - de către
Tabelele cu textul vertical
. Sarcina principală de a genera astfel de pseudo-text, în acest caz va fi pe partea de server, astfel încât este posibil să vorbim despre cross-browser.

Aceeași abordare poate fi pusă în aplicare și nivelul de client. Printre multele tehnici înlocui imagini de text, în cazul nostru putem aplica populare sIFR - înlocuiți filme de text flash sau să profite de capacitatea de a genera browsere web avansate, imaginea SVG. Ultima recepție am decis să arate ca exemplu decizia.

Dacă browserul dvs. acceptă SVG, atunci casetele text corespunzătoare vor fi afișate în mod corespunzător. Acest lucru sa întâmplat în Opera 9 și Gecko, de la versiunea 1.8. În Internet Explorer de înlocuire nu produce, deoarece acest ghid de web există o soluție simplă de mai sus-menționate, în plus față de afișare SVG în IE nevoie de externe de plug-in-uri, care sunt susceptibile de a fi fost stabilite de către utilizator.

Un exemplu de lucru poate fi văzut aici.

articole similare