Με HTML5 και CSS3, τα προγράμματα περιήγησης ιστού απέκτησαν μια σειρά από εκπληκτικές τεχνολογίες: 3D γραφικά , πρίζες, κλωστές και άλλα. Με αυτά, οι εφαρμογές Ιστού μπορούν να αξιοποιήσουν μερικές από τις πιο εξελιγμένες δυνατότητες των υπολογιστών και των λειτουργικών συστημάτων στα οποία χρησιμοποιούνται. Το πρόγραμμα περιήγησης στο Web προσφέρει ένα στιβαρό ευέλικτο οικοσύστημα για την ανάπτυξη εφαρμογών, η οποία είναι εμφανής από την πρόσφατη άνοδο πολλών ισχυρών εφαρμογών Ιστού που δεν μπορούμε να ζήσουμε χωρίς. Ωστόσο, κάτι που εξακολουθεί να λείπει είναι η ομορφιά του σχολιασμού και της διακόσμησης κειμένου HTML. Τι είναι η διακόσμηση κειμένου; Οι υπογραμμίσεις Squiggly, οι ανθεκτικές επισημάνσεις και οι κυματιστές απεργίες είναι μερικά από τα πράγματα που τα προγράμματα περιήγησης ιστού δεν παρέχουν εγγενή υποστήριξη. Αυτό μπορεί να ακούγεται πιο περίπλοκο από το χρήσιμο, αλλά η δυνατότητα για Προγραμματιστές JavaScript Η παραγωγή αυτών των μορφών μπορεί να αποδειχθεί χρήσιμη σε πτυχές όπως οι πόροι e-learning και οι αναγνώστες ebook που βασίζονται στον Ιστό. Επιπλέον, αυτό μπορεί να συμβάλει στην ενίσχυση της εμπειρίας των χρηστών σε εφαρμογές Ιστού που περιστρέφονται γύρω από τις αρχές του φυσικού σχεδιασμού. Τουλάχιστον, η κατασκευή ενός τέτοιου εργαλείου είναι διασκεδαστική και παρέχει πληροφορίες για τις πολλές ιδιαιτερότητες ενός προγράμματος περιήγησης ιστού.
Οι προγραμματιστές έχουν βρει πολλές λύσεις στον περιορισμό του προγράμματος περιήγησης ιστού. Πολλές από αυτές τις λύσεις περιλαμβάνουν τη χρήση CSS με λιγότερο διαισθητικούς τρόπους, καθώς ορισμένοι χρησιμοποιούν εικόνες στα ψευδο στοιχεία «:: after». Αυτό λειτουργεί, αλλά η διατήρηση πολλών εικόνων για κάθε ζεύγος στυλ-χρώματος αποδεικνύεται συχνά δύσκολη. Αυτό το άρθρο ρίχνει μια ματιά στην ανατομία μιας βιβλιοθήκης JavaScript που προσπαθεί να λύσει αυτό το πρόβλημα κομψά.
τι χρώματα προκαλούν τι συναισθήματα
Η βιβλιοθήκη είναι ανοιχτού κώδικα και είναι διαθέσιμη στο GitHub: Σχολιασμός κειμένου
ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ
Κατά την ανάπτυξη αυτής της βιβλιοθήκης, δόθηκε ιδιαίτερη προσοχή στη διασφάλιση της συμβατότητας με τα πιο δημοφιλή προγράμματα περιήγησης ιστού (συμπεριλαμβανομένου του IE 9+). Ωστόσο, σε αντίθεση με τον τρόπο με τον οποίο οι περισσότεροι λύνουν αυτό το πρόβλημα, η βιβλιοθήκη δεν βασίζεται σε συγκεκριμένα σκοτεινά κόλπα CSS. ή χειρότερα, ειδικό Σύμβολα Unicode . Αντ 'αυτού, χρησιμοποιεί SVG για να επιτύχει πολύ καλύτερες, καθαρότερες διακοσμήσεις κειμένου.
Βασικά, η βιβλιοθήκη εφαρμόζει μια «κλάση» σχολιασμού που μπορεί να χρησιμοποιηθεί για τη δημιουργία αυτόματων στοιχείων DIV, την τοποθέτησή τους σε κείμενα που θα σχολιαστούν και τη συμπλήρωση του φόντου τους με εικόνες SVG. Πολλαπλές DIVs μπορούν να συνδυαστούν για να προσαρμόσουν περαιτέρω τις διακοσμήσεις. Η προσέγγιση είναι συμβατή μεταξύ προγραμμάτων περιήγησης, παρέχει ευελιξία στην τοποθέτηση διακοσμητικών στοιχείων και επιτρέπει ευκολότερη επέκταση με προσαρμοσμένα πρότυπα.
Η βιβλιοθήκη αναπτύχθηκε χρησιμοποιώντας το Google Closure Tools επειδή είναι αρθρωτό και cross-browser, το οποίο βοηθά στην παραγωγή συμπαγούς και γρήγορου κώδικα JavaScript χωρίς καμία επιπλέον εξάρτηση.
Αρχιτεκτονική
Η βιβλιοθήκη έχει σχεδιαστεί ως μια συλλογή 'τάξεων' JavaScript και εκθέτει όλες τις απαραίτητες λειτουργίες στον χρήστη μέσω του σχολιασμού 'τάξης':
Ακολουθεί μια σύντομη περιγραφή των διαθέσιμων λειτουργιών:
-
annotateDocument - σχολιάζει στοιχεία, τα οποία επισημαίνονται με το χαρακτηριστικό 'data-annotate'.
-
υπογραμμίζει - υπογραμμίζει στοιχείο
-
highlight - επισημαίνει το στοιχείο
-
στοιχείο απεργίας - απεργιών
-
underlineSelected - υπογραμμίζει το επιλεγμένο κείμενο
-
highlightSelected - επισημαίνει επιλεγμένο κείμενο
-
strikeSelected - απεργίες επιλεγμένο κείμενο
-
unannotateElement - αφαιρεί το σχολιασμό από το στοιχείο
-
getTemplates - επιστρέφει λεξικό προτύπων σχολιασμού
-
setUnderlineOptions - ορίζει ρυθμίσεις για τον υπογραμμισμένο σχολιασμό
-
setHighlightOptions - ορίζει ρυθμίσεις για σχολιασμό επισημάνσεων
-
setStrikeOptions - ορίζει ρυθμίσεις για σχολιασμό προειδοποίησης
διαφορά μεταξύ c corp και s corp and llc
Η τάξη σχολιασμού περιέχει τρεις παρουσίες της κλάσης AnnotatorImpl για κάθε συνάρτηση σχολιασμού: υπογράμμιση, επισήμανση και προειδοποίηση.
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); }; Οι παρουσίες του AnnotatorImpl δημιουργούνται με διαφορετικά αναγνωριστικά και αντικείμενα βοηθού θέσης. Τα αναγνωρισμένα που έχουν περάσει χρησιμοποιούνται αργότερα σε ονόματα κλάσεων CSS και ονόματα εσωτερικών πεδίων, απαιτώντας τα αναγνωριστικά να είναι μοναδικά. Επίσης, περνά μια αναφορά σε μια λίστα γνωστών προτύπων (μπορεί να αλλάξει αργότερα).
Κάθε αντικείμενο εντοπισμού θέσης είναι μια εφαρμογή διεπαφής IPositioner που έχει τη μέθοδο 'getPosition' μόνο και φαίνεται ως εξής:
διέρρευσαν πιστωτικές κάρτες με χρήματα
/** * 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) }; } }); Αυτό επιτρέπει σε κάθε πρότυπο να χρησιμοποιείται με υπογράμμιση, επισήμανση ή σχολιασμό κειμένου με προειδοποίηση. Όταν ένας σχολιασμός εφαρμόζεται σε ένα στοιχείο, το πλαίσιο οριοθέτησης για το στοιχείο λαμβάνεται καλώντας 'getElementRects' όπως φαίνεται παρακάτω:
var rects = elemOrEv.getClientRects(); Αυτή η μέθοδος επιστρέφει μια συλλογή ορθογωνίων που υποδεικνύουν τα ορθογώνια οριοθέτησης για κάθε πλαίσιο σε έναν πελάτη. Αφού περάσουμε κάθε ορθογώνιο στη θέση σκυροδέματος, θα φτάσουμε τα όρια προορισμού.
Πρότυπα σχολιασμού κειμένου SVG
Όπως αναφέρθηκε προηγουμένως, υπάρχει μόνο ένα σύνολο προτύπων που χρησιμοποιούνται για όλα τα είδη σχολιασμών κειμένου SVG. Κάθε πρότυπο αποτελείται από μέρη προτύπων. Ένα μέρος προτύπου είναι μια οντότητα που αντιπροσωπεύει το περιεχόμενο, το πλάτος του προτύπου και τη λειτουργία σχεδίασης.
Περιεχόμενο
Το περιεχόμενο είναι ένα σύνολο στοιχείων SVG που αντιπροσωπεύονται ως συμβολοσειρά. Δεδομένου ότι αυτό το περιεχόμενο δεν έχει έναν ριζικό κόμβο SVG όπου ορίζεται το πλάτος και το ύψος της θύρας προβολής (σε εικονοστοιχεία), ο κατασκευαστής τμημάτων του προτύπου τις αποδέχεται ως παραμέτρους. Για παράδειγμα, μπορείτε να ορίσετε το μέγεθος μιας θύρας προβολής ως 100 εικονοστοιχεία x 100 εικονοστοιχεία και να σχεδιάσετε μια γραμμή στα (50, 50) και (25, 25). Μετά την εφαρμογή του σχολιασμού, όλα τα στοιχεία svg θα έχουν το σωστό μέγεθος στο επιθυμητό μέγεθος. Η τιμή περιεχομένου μπορεί να χρησιμοποιήσει τη συμβολοσειρά '{0}' η οποία θα αντικατασταθεί με το χρώμα που έχει επιλέξει ο χρήστης.
Το ακόλουθο SVG αποδίδει μια διαγώνια γραμμή. Θα το χρησιμοποιήσουμε ως ένα από τα μέρη σε ένα παράδειγμα στυλ σχολιασμού που ακολουθεί σύντομα:
var t = new tvs.Template(new tvs.SvgTemplatePart( '' + '', 20, 20, 'repeat' )) Πλάτος
Το πλάτος προτύπου είναι μια συμβολοσειρά που μπορεί να είναι '*', 'ύψος' ή οτιδήποτε άλλο:
-
Το '*' ορίζει το πλάτος όλων των στοιχείων με ένα αστέρι ίσο μεταξύ τους
-
Το 'ύψος' ορίζει το πλάτος ίσο με το ύψος του στοιχείου σχολιασμού
Οτιδήποτε άλλο έχει οριστεί εδώ θα ρυθμιστεί απευθείας σε ιδιότητες πλάτους και πλάτους CSS.
Λειτουργία σχεδίασης
Η λειτουργία Draw είναι μια συμβολοσειρά που μπορεί να είναι είτε 'επανάληψη' είτε 'stretch'. Όπως υποδηλώνουν οι τιμές, η ρύθμιση σε 'επανάληψη' θα επαναλάβει το περιεχόμενο, ενώ η ρύθμιση σε 'τέντωμα' θα τεντώσει το περιεχόμενο.
Εδώ είναι ένα παράδειγμα του τι μπορούμε να επιτύχουμε διαμορφώνοντας αυτές τις τρεις παραμέτρους:
Ο σχολιασμός κειμένου στο παραπάνω παράδειγμα περιέχει 4 μέρη. Το πρώτο μέρος είναι η διαγώνια γραμμή, με το πλάτος του προτύπου να ρυθμίζεται σε «ύψος» και τη λειτουργία σχεδίασης να είναι «επανάληψη». Το δεύτερο μέρος έχει το πλάτος του προτύπου ρυθμισμένο σε '*' και η λειτουργία σχεδίασης ρυθμίζεται σε 'επανάληψη'. Το τρίτο μέρος έχει πλάτος '15px' και σχεδιάζεται σε λειτουργία 'επανάληψης'. Τέλος, το πλάτος του τελευταίου τμήματος ορίζεται σε '*' και η λειτουργία κλήρωσης έχει οριστεί σε 'τέντωμα'.
Όταν αξιολογούνται αυτά τα πλάτη, το πρώτο μέρος διαρκεί 5 εικονοστοιχεία (ίσο με το ύψος του στοιχείου σχολιασμού), το τρίτο μέρος διαρκεί 15 εικονοστοιχεία (ως σύνολο) και ο υπόλοιπος χώρος διαιρείται εξίσου μεταξύ του δεύτερου και του τέταρτου μέρους.
Όταν επισημαίνεται το ίδιο κομμάτι κειμένου χρησιμοποιώντας το ίδιο πρότυπο, αυτό λαμβάνουμε:
πώς επηρεάζουν τα χρώματα τους ανθρώπους
Όπως μπορείτε να πείτε, το ύψος του στοιχείου σχολιασμού είναι μεγαλύτερο και το πλάτος του πρώτου μέρους (αφού το πλάτος του προτύπου για αυτό το μέρος έχει οριστεί σε 'ύψος'). Φυσικά, το πλάτος του τρίτου μέρους παρέμεινε αμετάβλητο από το προηγούμενο παράδειγμα.
Η εφαρμογή ενός εφέ απεργίας στο ίδιο κείμενο με το ίδιο πρότυπο παράγει ένα αποτέλεσμα πολύ παρόμοιο με το πρώτο. Η μόνη διαφορά είναι η τοποθεσία στην οποία τοποθετούνται τα στοιχεία σχολιασμού:
Παρόλο που αυτοί οι σχολιασμοί κειμένου φαίνονται περίπλοκοι (ο τρόπος εμφάνισής τους, με τέσσερα ξεχωριστά μέρη), όλοι χρησιμοποιούν πολύ απλά στοιχεία SVG. Ως επιπρόσθετο παράδειγμα, το να κάνεις μια γραμμή squiggly απαιτεί ένα μόνο μέρος, με το ακόλουθο, απλό περιεχόμενο SVG:
tvs.AnnotatorDictionary.svgTemplates['brush'] = new tvs.Template(new tvs.SvgTemplatePart( svgContent, 50, 50, '*', 'stretch' )); Όταν αξιολογούνται αυτά τα πρότυπα, το μέγεθος αλλάζει το μέγεθος και το '{0}' αντικαθίσταται αυτόματα με το καθορισμένο χρώμα. Ακόμα περισσότερο, η προσθήκη νέων προτύπων είναι τόσο απλή όσο η προσθήκη τους σε ένα αντικείμενο JavaScript:
πώς να εντοπίσετε διαρροές μνήμης
Αποτελέσματα
Κάθε σχολιασμός εφαρμόζεται προσαρτώντας ένα στοιχείο div με απόλυτη τοποθέτηση στη σελίδα:
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; }; Το στοιχείο div συμπληρώνεται με έναν πίνακα όπου κάθε κελί που προστίθεται αντιστοιχεί σε ένα από τα μέρη του προτύπου. Το περιεχόμενο κάθε τμήματος προτύπου προστίθεται ως URI δεδομένων κωδικοποιημένου Base64, με το επιλεγμένο χρώμα να εφαρμόζεται:
var annotator = new tvs.Annotator(); annotator.underlineSelected(); Ενσωμάτωση
Για καλύτερη εμπειρία χρήστη, ειδικά όταν προσπαθείτε να χρησιμοποιήσετε αυτήν τη βιβλιοθήκη JavaScript με επεξεργάσιμες περιοχές περιεχομένου, είναι σημαντικό για τον σχολιασμό κειμένου να γνωρίζει τα όρια του κειμένου που έχει επιλέξει ο χρήστης. Λεπτός , μια τακτοποιημένη βιβλιοθήκη JavaScript που ασχολείται με το εύρος και την επιλογή, έχει χρησιμοποιηθεί για να επιτευχθεί αυτό με έναν τρόπο μεταξύ των προγραμμάτων περιήγησης. Το Rangy παρέχει ένα απλό API βασισμένο σε πρότυπα για την εκτέλεση κοινών εργασιών εύρους και επιλογής DOM σε όλα τα μεγάλα προγράμματα περιήγησης, αφαιρώντας τις άγρια διαφορετικές υλοποιήσεις αυτής της λειτουργικότητας μεταξύ του Internet Explorer και των προγραμμάτων περιήγησης που είναι συμβατοί με DOM. Είναι η μόνη εξάρτηση του έργου.
Μόλις ενσωματωθεί το Text Annotator, η χρήση του είναι ένα πολύ απλό κατόρθωμα:
annotator.unannotateElement(annotatedElement); Κάθε σχολιασμένο στοιχείο επισημαίνεται με κλάση 'tvs-annotated-text' και κάθε στοιχείο σχολιασμού έχει κλάση 'tvs-annotate-element'. Η κατάργηση σχολιασμών είναι ακόμη πιο απλή, με ένα μόνο πλαίσιο:
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); }; Ιδιοτροπίες
Όταν το παράθυρο αλλάζει το μέγεθός του, τα στοιχεία ενδέχεται να κινούνται, απαιτώντας να ανανεωθούν τα σχολιασμένα στοιχεία. Αυτό το χειρίζεται η βιβλιοθήκη. Ωστόσο; για να μειωθεί ο αντίκτυπος στην απόδοση, η πρόσκληση για ανανέωση σχολιασμών περιορίζεται:
data-annotate='underline squiggly green' Κατά την ανανέωση, τα στοιχεία σχολιασμού μπορούν να προστεθούν, να αλλάξουν το μέγεθος ή να αφαιρεθούν από τη σελίδα, όπως απαιτείται.
Ευκολία
Για να διευκολύνετε τον σχολιασμό στατικού κειμένου σε μια σελίδα, ένα απλό χαρακτηριστικό δεδομένων στο στοιχείο κοντέινερ είναι το μόνο που χρειάζεστε:
|_+_|
Αυτό θα σχολιάσει το περιεχόμενο του στοιχείου με μια πράσινη υπογράμμιση.
συμπέρασμα
Τι άλλο μπορώ να πω για αυτό το σεμινάριο κειμένου SVG; Ένα διασκεδαστικό αλλά ισχυρό εργαλείο έχει εφαρμοστεί εύκολα. Δεν νομίζω ότι θα επωφεληθήκαμε πολύ διασφαλίζοντας την υποστήριξη για τον Internet Explorer 8, καθώς ενδέχεται να καταλήξουμε να περιπλέξουμε ολόκληρη την εφαρμογή. Ωστόσο, με ορισμένες βελτιώσεις και λίγη δουλειά στον πυρήνα, μπορούμε να επεκτείνουμε τη βιβλιοθήκη ώστε να μπορούμε να παράγουμε διακοσμητικά περιγράμματα για μη κειμενικά στοιχεία. Επιπλέον, μπορεί να είναι ενδιαφέρουσα η εφαρμογή κάποιου μηχανισμού για την αποθήκευση και την επαναφορά αργότερα της κατάστασης ενός επεξεργάσιμου περιεχομένου ενός σχολιασμού.
Όσο για τώρα, οι δυνατότητες περιορίζονται μόνο από τη φαντασία σας (και τις δυνατότητες του προγράμματος περιήγησης). Ίσως θέλετε γραμμές μικροτύπων, ντεγκραντέ ή ακόμα και κινούμενα σχέδια. Με Σχολιασμός κειμένου , μπορείς.
