Μετατροπή rem σε pixel (px)

Το rem είναι σχετική μονάδα μήκους του CSS. Η τιμή του ισούται με το υπολογισμένο μέγεθος γραμματοσειράς του ριζικού στοιχείου της σελίδας, δηλαδή του στοιχείου html[1]. Αν το html έχει μέγεθος γραμματοσειράς 16 pixel, κάθε rem της σελίδας ισούται με 16 pixel. Αν αλλάξει αυτό το μέγεθος, αλλάζουν μαζί όλες οι διαστάσεις που είναι γραμμένες σε rem.

Το pixel (px) του CSS είναι σταθερή μονάδα, που το πρότυπο την ορίζει ως το 1/96 της ίντσας[1]. Γι’ αυτό μια ίντσα στο CSS ισούται με 96 pixel, και ο μετατροπέας ιντσών σε px ανοίγει με προεπιλεγμένη ανάλυση 96 pixel ανά ίντσα. Με τη γενική του σημασία, το εικονοστοιχείο ή pixel είναι ένα σημείο μιας εικόνας που εμφανίζεται στην οθόνη[2]. Το pixel του CSS δεν αλλάζει όταν ο αναγνώστης αλλάζει το μέγεθος γραμματοσειράς στο πρόγραμμα περιήγησης. Και επειδή εφαρμογές σχεδίασης όπως το Figma δείχνουν τις διαστάσεις σε pixel, η μετατροπή του rem σε pixel σάς βοηθά να συγκρίνετε το φύλλο στυλ με το σχέδιο.

Το 1 rem ισούται με 16 pixel όσο το βασικό μέγεθος γραμματοσειράς μένει στην προεπιλογή του, που είναι 16 pixel σε Chrome, Edge και Firefox. Ο τύπος είναι ένας πολλαπλασιασμός: pixel = rem × βασικό μέγεθος γραμματοσειράς. Επομένως το 1,5 rem είναι 24 pixel. Το 0,875 rem είναι 14 pixel, το μέγεθος κειμένου text-sm του Tailwind CSS[3].

Το 16 είναι προεπιλογή και μπορεί να αλλάξει από δύο πλευρές. Η πρώτη είναι το φύλλο στυλ: ο κανόνας html { font-size: 62.5% } κάνει τη βάση 10 pixel, οπότε το 1,5 rem γίνεται 15 pixel. Η δεύτερη είναι ο ίδιος ο αναγνώστης. Όταν επιλέξαμε Μεγάλο στη λίστα Μέγεθος γραμματοσειράς των Ρυθμίσεων του Chrome, το μέγεθος γραμματοσειράς του στοιχείου html έγινε 20 pixel και το 1 rem έγινε επίσης 20 pixel.

Γι’ αυτό ο μετατροπέας έχει τρίτο πεδίο για τη βάση της σελίδας σας, ώστε να πάρετε τα pixel που βλέπει ο αναγνώστης της. Αν δεν τη γνωρίζετε, ξεκινήστε από το 16 που υπάρχει ήδη στο πεδίο, την προεπιλογή των τριών προγραμμάτων περιήγησης.

Ο τύπος είναι px = rem × font-size, όπου font-size είναι το μέγεθος γραμματοσειράς του στοιχείου html. Πάρτε για παράδειγμα ένα κενό 1,25 rem. Με την προεπιλεγμένη βάση των 16 pixel δίνει 1,25 × 16 = 20 pixel. Με βάση 20 pixel το ίδιο κενό γίνεται 25 pixel.

Η τεχνική 62,5% ορίζει το μέγεθος γραμματοσειράς του html στο 62,5% της προεπιλογής, οπότε η βάση γίνεται 10 pixel, αφού το 62,5% του 16 είναι 10. Τότε οι τιμές διαβάζονται απευθείας: το 2,4 rem είναι 24 pixel. Αν ο αναγνώστης ανεβάσει το μέγεθος γραμματοσειράς του προγράμματος περιήγησης στα 20 pixel, η βάση γίνεται 12,5 pixel και το 2,4 rem γίνεται 30 pixel. Το πεδίο Βασικό font-size του μετατροπέα δέχεται το ποσοστό όπως το γράφετε στο φύλλο στυλ και το υπολογίζει από τα 16 pixel. Γράψτε 62,5% και ο μετατροπέας θα δουλέψει με βάση 10 pixel.

Ο ίδιος τύπος λειτουργεί αντίστροφα με διαίρεση, και αυτό κάνει ο μετατροπέας px σε rem. Η μονάδα em υπολογίζεται από το μέγεθος γραμματοσειράς του γονικού στοιχείου, και γι’ αυτήν υπάρχει ο μετατροπέας em σε px με πεδίο για το μέγεθος του γονικού. Αν η διάσταση είναι γραμμένη σε στιγμές (pt), τη μονάδα μεγέθους γραμμάτων στους επεξεργαστές κειμένου, μετατρέψτε την πρώτα σε pixel με τον μετατροπέα pt σε px.

Το κείμενο σε rem μεγαλώνει όταν ο αναγνώστης αυξάνει το μέγεθος γραμματοσειράς στο πρόγραμμα περιήγησης, ενώ το κείμενο σε pixel μένει ίδιο. Αυτό το θέμα καλύπτει το κριτήριο 1.4.4 Resize Text των οδηγιών WCAG του W3C για την προσβασιμότητα του περιεχομένου του ιστού: «Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.»[5] Δηλαδή, εκτός από τους υπότιτλους και τις εικόνες κειμένου, το κείμενο μπορεί να μεγεθυνθεί έως 200% χωρίς βοηθητική τεχνολογία και χωρίς απώλεια περιεχομένου ή λειτουργίας. Παραθέτουμε το κριτήριο στο αγγλικό πρωτότυπο. Η μετατροπή σε pixel βοηθά στη σύγκριση με το σχέδιο, ενώ τις διαστάσεις του σχεδίου τις γράφετε στο φύλλο στυλ σε rem με τον μετατροπέα px σε rem.