De beste manier om RTL-websites met Sass!

Er zijn veel manieren om uw website op internet te RTL, maar geen ervan is eenvoudig te gebruiken.

Ik heb een eenvoudige en handige methode ontwikkeld om een ​​meertalige website te ondersteunen, die ook wordt ondersteund door RTL-talen.

RTL-websites met Sass

Concept

In het Engels begint het uitlijnen van de tekst links en eindigt rechts, maar in Semitische talen is het tegenovergesteld, het uitlijnen van de tekst begint rechts en eindigt links.

Stel dat we opvulling nodig hebben aan het begin van de tag

. In het Engels moet het padding-left zijn: 10px en in Semitische talen moet het padding-right zijn: 10px, in beide gevallen hebben we padding aan het begin van de regel van 10px nodig.

En vanaf hier starten we de methode om een ​​universele stijl voor begin of einde te creëren.

Op een vergelijkbare manier zullen we het gebruiken voor positie, drijvers, opvulling, marge, rand en transformeert CSS.

Hoe te beginnen?

Eerst: maak twee configuratiebestanden _direction-ltr.scss en _direction-rtl.scss.

Voer in het LTR-bestand deze variabelen in:

/ *** LTR-websites *** /
$ direction: ltr;
$ tegengestelde richting: rtl;

$ startrichting: links;
$ eindrichting: rechts;

$ transform-direction: 1;

Voer in het RTL-bestand deze variabelen in:

/ *** RTL-websites *** /
$ direction: rtl;
$ tegengestelde richting: ltr;

$ startrichting: rechts;
$ eindrichting: links;

$ transform-direction: -1;

Ten tweede: maak / update uw hoofd SASS-bestand als een binnenbestand, bijvoorbeeld _main.scss.

Opmerking: Het hoofdbestand importeert niet de configuratiebestanden van de routebeschrijving!

Hoe de routebestanden importeren?

Voeg twee nieuwe hoofdbestanden toe in de hoofdmap, main-ltr.scss & main-rtl.scss.

In elk hoofdbestand @import het juiste configuratie-richtingsbestand + het binnenste bestand _main.scss.

Voorbeeld (hoofd-ltr.scss):

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

Voorbeeld (hoofd-rtl.scss):

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

Uit dit bestand compileert u de twee hoofdbestanden, main-ltr.css & main-rtl.css

Hoe de variabelen te gebruiken?

CSS-aanwijzingen & tekstuitlijning:

Zet gewoon de variabelen in de waarde. $ startrichting voor LTR-talen is links en voor Semitische (RTL) talen is rechts. $ direction voor Engels is ltr & voor Semitische talen is rtl.

lichaam{
  richting: $ richting;
  text-align: $ start-direction;
}

CSS-posities:

Zet in Positionering rechts en links in variabelen volgens uw behoeften.

Voorbeeld:

positie: absoluut;
# {$ start-direction}: 50%;

CSS-marges / opvullingen / randen:

Voorbeeld:

margin - # {$ end-direction}: 10 px;
padding - # {$ start-direction}: 10 px;
border - # {$ end-direction} -breedte: 2 px;

CSS-drijvers:

float: $ startrichting;

CSS Transform: translateX:

Wanneer u met transform werkt, moet u het aantal veranderen van positief naar negatief of vice versa.

Stel dat we box-transformatie hebben: translateX (200 px) in het Engels. We vermenigvuldigen het met $ transform-direction (= 1), in het Engels zou het resultaat 200 px (1 * 200 px) zijn, maar in RTL zou het -200 px (-1 * 200 px) zijn.

Voorbeeld:

transform: translateX (200px * $ transform-direction);

Resultaat

Dat is het! We hebben een eenvoudige en handige methode voor RTL-websites gemaakt.

Een voorbeeld van de code in _main.scss:

lichaam{
  richting: $ richting;
  text-align: $ start-direction;
  padding - # {$ end-direction}: 10 px;
}

zal worden gecompileerd naar in main-ltr.css:

lichaam{
  richting: ltr;
  text-align: links;
  vulling rechts: 10 px;
}

zal worden gecompileerd naar in main-rtl.scss

lichaam{
  richting: rtl;
  text-align: rechts;
  padding-left: 10 px;
}

Samenvatting

Dat is alles, u hebt nu een eenvoudige manier om RTL-websites te gebruiken.

Ik hoop dat je dit artikel leuk vond en van mijn ervaring hebt geleerd.

Als je dit artikel leuk vond, vind je dit misschien ook leuk:
CSS-architectuur voor meerdere websites met SASS

Elad Shechter, Web Developer gespecialiseerd in CSS & HTML-ontwerp en -architectuur, werkzaam bij Investing.com.

U kunt contact met mij opnemen of mij volgen:
Mijn Twitter
Facebook
LinkedIn

Je kunt me vinden in mijn Facebook-groepen:
CSS Masters
CSS Masters Israel