HTML & CSS για αρχάριους (Μέρος 33): Ελέγχοντας την ροή του κειμένου.

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

Πρώτης γραμμής εσοχή

Ας ξεκινήσουμε με την ιδιότητα text-indent. Καθορίζει πώς να γίνει η εσοχή της πρώτης γραμμής ενός παραγράφου. Είναι δυνατή και μια "αντίστροφη" εσοχή προς τα αριστερά. Γι' αυτό χρησιμοποιείται μια αρνητική τιμή του text-indent. (Λεπτομερείες σχετικά με πότε μπορεί να είναι χρήσιμη μια έντονη εσοχή, ακολουθούν στη συνέχεια). Αναμένεται αριθμητική τιμή.

Ένα παράδειγμα:

.absatz { text-indent: 2em; }

Έτσι εμφανίζεται στον περιηγητή:





Αν χρησιμοποιήσετε μια αρνητική τιμή, μία αντίστροφη εσοχή εμφανίζεται στην πρώτη γραμμή κειμένου.

.absatz {
   text-indent: -2em;
}

Και φυσικά πάλι μια ματιά στο αποτέλεσμα στον περιηγητή:





Έτσι είναι εφικτό. Ωστόσο, κατά τον καθορισμό των αντιστροφών εσοχών, βεβαιωθείτε ότι το περιεχόμενο παραμένει αναγνώσιμο, όταν αυτό είναι επιθυμητό. Πράγματι, η ιδιότητα text-indent μπορεί να γίνει ενδιαφέρουσα σε σχέση με το θέμα της βελτιστοποίησης για μηχανές αναζήτησης. Γι' αυτό το λόγο, προτιμήστε να εμφανίζετε περιοδικά γραφικά αντί για κείμενο.

Ωστόσο, αν θέλετε το κείμενο να είναι διαθέσιμο για τις μηχανές αναζήτησης, τότε βρίσκεστε αντιμέτωποι με ένα δίλημμα. Αυτό το δίλημμα μπορεί να αντιμετωπιστεί με τη χρήση της ιδιότητας text-indent. Επειδή αυτή η ιδιότητα σάς επιτρέπει γνωστά να μετακινήσετε τα κείμενα. Έτσι μπορείτε να κρύψετε τα κείμενα από την όψη των επισκεπτών.

Πλεονέκτημα της εκδοχής text-indent: Το κείμενο που πρόκειται να αντικατασταθεί με γραφικό παραμένει αναλλοίωτο στον πηγαίο κώδικα.

<h1>PSD-Tutorials.de</h1>
...
h1 {
   background: url(logo.png) 0 0 no-repeat;
   text-indent: -99999px;
   height:200px;
}

Με αυτή τη σύνταξη, στο στοιχείο h1 εκχωρείται ένα φόντο γραφικού. (Η ιδιότητα background έχει ήδη παρουσιαστεί σε αυτή τη σειρά). Μέσω της text-indent: -99999px το κείμενο του τίτλου μετακινείται 99999 pixel προς τα αριστερά. Επομένως, το κείμενο δεν είναι πλέον ορατό. Πλέον εμφανίζεται μόνο το γραφικό.





Αν απενεργοποιήσετε το stylesheet, το κείμενο είναι ορατό κανονικά.

Ορισμός του ύψους της γραμμής

Το ύψος της γραμμής το υποδήλωσα ήδη μία φορά σε σχέση με τη γενική ιδιότητα font. Τώρα, αναλύουμε λίγο περισσότερο αυτό το θέμα. Ενδιαφέρουσα είναι η καθορισμένη του ύψους της γραμμής σε συνδυασμό με το μέγεθος γραμματοσειράς (font-size).

Το ύψος της γραμμής καθορίζεται με την ιδιότητα line-height. Επιτρέπονται αριθμητικές τιμές. Επιτρέπονται επίσης ποσοστιαίες τιμές. Οι τελευταίες αναφέρονται στο μέγεθος γραμματοσειράς του στοιχείου, για το οποίο έχει καθοριστεί το ύψος της γραμμής. Πριν ορίσετε το ύψος της γραμμής, να λάβετε υπόψη τα παρακάτω: Μπορεί να συμβεί να ένας περιηγητής/συσκευή δώσει προτεραιότητα στην τιμή του ύψους της γραμμής και να περικόψει στοιχεία αν είναι υπερβολικά ψηλά. Αυτό μπορεί να είναι ενοχλητικό, ιδίως με τις γραφικές αναπαραστάσεις. Ελέγξτε επομένως τα αποτελέσματα πριν ανεβάσετε τη σελίδα στο διαδίκτυο.

