Tutorial text SVG: adnotare text pe web

Cu HTML5 și CSS3, browserele web au dobândit o serie de tehnologii uimitoare: grafică 3D, socket-uri, fire și multe altele. Cu acestea, aplicațiile web pot accesa unele dintre cele mai sofisticate capabilități ale computerelor și sistemelor de operare pe care sunt utilizate. Browserul web oferă un ecosistem versatil robust pentru dezvoltarea aplicațiilor, ceea ce este evident din creșterea recentă a numeroaselor aplicații web puternice fără de care nu putem trăi. Cu toate acestea, ceva care încă lipsește este frumusețea adnotării și a decorului text HTML. Ce este decorarea textului? Subliniile ondulate, evidențierile puternice și baraturile ondulate sunt câteva dintre lucrurile pentru care browserele web nu oferă suport nativ. Acest lucru poate suna mai elaborat decât util, dar capacitatea dezvoltatorilor JavaScript de a produce aceste stiluri se poate dovedi utilă în aspecte precum resursele de e-learning și cititoarele de cărți electronice bazate pe web. În plus, acest lucru poate contribui la îmbunătățirea experienței utilizatorului în aplicațiile web care gravitează în jurul principiilor de design natural. Cel puțin, construirea unui astfel de instrument este distractivă și oferă o perspectivă asupra numeroaselor particularități ale unui browser web.

Dezvoltatorii au găsit multe soluții pentru limitarea browserului web. Multe dintre aceste soluții implică utilizarea CSS în moduri mai puțin intuitive, deoarece unii folosesc imagini în pseudoelementele „::after”. Acest lucru funcționează, dar menținerea multor imagini pentru fiecare pereche stil-culoare se dovedește adesea a fi dificilă. Acest articol aruncă o privire asupra anatomiei unei biblioteci JavaScript care încearcă să rezolve această problemă în mod elegant.

Biblioteca este open source și este disponibilă pe GitHub: Text Annotator

Prezentare generală

În timpul dezvoltării acestei biblioteci, s-a acordat o atenție deosebită asigurării compatibilității cu cele mai populare browsere web (inclusiv IE 9+). Cu toate acestea, spre deosebire de modul în care majoritatea rezolvă această problemă, biblioteca nu se bazează pe trucuri CSS în mod special obscure; sau mai rău, simboluri speciale Unicode. În schimb, folosește SVG pentru a obține decorațiuni de text mult mai bune și mai curate.

În mod fundamental, biblioteca implementează o „clasă” de adnotator care poate fi folosită pentru a crea automat elemente DIV, pentru a le poziționa sub textele care urmează să fie adnotate și pentru a le umple fundalul cu imagini SVG. Mai multe DIV-uri pot fi combinate pentru a personaliza în continuare decorațiunile. Abordarea este compatibilă între browsere, oferă flexibilitate asupra poziționării elementelor decorative și permite o extensie mai ușoară cu șabloane personalizate.

Biblioteca a fost dezvoltată folosind instrumentele de închidere Google, deoarece este modulară și între browsere, ceea ce ajută la producerea unui cod JavaScript compact și rapid, fără nicio dependență suplimentară.

Arhitectură

Biblioteca a fost concepută ca o colecție de „clase” JavaScript și expune utilizatorului toate funcționalitățile necesare prin adnotatorul „clasă”:

Iată o scurtă prezentare a funcționalităților disponibile:

• annotateDocument - adnotă elemente, care sunt marcate cu un atribut „data-annotate”.

• subliniere - element de subliniere

• highlight - evidențiază element

• grevă - element de grevă

• underlineSelected - subliniază textul selectat

• highlightSelected - evidențiază textul selectat

• strikeSelected - lovește textul selectat

• unannotateElement - elimină adnotarea din element

• getTemplates - returnează dicționarul de șabloane de adnotări

• setUnderlineOptions - setează setările pentru adnotatorul de subliniere

• setHighlightOptions - setează setările pentru adnotatorul de evidențiere

• setStrikeOptions - setează setările pentru adnotatorul de avertizare

Clasa de adnotare deține trei instanțe ale clasei AnnotatorImpl pentru fiecare funcție de adnotare: subliniere, evidențiere și lovitură.

 tvs.Annotator = function() { this.underliner_ = new tvs.AnnotatorImpl( 'underliner', tvs.Annotator.getTemplates(), tvs.AnnotatorCore.underlinePositioner); this.highlighter_ = new tvs.AnnotatorImpl( 'highlighter', tvs.Annotator.getTemplates(), tvs.AnnotatorCore.highlightPositioner, {opacity: 0.45}); this.striker_ = new tvs.AnnotatorImpl( 'striker', tvs.Annotator.getTemplates(), tvs.AnnotatorCore.strikePositioner); };

