Διατηρήστε τον κάθετο ρυθμό με CSS και jQuery

Περιεχόμενο

• Διάταξη τύπου
• Κάθετος ρυθμός
• Διεξαγωγή του ρυθμού
• Αντιμετωπίζοντας εικόνες
• Βελτίωση του jQuery
• συμπέρασμα

• Απαιτείται γνώση: CSS, βασικό jQuery
• Απαιτεί: jQuery, CSS, HTML
• Ώρα έργου: 30 λεπτά
• Λήψη αρχείων προέλευσης

Υποθέτοντας ότι σχεδιάζετε από το περιεχόμενο έξω, η πρώτη απόφαση να επηρεάσετε το σχέδιό σας έχει να σχετίζεται με τον τύπο. Ακόμα και από δεν επιλέγοντας μια γραμματοσειρά έχετε κάνει κάτι που επηρεάζει τον ιστότοπό σας. Ο τύπος είναι ο πυρήνας της εκτύπωσης και του σχεδιασμού ιστοσελίδων και είναι περίπλοκος. Υπάρχουν πολλοί συσσωρευμένοι όροι, πρακτικές, κανόνες και τεχνικές που χρησιμοποιούνται για την καλή χρήση του. Αυτό το άρθρο ασχολείται με μια τεχνική για τη διαχείριση μιας πτυχής του τύπου, μια που ήταν δύσκολο να γίνει στο διαδίκτυο, αλλά είναι τυπική σε έντυπη μορφή: διατηρώντας έναν συνεπή κατακόρυφο ρυθμό, ο οποίος με τη σειρά του επιτρέπει να επιτύχουμε μια επαγγελματική διάταξη.

Διάταξη τύπου

Σε έντυπη μορφή, για οποιοδήποτε στοιχείο με μεγάλη ποσότητα κειμένου, το θεμέλιο του σχεδιασμού είναι πιθανό να είναι ένα βασικό πλέγμα. Χρησιμοποιείται για να φέρει τη δομή στη σελίδα και καθοδηγεί την κάθετη ροή περιεχομένου. Σχεδόν όλα τοποθετούνται σε σχέση με αυτό το βασικό πλέγμα. Μην ανησυχείτε εάν δεν αναγνωρίζετε τους όρους, κανείς δεν είναι εξοικειωμένος με τα βασικά ή τα βασικά πλέγματα. γνωρίζετε ήδη γι 'αυτούς. Σκεφτείτε πίσω στο σχολείο, όταν γράψατε αναμφίβολα σε χαρτί με επένδυση - καθώς γράψατε τοποθετήσατε το κάτω μέρος των επιστολών σας σε κάθε γραμμή του χαρτιού. Το βασικό και βασικό πλέγμα σε δράση. Η γραμμή βάσης είναι μια φανταστική γραμμή στην οποία ευθυγραμμίζεται το κάτω μέρος των γραμμάτων.Αν κοιτάξετε αυτό το άρθρο τώρα, θα "δείτε" μια γραμμή βάσης, παρόλο που δεν υπάρχει πραγματικά μια γραμμή. Ο εγκέφαλός σας το βάζει εκεί για σας, γι 'αυτό μπορείτε να διαβάσετε προτάσεις. Οι γραμμές σε χαρτί με επένδυση; Είναι ένα βασικό πλέγμα. Ευθεία, ώστε οι προτάσεις σας να είναι ευθείες και να ρυθμίζονται σε τακτά χρονικά διαστήματα, ώστε το κείμενό σας να έχει κανονικό κατακόρυφο ρυθμό.

Κάθετος ρυθμός