Το ακόλουθο παράδειγμα δείχνει πώς το line-height μπορεί να χρησιμοποιηθεί.

<p style="line-height:1.4em; font-size:1em;">Κάποιες φορές έχετε δημιουργήσει ένα εκπληκτικό layout, αλλά λείπουν ακόμα οι φωτογραφίες, κι αν χρησιμοποιήσετε μόνο κενά πλαίσια, τότε το layout φαίνεται αρκετά γυμνό. Μπορεί, όμως, να γίνει καλύτερα:<br />
Σε αυτό το video training σας δείχνω τις καλύτερες διευθύνσεις internet για γρήγορα εύρεση δωρεάν φωτογραφιών-κάθετων κατόχων. Μία εκπληκτική λίστα μπορείτε να βρείτε π.χ. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">εδώ</a>.</p>

<p style="line-height:2em;font-size:1em;">Κάποιες φορές έχετε δημιουργήσει ένα εκπληκτικό layout, αλλά λείπουν ακόμα οι φωτογραφίες, κι αν χρησιμοποιήσετε μόνο κενά πλαίσια, τότε το layout φαίνεται αρκετά γυμνό. Μπορεί, όμως, να γίνει καλύτερα:<br />
Σε αυτό το video training σας δείχνω τις καλύτερες διευθύνσεις internet για γρήγορα εύρεση δωρεάν φωτογραφιών-κάθετων κατόχων. Μία εκπληκτική λίστα μπορείτε να βρείτε π.χ. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">εδώ</a>.</p>

<p style="line-height:1em; font-size:1em;">Κάποιες φορές έχετε δημιουργήσει ένα εκπληκτικό layout, αλλά λείπουν ακόμα οι φωτογραφίες, κι αν χρησιμοποιήσετε μόνο κενά πλαίσια, τότε το layout φαίνεται αρκετά γυμνό. Μπορεί, όμως, να γίνει καλύτερα:<br />
Σε αυτό το video training σας δείχνω τις καλύτερες διευθύνσεις internet για γρήγορα εύρεση δωρεάν φωτογραφιών-κά
Εδώ ορίστηκαν τρεις αποσπάσματα κειμένου, στα οποία εκάστως ανατεθηκαν διαφορετικές υψηλές γραμμές.





Όπως βλέπετε, η ευκρινής ανάγνωση του ρεύστου κειμένου μπορεί να επηρεαστεί σημαντικά από το ύψος των γραμμών. Χειριστείτε λοιπόν με προσοχή το line-height.

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



p {
 line-height: 150%; 
}





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





Οριζόντια ευθυγράμμιση κειμένου



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

• left – αριστερή ευθυγράμμιση

• right – δεξιά ευθυγράμμιση

• center – κεντράρισμα

• justify – ευθυγράμμιση ως γεμίσματος

Εδώ ένα παράδειγμα:



<!DOCTYPE html>
 <html>
 <head>
 <style>
 h1 {text-align:center}
 h2 {text-align:left}
 h3 {text-align:right}
 </style>
 </head>
 <body>
 <h1>PSD-Tutorials.de</h1>
 <h2>PSD-Tutorials.de</h2>
 <h3>PSD-Tutorials.de</h3>
 </body>
 </html>



Και έτσι φαίνεται το αποτέλεσμα στον περιηγητή:





Σημειώστε ότι το text-align αφορά όχι μόνο στα περιεχόμενα κειμένου. Η ιδιότητα ισχύει πράγματι για όλα τα στοιχεία εντός των Inline. Έτσι, αν εισάγετε μια εικόνα, η ορισμός του text-align ισχύει και γι'αυτό το στοιχείο.

Ένα σημείο ακόμη: το text-align δεν θα πρέπει – τουλάχιστον σύμφωνα με την επίσημη CSS προδιαγραφή – να επηρεάζει τις τετραγωνικές στοιβαρές αναφορές. (Αν και υπάρχουν φυσικά περιηγητές που το εφαρμόζουν και στα τετραγωνικά στοιβαρά αντικείμενα). Αν θέλετε να ευθυγραμμίσετε αναφορές στοιβαρών αντικειμένων, χρησιμοποιήστε στις εν λόγω περιπτώσεις τις παρουσιασμένες ιδιότητες margin.