Ο καλύτερος τρόπος να RTL ιστοσελίδες με Sass!

Υπάρχουν πολλοί τρόποι για να RTL την ιστοσελίδα σας στο διαδίκτυο, αλλά κανένας από αυτούς δεν είναι εύκολο στη χρήση.

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

Ιστοσελίδες RTL με Sass

Εννοια

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

Ας πούμε ότι χρειαζόμαστε padding στην αρχή της ετικέτας

. Στην αγγλική γλώσσα πρέπει να είναι αριστερά: 10px και στις σημιτικές γλώσσες πρέπει να είναι padding-right: 10px, και στις δύο αυτές περιπτώσεις χρειαζόμαστε padding στην αρχή της γραμμής των 10px.

Και από εδώ ξεκινάμε τη μέθοδο δημιουργίας ενός καθολικού στυλ για αρχή ή τέλος.

Με παρόμοιο τρόπο θα το χρησιμοποιήσουμε για θέση, πλωτήρες, padding, περιθώριο, σύνορα και μετασχηματίζει το CSS.

Πώς να αρχίσω?

Πρώτον: Δημιουργήστε δύο αρχεία ρυθμίσεων _direction-ltr.scss και _direction-rtl.scss.

Στο αρχείο LTR, καταχωρίστε αυτές τις μεταβλητές:

/ *** Ιστότοποι LTR *** /
$ κατεύθυνση: ltr;
$ αντίθετη κατεύθυνση: rtl;

$ αρχή κατεύθυνσης: αριστερά;
$ τελική κατεύθυνση: δεξιά?

$ μετασχηματισμός-κατεύθυνση: 1;

Στο αρχείο RTL, καταχωρίστε αυτές τις μεταβλητές:

/ *** Ιστοτόποι RTL *** /
$ κατεύθυνση: rtl;
$ αντίθετη κατεύθυνση: ltr;

$ start-direction: right?
$ τελική κατεύθυνση: αριστερά.

$ μετασχηματισμός-κατεύθυνση: -1;

Δεύτερον: Δημιουργήστε / Ενημερώστε το κύριο αρχείο SASS ως εσωτερικό αρχείο, π.χ. _main.scss.

Σημείωση: Το κύριο αρχείο δεν @import τα αρχεία ρυθμίσεων οδηγιών!

Πώς να εισαγάγετε τα αρχεία οδηγιών;

Προσθέστε δύο νέα κύρια αρχεία στον κεντρικό κατάλογο, main-ltr.scss & main-rtl.scss.

Σε κάθε κύριο αρχείο @import το σωστό αρχείο κατεύθυνσης config + το εσωτερικό αρχείο _main.scss.

Παράδειγμα (main-ltr.scss):

@import "config-directions / _direction-ltr.scss";
@import "_main.scss";

Παράδειγμα (main-rtl.scss):

@import "config-directions / _direction-rtl.scss";
@import "_main.scss";

Από αυτό το αρχείο θα συγκεντρώσετε τα δύο κύρια αρχεία, main-ltr.css & main-rtl.css

Πώς να χρησιμοποιήσετε τις μεταβλητές;

CSS Οδηγίες & κείμενο-ευθυγράμμιση:

Απλώς βάλτε τις μεταβλητές στην τιμή. Η κατεύθυνση εκκίνησης $ για τις γλώσσες LTR είναι αριστερά και για τις γλώσσες Semitic (RTL) είναι σωστή. Η κατεύθυνση $ για τα αγγλικά είναι ltr και για τις σημασιολογικές γλώσσες είναι rtl.

σώμα{
  κατεύθυνση: $ direction?
  κείμενο-ευθυγράμμιση: $ αρχή-κατεύθυνση?
}}

Θέσεις CSS:

Στην τοποθέτηση, τοποθετήστε το δεξί και το αριστερό σε μεταβλητές ανάλογα με τις ανάγκες σας.

Παράδειγμα:

θέση: απόλυτη;
# {αρχική κατεύθυνση}: 50%.

CSS περιθώρια / στεγανοποιήσεις / σύνορα:

Παράδειγμα:

περιθώριο - # {$ end-direction}: 10px;
padding - # {$ αρχή-κατεύθυνση}: 10px;
σύνορα - # {$ end-direction} -width: 2px;

Πλοήγηση CSS:

float: $ start-direction?

Μετασχηματισμός CSS: translateX:

Όταν εργάζεστε με μετασχηματισμό, πρέπει να αλλάξετε τον αριθμό από θετικό σε αρνητικό ή αντίστροφα.

Ας πούμε ότι έχουμε μετασχηματισμό κουτιού: translateX (200px) στα Αγγλικά. Το πολλαπλασιάζουμε με $ transform-direction (= 1), στα Αγγλικά το αποτέλεσμα θα είναι 200px (1 * 200px), αλλά στο rtl θα είναι -200px (-1 * 200px).

Παράδειγμα:

μετασχηματισμός: translateX (200px * $ μετασχηματισμός-κατεύθυνση);

Αποτέλεσμα

Αυτό είναι! Κάναμε μια εύκολη και βολική μέθοδο στους ιστοτόπους RTL.

Ένα παράδειγμα του κώδικα στο _main.scss:

σώμα{
  κατεύθυνση: $ direction?
  κείμενο-ευθυγράμμιση: $ αρχή-κατεύθυνση?
  padding - # {$ end-direction}: 10px;
}}

θα καταρτιστεί στο main-ltr.css:

σώμα{
  κατεύθυνση: ltr;
  κείμενο-ευθυγράμμιση: αριστερά;
  padding-right: 10px;
}}

θα καταρτιστεί στο main-rtl.scss

σώμα{
  κατεύθυνση: rtl;
  κείμενο-ευθυγράμμιση: δεξιά?
  padding-left: 10px;
}}

Περίληψη

Αυτό είναι όλο, τώρα έχετε έναν εύκολο τρόπο για να RTL ιστοσελίδες.

Ελπίζω να απολαύσατε αυτό το άρθρο και να μάθετε από την εμπειρία μου.

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

Elad Shechter, Web Developer που ειδικεύεται στο σχεδιασμό και την αρχιτεκτονική CSS & HTML και εργάζεται στο Investing.com.

Μπορείτε να επικοινωνήσετε ή να ακολουθήσετε με:
Το Twitter μου
Facebook
LinkedIn

Μπορείτε να με βρείτε στις ομάδες μου στο Facebook:
CSS Masters
CSS Masters Ισραήλ