Instanțele AnnotatorImpl sunt create cu diferite ID-uri și obiecte de ajutor de poziționare. ID-urile transmise sunt folosite mai târziu în numele claselor CSS și în numele câmpurilor interne, necesitând ca ID-urile să fie unice. De asemenea, se transmite o referință la o listă de șabloane cunoscute (poate fi modificată ulterior).

Fiecare obiect de poziționare este o implementare a interfeței IPosioner care are doar metoda „getPosition” și arată după cum urmează:

 /** * Underline positioner * @implements {tvs.IPositioner} */ tvs.AnnotatorCore.underlinePositioner = /** @type {!tvs.IPositioner} */ ({ /** * @param {Object} elementRect * @param {number} annotationHeight * @return {{left: number, top: number, width: number, height: number}} */ getPosition: function(elementRect, annotationHeight) { return { width: elementRect.width, height: annotationHeight, left: elementRect.left, top: elementRect.bottom - (elementRect.height * 0.1) }; } });

Acest lucru permite fiecărui șablon să fie utilizat cu subliniere, evidențiere sau adnotare text. Când o adnotare este aplicată unui element, caseta de delimitare pentru element este obținută prin apelarea „getElementRects” după cum se arată mai jos:

 var rects = elemOrEv.getClientRects();

Această metodă returnează o colecție de dreptunghiuri care indică dreptunghiurile de delimitare pentru fiecare casetă dintr-un client. După ce trecem fiecare rect la poziționer de beton, vom obține limitele destinației.

Șabloane de adnotare text SVG

După cum am menționat anterior, există un singur set de șabloane care sunt utilizate pentru toate tipurile de adnotări text SVG. Fiecare șablon este format din părți de șablon. O parte șablon este o entitate care reprezintă conținutul părții, lățimea șablonului și modul de desen.

Conţinut

Conținutul este un set de elemente SVG reprezentate ca șir. Deoarece acest conținut nu are un nod SVG rădăcină unde sunt setate lățimea și înălțimea ferestrei de vizualizare (în pixeli), constructorul părții șablonului le acceptă ca parametri. De exemplu, puteți specifica dimensiunea unei ferestre de vizualizare ca 100px x 100px și puteți trage o linie la (50, 50) și (25, 25). După ce adnotarea este aplicată, toate elementele svg vor fi dimensionate corespunzător la dimensiunea dorită. Valoarea conținutului poate folosi șirul „{0}” care va fi înlocuit cu culoarea selectată de utilizator.

Următorul SVG redă o linie diagonală. Vom folosi aceasta ca una dintre părțile unui exemplu de stil de adnotare care urmează în scurt timp:

 <line x1="0" y1="0" x2="5" y2="5" stroke-width="2" stroke="red" />

Lăţime

Lățimea șablonului este un șir care poate fi „*”, „înălțime” sau orice altceva:

• „*” stabilește lățimea tuturor elementelor cu o stea egală între ele

• „înălțimea” setează lățimea egală cu înălțimea elementului de adnotare

Orice altceva setat aici va fi setat direct la proprietățile de lățime CSS și lățime minimă.

Modul Draw

Modul Draw este un șir care poate fi fie „repetat”, fie „întindere”. După cum indică valorile, setarea la „repetare” va repeta conținutul, în timp ce setarea la „întindere” va întinde conținutul.

Iată un exemplu de ceea ce putem realiza prin configurarea acestor trei parametri:

Adnotarea textului din exemplul de mai sus conține 4 părți. Prima parte fiind linia diagonală, cu lățimea șablonului setată la „înălțime” și modul de desen setat la „repetare”. A doua parte are lățimea șablonului setată la „*” și modul de desen setat la „repetare”. A treia parte este setată să aibă o lățime de „15 px” și să fie desenată în modul „repetare”. În cele din urmă, lățimea ultimei părți este setată la „*”, iar modul său de desen este setat la „întindere”.

Când sunt evaluate aceste lățimi, prima parte are 5 pixeli (egale cu înălțimea elementului de adnotare), a treia parte are 15 pixeli (așa cum se stabilește), iar spațiul rămas este împărțit în mod egal între a doua și a patra parte.

Când aceeași bucată de text este evidențiată folosind același șablon, iată ce obținem:

După cum vă puteți da seama, înălțimea elementului de adnotare este mai mare, la fel și lățimea primei părți (deoarece lățimea șablonului pentru acea parte este setată la „înălțime”). Desigur, lățimea celei de-a treia părți a rămas neschimbată față de exemplul anterior.

Aplicarea unui efect de eliminare aceluiași text cu același șablon produce un rezultat foarte asemănător cu primul. Singura diferență este locația în care sunt poziționate elementele de adnotare:

Chiar dacă aceste adnotări de text par complexe (cum arată, având patru părți distincte), toate folosesc elemente SVG foarte simple. Ca exemplu suplimentar, realizarea unei linii ondulate necesită o singură parte, cu următorul conținut SVG simplu:

 var t = new tvs.Template(new tvs.SvgTemplatePart( '<line y2="16.00" x2="20" y1="4.00" ' + 'x1="10" stroke-linecap="round" ' + 'stroke-width="5" stroke="{0}" fill="none"/>' + '<line y2="4.00" x2="10" y1="16.00" ' + 'x1="0" stroke-linecap="round" ' + 'stroke-width="5" stroke="{0}" fill="none"/>', 20, 20, 'repeat' ))

Când aceste șabloane sunt evaluate, conținutul este redimensionat și „{0}” este înlocuit automat cu culoarea specificată. Mai mult, adăugarea de noi șabloane este la fel de simplă ca și adăugarea lor la un obiect JavaScript:

 tvs.AnnotatorDictionary.svgTemplates['brush'] = new tvs.Template(new tvs.SvgTemplatePart( svgContent, 50, 50, '*', 'stretch' ));

Rezultate

Fiecare adnotare este aplicată prin adăugarea unui element div cu poziționare absolută pe pagină:

 <div class="tvs-annotate-element"> <div class="tvs-wrap-div"> <table> <tr> <td></td> <td></td> <td></td> </tr> </table> </div> </div>

Elementul div este populat cu un tabel în care fiecare celulă adăugată corespunde uneia dintre părțile din șablon. Conținutul fiecărei părți de șablon este adăugat ca URI de date codificate Base64, cu culoarea selectată aplicată:

 tvs.SvgTemplatePart.prototype.getBackground = function(color) { var image = tvs.AnnotatorCore.formatString(this.content, [color]); var encodedSVG = goog.crypt.base64.encodeString(image); return 'data:image/svg+xml;base64,' + encodedSVG; };

Încorporarea

Pentru o experiență mai bună a utilizatorului, mai ales atunci când încercați să utilizați această bibliotecă JavaScript cu zone de conținut editabile, este important ca Text Annotator să cunoască limitele textului selectat în prezent de utilizator. Rangy, o bibliotecă JavaScript îngrijită care se ocupă cu gama și selecția, a fost folosită pentru a realiza acest lucru într-un mod între browsere. Rangy oferă un API simplu bazat pe standarde pentru a efectua sarcini comune DOM Range și Selection în toate browserele majore, eliminând implementările extrem de diferite ale acestei funcționalități între Internet Explorer și browserele compatibile cu DOM. Este singura dependență a proiectului.

Odată ce Text Annotator este încorporat, folosirea lui este o faptă foarte simplă:

 var annotator = new tvs.Annotator(); annotator.underlineSelected();

Fiecare element adnotat este marcat cu clasa „tvs-annotated-text” și fiecare element de adnotare are clasa „tvs-annotate-element”. Eliminarea adnotărilor este și mai simplă, o singură linie:

 annotator.unannotateElement(annotatedElement);

ciudatenii

Când fereastra este redimensionată, elementele se pot deplasa, necesitând ca elementele adnotate să fie „împrospătate”. Aceasta se ocupă de bibliotecă. In orice caz; pentru a reduce impactul asupra performanței, apelul la reîmprospătarea adnotărilor este accelerat:

 tvs.AnnotatorImpl = function(id, templates, positioner, options) { // ... this.throttle = new goog.Throttle(goog.bind(this.refreshAllAnnotations, this), 50); tvs.AnnotatorCore.registerForWindowResize( this.id,goog.bind(this.throttle.fire, this.throttle)); }; tvs.AnnotatorImpl.prototype.refreshAllAnnotations = function() { var elems = goog.dom.getElementsByClass(this.getCssClassForAnnotated()); var refFunc = goog.bind(this.refreshAnnotation, this); goog.array.forEach(elems, refFunc); };

La reîmprospătare, elementele de adnotare pot fi adăugate, redimensionate sau eliminate din pagină după cum este necesar.

Comoditate

Pentru a facilita adnotarea textului static pe o pagină, un atribut de date simplu pe elementul container este tot ce aveți nevoie:

 data-annotate='underline squiggly green'

Aceasta va adnota conținutul elementului cu o subliniere verde ondulată.

Concluzie

Ce pot să spun mai mult despre acest tutorial de text SVG? Un instrument distractiv, dar puternic, a fost implementat cu ușurință. Nu cred că am beneficia prea mult prin asigurarea suportului pentru Internet Explorer 8, deoarece în schimb am putea ajunge să complicăm întreaga implementare. Cu toate acestea, cu unele îmbunătățiri și puțină muncă asupra nucleului, putem extinde biblioteca pentru a putea produce chenare decorative pentru elemente non-textuale. În plus, poate fi o sarcină interesantă implementarea unui mecanism pentru a salva și mai târziu a restabili starea conținutului editabil al unei adnotări.

Deocamdată, posibilitățile sunt limitate doar de imaginația ta (și de capacitățile browserului). Poate doriți linii de microprint, sau degrade, sau chiar animații. Cu Text Annotator, puteți.