Ο κάθετος ρυθμός υπαγορεύει πού βρίσκεται το κείμενο της σελίδας. Είναι ένα στοιχείο που επηρεάζει την ικανότητά μας να σαρώσουμε και να διαβάσουμε τμήματα κειμένου και βοηθά στην ενημέρωση των συναισθηματικών μας απαντήσεων. Όταν το κείμενο έχει ισχυρό κατακόρυφο ρυθμό και καλή απόσταση, πιστεύουμε ότι είναι επαγγελματικό, θεωρημένο, αυθεντικό και άνετο να διαβαστεί. Όταν το κείμενο έχει χαμηλό ρυθμό και απόσταση, πιστεύουμε ότι είναι λιγότερο μελετημένο, λιγότερο επαγγελματικό και συχνά πιο δύσκολο να διαβαστεί. Ο κάθετος ρυθμός είναι ένα μέρος της χρηστικότητας και ένα μέρος της αισθητικής.

Διεξαγωγή του ρυθμού

Δυστυχώς, ο ιστός εξακολουθεί να είναι ο φτωχός ξάδελφος της εκτύπωσης όσον αφορά την ικανότητά του να εφαρμόζει ορισμένες θεμελιώδεις πρακτικές σχετικά με τον τύπο. Στον ιστό δεν μπορούμε να χρησιμοποιήσουμε ένα βασικό πλέγμα με τον ίδιο τρόπο που κάνει ο σχεδιαστής εκτύπωσης (ή το παιδί στο σχολείο) - δεν μπορούμε να ευθυγραμμίσουμε τη γραμμή βάσης του κειμένου με το πλέγμα βασικής γραμμής ενός εγγράφου. Η CSS δεν έχει ιδέα για ένα βασικό πλέγμα. Έτσι, το κείμενό μας δεν θα τοποθετηθεί ακριβώς στις γραμμές ενός πλέγματος βάσης. Αντ 'αυτού, θα κεντραριστεί κάθετα στο κενό μεταξύ των γραμμών. Είναι το καλύτερο που μπορεί να κάνει ο ιστός.

Ας κάνουμε πρακτικό με ένα παράδειγμα εγγράφου. Πρώτον, θα κάνουμε το ρυθμό κάνοντας ένα ορατό πλέγμα βάσης. Για να το κάνουμε αυτό, θα χρησιμοποιήσουμε μια επαναλαμβανόμενη εικόνα φόντου για να σχεδιάσουμε κανονικές οριζόντιες γραμμές με απόσταση 22 εικονοστοιχείων:

