Internet Explorer 6 a afișat pătrățele. Celelalte browsere au substituit fontul care nu conținea caracterele dorite cu alt font care conținea caracterele, dar această substituție se observă ușor și nu arată foarte bine.
În articolul „Browsere Moderne II” am folosit o altă abordare, am încercat să afișez pagina cu alte fonturi decât cele existente în sistemul de operare Windows XP.
Toate browserele (inclusiv Internet Explorer 6) au afișat corect paginile web. Dezavantajul la această abordare este gama foarte restrânsă de fonturi ce pot fi utilizate în acest fel și care să conțină diacriticele românești, la care se adaugă și timpul de descărcat fonturile de pe internet.
Se spune că a treia încercare este cu noroc, în acest articol voi prezenta o modalitate de afișare a paginilor web cu diacriticele corecte, având posibilitatea de a afișa diacriticele cu sedilă pe sistemele de operare fără fonturi actualizate.
Soluția este simplă, la încărcarea paginii se detectează dacă șirul "șȘțȚ" are aceeași lățime cu șirul "sStT", dacă au aceeași lățime nu se face nicio modificare a paginii, dacă nu atunci se înlocuiesc toate diacriticele cu virgulă cu diacriticele cu sedilă. Diferența de lățime vine de la faptul că șirul cu diacritice este înlocuit fie cu pătrățele (Internet Explorer 6), fie este substituit cu alt font (restul browserelor).
Această soluție funcționează pentru fonturile cu lățime variabilă, fonturile cu lățime fixă (ex. Courier New) nu pot fi folosite deoarece fiecare caracter are aceeași lățime.
Pentru ca o pagină web să poată folosi acest sistem de siguranță sunt necesari următorii pași:
- pagina web trebuie să fie codificată unicode utf-8
- diacriticele folosite trebuie să fie cu virgulă
- adăugarea unei singure linii de cod în secțiunea <head>, linia de cod indică calea la scriptul Javascript care face toată magia
Exemplu (aici diacriticele au fost trecute sub formă de cod hexazecimal):
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="diacritice.js"></script> </head> <body> <p>Muzicologă în bej, vând whisky și tequila, preț fix</p> </body> </html>
Pagină de test: http://goo.gl/AwMKY, codul sursă al paginii web, și al scriptului Javascript. Mai jos am pus capturi de ecran ale unui sistem Windows XP: fără script, cu script dar fără fonturi actualizate și cu script și cu fonturi actualizate:
Fără scriptul diacritice.js
|
 |
Cu scriptul diacritice.js dar fără fonturile actualizate
|
 |
Cu scriptul diacritice.js și fonturile actualizate
|
 |
<script type="text/javascript"> //<![CDATA[ ... //]]> </script>
Am testat cu sucess soluția pe următoarele browsere:
- Internet Explorer 6.0, 7.0, 8.0
- Mozilla Firefox 3.6.12
- Opera 10.53
- Apple Safari 5.02
- Google Chrome 7.0
P.S.
Am făcut o serie de teste și pe Ubuntu 10.10 Maverick Meerkat pe următoarele browsere:
- Mozilla Firefox 3.6.12
- Opera 10.53
- Google Chrome 7.0
Aceasta se datorează faptului că Google Chrome folosește fontul „Times New Roman” ca font implicit pe Linux, font care nu face parte dintr-o distribuție de Linux. Am raportat problema la Google aici - Issue 61366.
În atenția utilizatorilor care instalează pe Linux pachetul de fonturi corefonts pentru a avea o experiență asemănătoare cu cea oferită de sistemul de operare Windows.
Toate fonturile din pachetul corefonts nu conțin diacriticele corecte, fapt care va face din sistemul Linux (Ubuntu 10.10 este nou nouț la data scrierii acestui articol) un Windows 98 și soluția din acest articol va converti toate diacriticele cu virgulă în diacritice cu sedilă!
P.P.S.
Am actualizat scriptul pentru cazul în care avem de-a face cu fonturi care au parțial diacriticele corecte: ș cu virgulă, dar fără ț cu virgulă, dar ț-ul cu sedilă fiind implementat ca ț cu virgulă. În acest caz numai ț este schimbat în varianta cu sedilă.
Android folosește familia de fonturi Droid care intră în categoria de fonturi descrisă mai sus.
Droid nu este singura familie de fonturi care suferă de această „anomalie”, la Google Font Directory am mai întâlnit familiile de fonturi: GFS Didot, GFS Neohellenic, Josefin Sans Std Light și Reenie Beanie.
4 comments:
Testează fontul cu care este randat nodul pe care vrei să-l manipulezi, nu Verdana (sau cel folosit dacă nu are Verdana), așa cum faci în pagina test.
@altblue Am actualizat scriptul diacritice.js, acum folosesc fontul implicit din sistem și nu mai folosesc explicit Verdana.
Am testat pe Windows XP (cu și fără fonturi actualizate), Windows 7 și Ubuntu 10.10
Pe Ubuntu 10.10 Google Chrome 7 folosește ca font implicit "Times New Roman", fapt care este greșit pentru Ubuntu 10.10, am raportat problema aici: http://code.google.com/p/chromium/issues/detail?id=61366
Votați pentru rezolvarea ei!
Foarte bun articolul! Ma intereseaza problema folosirii diacriticelor. Daca nu aveti nimic impotriva, va voi contacta prin e-mail la un moment dat, sa va mai intreb cate ceva in legatura cu folosirea lor.
Îți mulțumim Cristian. Eu asta am înțeles dar pentru Android nu aș putea face nimic?
Am un HTC Desire HD care folosește sistemul de operare Android Froyo 2.2
Nu există nimic ce aș putea face?
Post a Comment