Texte ca PNG în pagini web


Iniţial când am văzut Text2PNG.com m-am gândit: iată încă un moft pentru webmasteri. Ideea este simplă: introduci un script (de fapt îl "apelezi" cu include) şi apoi indici ce taguri sau elemente din pagina web să fie transformate din text în imagini PNG. Ar putea fi util pentru headline-uri. Dar le poţi face şi singur. Şi atunci? Desigur, dacă e vorba de multe headline-uri sau care sunt luate automat dintr-o bază de date – să zicem – atunci o metodă automată precum cea propusă de Text2PNG merită luată în considerare.

img101

După prima mirare (neîncredere) am parcurs puţin textul şi am început să mă luminez. Nu doar că poţi transforma un titlu din text în imagine, dar acea imagine poate conţine textul cu fonturi diferite (astfel ai garanţia că la fel îl vede oricine, că are sau nu instalat local fontul) şi, mai mult, textului i se poate aplice rotaţii precum şi umbre! Wow… acum mai vii de acasă. Dar una caldă, una rece. Testele aproape că mi-au scos peri albi datorită documentaţiei care îşi cam dă cu stângul în dreptul şi funcţionării… aproximative. Una din două: sau îmi scapă mie nişte lucruri (pornesc de la premisa că pot greşi) sau Text2PNG nu este încă un produs matur. Forumul e cam nepopulat aşa că înclin să cred că produsul e încă tinerel. Dar după mine merită atenţia.

Recapitulând: pentru a folosi Text2PNG trebuie în secţiunea head să puneţi liniile următoare:

<script type="text/javascript" language="javascript" src="http://www.text2png.com/text_script.js">
<script type="text/javascript" language="javascript">
	text2png.onLoad = function(){
        // una dintre cele trei moduri de apelare
    };
</script>

Acolo unde am pus comentariul Dvs va trebui să puneţi una sau mai multe linii care indică ce elemente din pagina web să fie afectate de transformarea în PNG. Puteţi să indicaţi un element după id-ul lui, sau un tag, varianta a treia fiind utilă pentru elemente imbricate, când doriţi să specificaţi "copiii" unui element tată (parent).

text2png.replace(element id [, element id [, element id ... [, options]]]); 
text2png.replaceTags(tag name [, tag name [, tag name ... [, options]]]); 
text2png.replaceAll(element id [, element id [, element id ... [, options]]]); 

Situl pune la dispoziţie câteva exemple, cam prea simpluţe. Eu am încercat să combin mai multe lucruri într-o pagină la care puteţi să îi studiaţi sursa. Acolo veţi vedea că am folosit şi opţiunile (options) ce permit umbre, rotiri şi altele… Mai jos vedeţi pagina de test inclusă cu iframe. Pentru a-i studia sursa deschideţi-o separat dând click aici.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

1 comentariu

  1. lucian spune:

    E interesanta ideea, dar nu aplicabila pe scara larga datorita motoarelor de cautare (nu-ti mai indexeaza textul ci imaginile).


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *