HTML5 ja CSS3 abil omandasid veebibrauserid hulga hämmastavaid tehnoloogiaid: 3D graafika , pistikupesad, niidid ja palju muud. Nende abil saavad veebirakendused kasutada arvutite ja opsüsteemide kõige keerukamaid võimalusi, milles neid kasutatakse. Veebibrauser pakub a jõuline mitmekülgne ökosüsteem rakenduste arendamiseks, mis ilmneb hiljuti tõusnud arvukatest võimsatest veebirakendustest, ilma milleta me ei saa elada. Kuid midagi, mis veel puudu on, on HTML-teksti märkuste ja kaunistuste ilu. Mis on teksti kaunistamine? Säravad allajoonimised, vastupidavad esiletõstmised ja lainelised kriipsutamised on mõned asjad, millele veebibrauserid ei toeta kohalikku tuge. See võib tunduda keerukam kui kasulik, kuid võime selleks JavaScripti arendajad nende stiilide loomine võib osutuda kasulikuks näiteks e-õppe ressursside ja veebipõhiste e-raamatute lugejate osas. Pealegi võib see aidata kaasa loomuliku disaini põhimõtete ümber pööratavate veebirakenduste kasutuskogemuse parandamisele. Sellise tööriista loomine on vähemalt lõbus ja annab ülevaate veebibrauseri paljudest veidrustest.

Arendajad on leidnud palju veebibrauseri piirangute lahendusi. Paljud neist lahendustest hõlmavad CSS-i kasutamist vähem intuitiivsetel viisidel, kuna mõned kasutavad pilte pseudoelementides „pärast”. See töötab, kuid paljude stiilide ja värvipaaride jaoks paljude piltide säilitamine osutub sageli keeruliseks. Selles artiklis heidetakse pilk JavaScripti teegi anatoomiale, mis püüab selle probleemi elegantselt lahendada.

kuidas pääseda Bloombergi terminali

Raamatukogu on avatud lähtekoodiga ja see on saadaval veebisaidil GitHub: Tekstiannotaator

Ülevaade

Selle teegi arendamisel pöörati erilist tähelepanu ühilduvuse tagamisele kõige populaarsemate veebibrauseritega (sh IE 9+). Kuid erinevalt sellest, kuidas enamik seda probleemi lahendab, ei looda raamatukogu spetsiaalselt varjatud CSS-i trikkidele; või veel hullem, eriline Unicode'i sümbolid . Selle asemel kasutab see SVG-d palju paremate ja puhtamate tekstikaunistuste saavutamiseks.

Põhimõtteliselt rakendab raamatukogu Annotatori „klassi”, mille abil saab automaatselt luua DIV-elemente, paigutada need kommenteeritavate tekstide alla ja täita nende taustad SVG-piltidega. Kaunistuste edasiseks kohandamiseks saab kombineerida mitu DIV-i. Lähenemisviis ühildub brauseritega, pakub paindlikkust dekoratiivsete elementide positsioneerimisel ja võimaldab hõlpsamat laiendamist kohandatud mallidega.

Teek on välja töötatud Google Closure Tools'i abil, kuna see on modulaarne ja brauseriteülene, mis aitab toota kompaktset ja kiiret JavaScripti koodi ilma igasuguse täiendava sõltuvuseta.

Arhitektuur

Teek on kujundatud JavaScripti „klasside“ kogumikuna ja see pakub klassi „Annotator“ kaudu kasutajale kõiki vajalikke funktsioone:

Siin on lühike ülevaade saadaolevatest funktsioonidest:

• annotateDocument - märgib elemente, mis on tähistatud atribuudiga “data-annotate”.

• allajoonimine - allajoonitud element

  
  
  

• esile - tõstab esile elemendi

• streik - lööb element

  
  
  

• underlineSelected - tõmbab valitud teksti alla

  kõrgetasemeline kujundusdokumendi mall

• highlightSelected - tõstab esile valitud teksti

• strikeSelected - märgib valitud teksti

• unannotateElement - eemaldab märkuse elemendist

• getTemplates - tagastab märkimismallide sõnastiku

• setUnderlineOptions - määrab allajoonimise märkija seaded

• setHighlightOptions - määrab esiletõstu märkija seaded

• setStrikeOptions - määrab streigi märkija seaded

Annotatoriklassis on iga märkimisfunktsiooni jaoks kolm klassi AnnotatorImpl eksemplari: allajoonimine, esiletõstmine ja streik.

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); };

AnnotatorImpli eksemplarid luuakse erinevate ID-de ja positsioneerimisabiliste objektidega. Edastatud ID-sid kasutatakse hiljem CSS-i klasside ja siseväljade nimedes, nõudes, et ID-d oleksid kordumatud. Samuti edastatakse viide teadaolevate mallide loendile (seda saab hiljem muuta).

Iga positsioneerimisobjekt on IPositioneri liidese rakendus, millel on ainult meetod 'getPosition' ja mis näeb välja järgmine:

õppige c pärast c++

/** * 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) }; } });

See võimaldab kõiki malle kasutada allajoonitud, esiletõstetud või kriipsutatud teksti märkustega. Kui elemendile rakendatakse märkust, saadakse elemendi piirikast, helistades allpool näidatule „getElementRects”:

var rects = elemOrEv.getClientRects();

See meetod tagastab ristkülikute kogu, mis tähistab kliendi iga kasti piiravaid ristkülikuid. Pärast iga sirge betoonpositsioneerimisse jõudmist saame sihtpiirid.

SVG tekstimärkuste mallid

Nagu eelnevalt mainitud, on ainult üks mallide komplekt, mida kasutatakse igasuguste SVG tekstimärkuste jaoks. Iga mall koosneb malli osadest. Malliosa on üksus, mis tähistab osa sisu, malli laiust ja joonistamisrežiimi.

Sisu

Sisu on stringidena kujutatud SVG elementide kogum. Kuna sellel sisul pole SVG-juurte sõlme, kus on seatud vaateava laius ja kõrgus (pikslites), aktsepteerib malli osa konstruktor neid parameetritena. Näiteks saate määrata vaateava suuruseks 100 x 100 pikslit ja tõmmata joonele (50, 50) ja (25, 25). Pärast märkuse rakendamist muudetakse kõik svg elemendid õigesti soovitud suuruseks. Sisu väärtus võib kasutada stringi “{0}”, mis asendatakse kasutaja valitud värviga.

Järgmine SVG renderdab diagonaaljoont. Kasutame seda varsti märkuste näidisstiili ühe osana:

var t = new tvs.Template(new tvs.SvgTemplatePart( '' + '', 20, 20, 'repeat' ))

Laius

Malli laius on string, mis võib olla „*”, „kõrgus” või midagi muud:

• “*” Määrab kõigi tärniga elementide laiuse üksteisega võrdseks

• „Kõrgus“ määrab märkimiselemendi kõrgusega võrdse laiuse

Kõik muu siin seatud määratakse otse CSS-i laiuse ja min-laiuse omadustele.

Joonistamisrežiim

Joonistusrežiim on string, mis võib olla kas korduv või veniv. Nagu väärtused näitavad, määrates selle „kordamiseks”, korratakse sisu, samas kui „venitada” määratakse sisu.

Projektianalüüsi kõige kriitilisem samm on:

Siin on näide sellest, mida saame saavutada nende kolme parameetri konfigureerimisega:

Ülaltoodud näite tekstimärkus sisaldab 4 osa. Esimene osa on diagonaaljoon, malli laiuseks on seatud „kõrgus” ja joonistusrežiimiks on seatud „kordus”. Teise osa malli laiuseks on seatud “*” ja joonistusrežiimiks on “kordamine”. Kolmas osa on seatud laiuseks 15 pikslit ja see joonistatakse režiimis „kordus”. Lõpuks seatakse viimase osa laiuseks „*” ja joonistamisrežiimiks „venitamine”.

Nende laiuste hindamisel võtab esimene osa 5 pikslit (võrdne annotatsioonielemendi kõrgusega), kolmas osa võtab 15 pikslit (vastavalt komplektile) ning ülejäänud ruum jaguneb võrdselt teise ja neljanda osa vahel.

Kui sama tekstitükk on sama malli abil esile tõstetud, saame selle:

Nagu võite öelda, on märkimiselemendi kõrgus suurem ja ka esimese osa laius (kuna selle osa malli laiuseks on seatud „kõrgus”). Loomulikult jäi kolmanda osa laius eelmise näitega võrreldes samaks.

Kriipsutava efekti rakendamine samale tekstile sama malliga annab esimesega väga sarnase tulemuse. Ainus erinevus on märkimise elementide asukoht:

Kuigi need tekstimärkused tunduvad keerulised (nende välimus on nelja erineva osaga), kasutavad nad kõik väga lihtsaid SVG elemente. Täiendava näitena nõuab keeruka rea ​​tegemine ühte osa järgmise lihtsa SVG-sisuga:

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

Nende mallide hindamisel muudetakse sisu suurust ja „{0}” asendatakse määratud värviga automaatselt. Veelgi enam, uute mallide lisamine on sama lihtne kui nende lisamine JavaScripti objektile:

kuidas õppida robootika programmeerimist

Tulemused

Iga märkust rakendatakse, lisades lehele absoluutse positsioneerimisega div-elemendi:

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; };

Element div täidetakse tabeliga, kus iga lisatud lahter vastab ühele malli osast. Iga malliosa sisu lisatakse Base64 kodeeritud andmete URI-na, rakendades valitud värvi:

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

Põimimine

Parema kasutuskogemuse saamiseks, eriti kui proovite seda JavaScripti teeki kasutada muudetavate sisualadega, on tekstiannotaatoril oluline teada kasutaja poolt valitud teksti piire. Rangy , selle valiku ja valikuga tegelevat JavaScripti teeki on kasutatud selle saavutamiseks brauseriteüleselt. Rangy pakub lihtsat standardipõhist API-d tavaliste DOM-i vahemiku ja valiku ülesannete täitmiseks kõigis suuremates brauserites, eemaldades selle funktsiooni tohutult erinevad rakendused Internet Exploreri kuni DOM-iga ühilduvate brauserite vahel. See on projekti ainus sõltuvus.

Kui tekstiannotaator on manustatud, on selle kasutamine väga lihtne saavutus:

annotator.unannotateElement(annotatedElement);

Iga kommenteeritud element on tähistatud klassiga „tvs-annotated-text” ja igal märkimiselemendil on klass „tvs-annotate-element”. Anotatsioonide eemaldamine on veelgi lihtsam, ühe voodriga:

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); };

Veidrused

Kui akna suurust muudetakse, võivad elemendid ringi liikuda, nõudes märkustega elementide värskendamist. Sellega tegeleb raamatukogu. Kuid; jõudlusele avaldatava mõju vähendamiseks on üleskutse värskendavatele märkustele piiratud:

data-annotate='underline squiggly green'

Värskendamisel võidakse lehele lisada märkuse elemente, muuta nende suurust või need vastavalt vajadusele eemaldada.

Mugavus

Lehe staatilise teksti märkmete lisamise hõlbustamiseks on vaja vaid konteinerelemendi lihtsat andmeatribuuti:

|_+_|

See märgib elemendi sisu rohelise kriipsuga allajoonituna.

Järeldus

Mida veel selle SVG tekstiõpetuse kohta öelda? Lõbus, kuid võimas tööriist on hõlpsasti rakendatud. Ma ei usu, et me saaksime Internet Explorer 8 toe tagamisest palju kasu, sest see võib hoopis kogu rakenduse keerulisemaks muuta. Mõningate täiustuste ja südamiku vähese tööga saame siiski laiendada raamatukogu, et oleks võimalik toota dekoratiivseid piire mittetekstiliste elementide jaoks. Pealegi võib olla huvitav ülesanne rakendada mõnda mehhanismi märkuse muudetava sisu salvestamiseks ja hiljem selle taastamiseks.

Nagu praegu, piirab võimalusi ainult teie kujutlusvõime (ja brauseri võimalused). Võib-olla soovite mikroprindijooni, gradiente või isegi animatsioone. Koos Tekstiannotaator , sa saad.