1. html {background: #fff url (baseline_22.png); }

Hurray, έχουμε το χαρτί με επένδυση!

Θα παρατηρήσετε ότι τίποτα δεν παρατάσσεται. Για να τακτοποιήσουμε τα πάντα, θέλουμε το κάτω άκρο όλων των στοιχείων να χτυπήσει μία από αυτές τις γραμμές. Ο ευκολότερος τρόπος για να γίνει αυτό είναι να βεβαιωθείτε ότι όλα τα στοιχεία καταλαμβάνουν ένα κατακόρυφο ύψος (συμπεριλαμβανομένων των περιθωρίων) που είναι πολλαπλάσιο του 22. Ακολουθεί κάποιο CSS που κάνει ακριβώς αυτό. Χρησιμοποιώ τη μονάδα REM, αλλά δίνω εναλλακτική λύση EM για προγράμματα περιήγησης που δεν κατανοούν το REM. Περιλαμβάνω επίσης τα αντίστοιχα της μονάδας PX στα σχόλια. Εάν δεν καταλαβαίνετε ακόμη το REM / EM, τότε θα μπορούσατε απλώς να χρησιμοποιήσετε τις τιμές px - είναι όλες ισοδύναμες:

1. html {/ * μέγεθος γραμματοσειράς: 16 εικονοστοιχεία, ύψος γραμμής: 22 εικονοστοιχεία * /
2. γραμματοσειρά: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. φόντο: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * margin-top και bottom είναι και τα δύο 22px * /
6. / * em fallback * / margin: 1.375em 0;
7. περιθώριο: 1.375rem 0; }
8. h1 {/ * το μέγεθος γραμματοσειράς είναι 32px, το ύψος γραμμής είναι 44px * /
9. / * em fallback * / font-size: 2em;
10. μέγεθος γραμματοσειράς: 2rem; ύψος γραμμής: 1,375; }
11. h2 {/ * το μέγεθος γραμματοσειράς είναι 26px, το ύψος γραμμής είναι 44px * /
12. / * em fallback * / font-size: 1,75em;
13. μέγεθος γραμματοσειράς: 1.75rem; ύψος γραμμής: 1.5714285714; }
14. h3, h4, h5, h6 {/ * το μέγεθος γραμματοσειράς είναι 22px, το ύψος γραμμής είναι 22px * /
15. / * em fallback * / font-size: 1.375em;
16. μέγεθος γραμματοσειράς: 1.375rem; ύψος γραμμής: 1; }
17. p, ul, blockquote {/ * το κάτω περιθώριο είναι 22px, το ύψος γραμμής κληρονομείται από html (22px) * /
18. / * em fallback * / margin-top: 0; margin-bottom: 1.375εκ.
19. margin-top: 0; margin-bottom: 1.375rem; }

Ας ρίξουμε μια ματιά σε αυτό που μας δίνει. Παρατηρήστε πώς ευθυγραμμίζεται όλο το κείμενο; Δεν κάθεται στη βασική γραμμή, αλλά έχει έναν προβλέψιμο κατακόρυφο ρυθμό. Είναι ωραίο και τακτοποιημένο.

Αντιμετωπίζοντας εικόνες

Οι εικόνες κάνουν τα πράγματα πιο περίπλοκα. Ρίξτε μια ματιά τι συμβαίνει στο ρυθμό μας όταν συμπεριλάβουμε μερικά. Το διαταράσσουν σαν ένα άλμα σε ένα ρεκόρ - ο ρυθμός είναι σωστός αλλά ο συγχρονισμός είναι απενεργοποιημένος. Η ευθυγράμμιση μετατοπίζεται. Είναι επειδή οι εικόνες είναι απίθανο να έχουν ύψος που είναι πολλαπλάσιο της γραμμής βάσης, επομένως η κάτω άκρη δεν ευθυγραμμίζεται με το πλέγμα βάσης.

Για να το διορθώσουμε, το μόνο που πρέπει να κάνουμε είναι να προσθέσουμε ένα περιθώριο σε κάθε εικόνα, κάνοντας το κάτω μέρος του περιθωρίου ευθυγραμμισμένο με το πλέγμα μας. Το οποίο είναι αρκετά απλό για αυτοματοποίηση με λίγο JavaScript. Εδώ είναι το βασικό μας σχέδιο:

1. Βρείτε το ύψος κάθε εικόνας.
2. Δείτε πόσες φορές η τιμή βάσης διαιρείται στον κατακόρυφο χώρο που καταλαμβάνει η εικόνα και λάβετε το υπόλοιπο.
3. Αφαιρέστε το υπόλοιπο από τη γραμμή βάσης για να δώσετε το όφσετ που πρέπει να εφαρμόσουμε στην εικόνα.
4. Εφαρμόστε το όφσετ ως περιθώριο στο κάτω μέρος της εικόνας.

Το κάτω μέρος του κατακόρυφου χώρου της εικόνας ευθυγραμμίζεται τώρα σωστά με το πλέγμα βάσης. Ακολουθεί μια βασική συνάρτηση στο jQuery που κάνει αυτό:

1. $ (παράθυρο) .bind («φόρτωση», συνάρτηση () {
2. $ ("img"). κάθε (συνάρτηση () {
3. / * μεταβλητές * /
4. var this_img = $ (αυτό);
5. αρχική τιμή var = 22;
6. var img_height = this_img.height ();
7. / * κάνετε τα μαθηματικά * /
8. var υπόλοιπο = parseFloat (img_height% baseline);
9. / * πόσο πρέπει να προσθέσουμε; * /
10. var offset = parseFloat (βασικό υπόλοιπο)
11. / * εφαρμόστε το περιθώριο στην εικόνα * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

Γιατί το window.bind γραμμή? Επειδή πρέπει να περιμένουμε έως ότου φορτωθούν οι εικόνες πριν μπορέσουμε να πάρουμε αξιόπιστα τα μεγέθη τους. Ακολουθεί ένα παράδειγμα με την εκτέλεση αυτού του βασικού κώδικα.

Βελτίωση του jQuery

Ο κόσμος σπάνια είναι απλός, και έτσι αποδεικνύεται εδώ - πρέπει να ασχοληθούμε με αρκετές λεπτομέρειες εφαρμογής. Τι συμβαίνει με τη λειτουργία που έχουμε; Αφθονία:

• Παράγει άσχημα αποτελέσματα με εικόνες που είναι ενσωματωμένες και όχι αιωρούμενες ή μπλοκ.
• Φαίνεται με λάθη σε μερικές εικόνες, ειδικά σε αυτές σε κοντέινερ.
• Δεν ασχολείται με τις υγρές διατάξεις.
• Δεν είναι πολύ επαναχρησιμοποιήσιμο.

Δεν θέλουμε να εφαρμόσουμε αυτήν τη συμπεριφορά σε εικόνες που είναι ενσωματωμένες, όπως το χαμογελαστό πρόσωπο στο παράδειγμα. Οι ενσωματωμένες εικόνες ευθυγραμμίζονται έτσι το κάτω άκρο να βρίσκεται στην ίδια γραμμή βάσης με το κείμενο (δεν το βασικό πλέγμα). Αυτό σημαίνει ότι η εικόνα μετατοπίζεται κάθετα. Ούτε το CSS ούτε το JS μας δίνουν έναν τρόπο να μάθουμε πού βρίσκεται η βασική γραμμή για ένα στοιχείο κειμένου, οπότε δεν γνωρίζουμε την αντιστάθμιση. Πρέπει να αγνοήσουμε τις ενσωματωμένες εικόνες και να εφαρμόσουμε τη διόρθωσή μας μόνο σε εικόνες που έχουν ρυθμιστεί σε οθόνη: μπλοκ (ευτυχώς, οποιαδήποτε αιωρούμενη εικόνα ρυθμίζεται αυτόματα στο μπλοκ εμφάνισης).

Εάν μια εικόνα βρίσκεται σε ένα κοντέινερ, το περιθώριο που εφαρμόζεται στην εικόνα ενδέχεται να είναι κρυφό λόγω των ρυθμίσεων υπερχείλισης στο κοντέινερ. Επίσης, ενδέχεται να μην θέλουμε το περιθώριο στην εικόνα, αλλά στο στοιχείο κοντέινερ. Στο παράδειγμα, θα προτιμούσαμε να έχουμε περιθώρια στο λευκό πλαίσιο παρά στην εικόνα μέσα στο κουτί, ώστε να αποφύγουμε να έχουμε περίεργα κενά που εμφανίζονται στο κουτί.

Η λειτουργία εκτελείται μόνο μία φορά, αλλά σε υγρή σχεδίαση οι εικόνες αλλάζουν ύψος όταν το πρόγραμμα περιήγησης έχει επαναπροσδιοριστεί (δοκιμάστε να αλλάξετε το μέγεθος του παραδείγματος σε κάτι αρκετά στενό για να το δείτε). Η αλλαγή μεγέθους σπάει ξανά τον ρυθμό. Χρειαζόμαστε τη λειτουργία για να εκτελεστεί το μέγεθος του προγράμματος περιήγησης καθώς και μετά τη φόρτωση της σελίδας. Οι διατάξεις υγρών εισάγουν επίσης άλλα προβλήματα. Οι εικόνες μπορεί να έχουν κλασματικά εικονοστοιχεία, για παράδειγμα 132,34 εικονοστοιχεία. Αυτό με τη σειρά του μπορεί να προκαλέσει απροσδόκητα αποτελέσματα, ακόμη και αν εφαρμόσουμε ένα κλασματικό περιθώριο (αν σας ενδιαφέρει, εδώ είναι ο λόγος: trac.webkit.org/wiki/LayoutUnit). Θα χρειαστεί λοιπόν να κάνετε μασάζ στην εικόνα σε ύψος ολόκληρου pixel για να αποφύγετε σφάλματα διάταξης που προκαλούνται από κλασματικά pixel.

Τέλος, πρέπει να το κάνουμε σε μια πιο επαναχρησιμοποιήσιμη λειτουργία. Στην πραγματικότητα, με την πολυπλοκότητα που χρειάζεται μια πρακτική λύση έναντι της θεωρητικής λύσης, θα πρέπει να κάνουμε ένα πρόσθετο που μπορεί να επαναχρησιμοποιηθεί σε άλλα έργα.

Στο τελευταίο παράδειγμα θα βρείτε τον κώδικα που τα επιτυγχάνει όλα αυτά. Το πρόσθετο JavaScript σχολιάζεται έντονα, ώστε να μπορείτε να το ακολουθήσετε. Μπορείτε να χρησιμοποιήσετε το πρόσθετο καλώντας το ως εξής:

1. $ (παράθυρο) .bind («φόρτωση», συνάρτηση () {
2. $ ("img"). baselineAlign ();
3. });

Εναλλακτικά, μπορείτε να πείτε στην προσθήκη να εφαρμόσει το περιθώριο σε ένα όνομα κοντέινερ, εάν υπάρχει ως γονέας της εικόνας:

1. $ (παράθυρο) .bind («φόρτωση», συνάρτηση () {
2. $ ("img"). baselineAlign ({container: '. popup'});
3. });

συμπέρασμα

Η διατήρηση ενός καλού κάθετου ρυθμού είναι μια λεπτή αλλά αποτελεσματική πρακτική σχεδιασμού που χρησιμοποιείται τακτικά στην εκτύπωση. Γνωρίζετε τώρα τις βασικές αρχές, έχετε γνώσεις σχετικά με τις γραμμές βάσης και το πλέγμα βάσης και γνωρίζετε μερικούς από τους περιορισμούς της διάταξης κειμένου CSS έναντι της εκτύπωσης. Γνωρίζετε επίσης πώς να επιλύσετε αυτούς τους περιορισμούς, να συνθέσετε τα έγγραφά σας σε κάθετο ρυθμό που σας αρέσει και έχετε ένα εργαλείο για να αντιμετωπίσετε το ενοχλητικό περιεχόμενο εικόνας.

Καθώς το CSS ωριμάζει, συνεχίζουμε να λαμβάνουμε περισσότερες δυνατότητες σύμφωνα με τα ξαδέλφια εκτύπωσης, οπότε μια καλή κατανόηση του τύπου θα γίνει πιο σημαντική για τη δημιουργία ποιοτικών ιστότοπων. Εάν θέλετε να μάθετε περισσότερα σχετικά με τον τύπο γενικά, συνιστώ ανεπιφύλακτα το www.thinkingwithtype.com (και να αγοράσετε το βιβλίο για να το πάρετε μαζί του). Αν ακολουθείτε άρθρα CSS σχετικά με τη θεραπεία τύπου, υπάρχουν πολλά άρθρα τόσο εδώ όσο και αλλού στον ιστό. Θα συνιστούσα επίσης να ενημερωθείτε για τα τελευταία από τους Mark Boulton και Elliot Jay Stocks, οι οποίοι μιλούν συχνά για τον τύπο σε σχέση με το σχεδιασμό ιστοσελίδων συγκεκριμένα.

Καλα να περνας!