The original address

In English or Chinese web site, we used to the way of reading from left to right, so when they visit websites at home and abroad will find you, whether text or layout, typography is from left to right, and we are familiar with and adapt to the habit of reading, but in the Middle East, there are a lot of countries, such as like Arabic, Hebrew, Their reading habits are from right to left, just the opposite of ours. I have also looked up a lot of Arabic website design, and you can also click on the following website to have a look if you are interested:

  • wam.ae/ar
  • www.emaratalyoum.com/

From the above site, you can see the characteristics of a typical RTL layout site like Arabic:

  1. Text is right-aligned and read from right to left
  2. Typography is all from right to left, and in a product list, the first item on the right is the first item
  3. Arrows mean just the opposite, such as the left arrow for the next frame and the right arrow for the last image in a wheel view

Knowing the characteristics of the RTL layout, we need to consider the following usage scenarios:

  1. How to retrofit existing online scenarios to support RTL layout sites at a lower cost, maintainable, and compatible
  2. For future new scenarios, how to quickly support LTR, RTL layout features of the site in the coding process

Therefore, this paper explores how to use a set of code to support not only LTR layout websites like English and Chinese, but also RTL layout websites like Arabic and Hebrew, assuming the correct information of language copywriting and pictures.

“Amazing” Direction

Dir =” RTL “; dir=” RTL “; dir=” RTL “; This property specifies the basic writing direction of the block, as well as the embedding and overwriting directions for Unicode bidirectional algorithms.

It’s a mouthful, it’s a bit of a fog, and it changes the writing characteristics of some elements, generally speaking:

  1. Define adirection:rtlThe element’s text-align value becomes right if it has not been pre-defined, except if left/center is set
  2. For encodings other than numbers and punctuation, the order is still left to right
  3. Changed the writing order of inline-block elements

Here are a few simple examples:

<style> span { display: inline-block; } </style> <div style="direction: rtl;" >1 2 3 4 5 6</div> <div style="text-align:left; direction:rtl;" >1 2 3 4 5 6</div> <div style="text-align:right;" >1 2 3 4 5 6</div> <div style="direction: rtl;" ><span>This is </span><span>my blog</span></div> <div style="direction: rtl;" This is my blog. </div> <div style="text-align:right;" This is my blog. </div> <div style="direction: rtl;" > .</div> <div style="text-align:right;" > .</div>Copy the code

Display effect:


Does Direction really have everything?

With direction: RTL, it’s safe to assume that websites will be compatible with Arabic/Hebrew/left-to-right layouts. The answer is no. Direction isn’t as powerful as you might think.

On PC web pages, page layout is ever-changing, such as the layout we often use: Flex, inline, floating, absolute positioning and other layout.

I also tested some common layouts:

  1. Flex layout: jsfiddle.net/0srfqgnp/1/
  2. Inline-block layout: jsfiddle.net/t7kn9dap/
  3. Float layout: jsfiddle.net/y0tdv7hn/
  4. Absolute location layout: jsfiddle.net/yopreL9z/

As you can see from the above tests, direction can only change the writing direction of display: flex/inline-block elements, not for float/ absolute positioning layouts, let alone complex page layouts such as BFC layouts, twin wings, grail layouts, etc.

In addition, the direction cannot change the horizontal direction of the margin, padding, and border. That is to say, unless your element is centered, if your element is asymmetric, even if you change the direction and order of the element, the margin-left will still point to the left. It doesn’t leave any space on the right. As can be seen from the diagram below, when the left and right spacing is not symmetrical, direct use of direction will cause a deviation in the effect of our original layout.



General layout design based on direction

Knowing the characteristics and weaknesses of Direction, how do you build a general layout around it?

From the above analysis, for the lack of layout/spacing flipping ability, we can do post-processing of CSS to achieve the desired effect. For example, you can search the module RTLCSS on Github. Its principle is to process CSS files. For example, change left to right in the CSS property, and right to left.

With this ability, you can easily change the direction of writing, whether it’s float/ absolute positioning layout or margin/padding spacing. Here’s a simple example:

.test {
    direction: ltr;
    float: left;
    position: relative;
    left: 20px;
    margin-left: 100px;
    padding-right: 30px;
}
Copy the code

The CSS processed by the RTLCSS module becomes:

.test {
    direction: rtl;
    float: right;
    position: relative;
    right: 20px;
    margin-right: 100px;
    padding-left: 30px;
}
Copy the code

The layout of most scenarios can be handled well with this processing, such as simple comparison of layouts such as absolute positioning:


After RTLCSS processing page effect:


The above is based on the direction layout scheme principle, of course, it also has some shortcomings and worthy of consideration:

First of all, this is for CSS, that is, the initial presentation of the page, but JS can’t do anything about it. For example, in a rotation diagram, JS controls the next frame of the image, generating additional compatibility code in different LTR and RTL layouts.

Second, it can’t handle styles embedded in HTML tags. For example, we could write code like this in the React component:

function SomeComponent({ isSomething }) {
    return <div style={{ marginLeft: isSomething ? 20 : 10 }} ></div>;
}
Copy the code

Writing like this will change to class based:

function SomeComponent({ isSomething }) { const cls = classNames({ marginLeft20: isSometing, marginLeft10: ! isSometing }) return <div className={cls}></div>; }Copy the code

This part of the content can be avoided by using the specification to write inline styles, and can be modified by using the re to change and replace the style.

The third thing that needs to be considered is the icon library. The above problem solves the layout and text typesetting problems, but for ICONS, it is only the movement of layout. According to the content of Google’s Material Design chapter on bidirectional nature, some ICONS need to be flipped, while others need not, for example, the left and right arrows, The meaning in different layouts is different, so for RTL layout, we need to redesign a font library for RTL layout, to really bring localized experience to users who use Arabic, Hebrew, etc.

Fourth is the need for more fine-grained control, because not everything in RTL layout is necessarily typesetted from right to left, and we need the ability to ignore certain modules in the overall RTL page so that it remains in left-to-right order.

How do I do this part? You can add /* RTL :ignore */ to the CSS files of modules that do not need to be flipped, and then make the modules like RTLCSS ignore the processing of the module, so that the module remains in the RTL layout.

In the process of actual implementation, there will be more problems, such as: CSS naming rules (directly add -RTL or other to ensure non-overwritten release), or how to deploy and publish CDN, and a series of engineering practice issues, I believe that in the near future, after the implementation of practice will produce the best engineering practice scheme based on direction general layout.

“Magic” transform mirror flip

After the introduction of the direction-based layout scheme, a set of code is compiled into a set of HTML, multiple sets of CSS, and a set of JS files, which can be accessed by users in different countries. Is it possible to generate a set of HTML, CSS, JS files for users to access from a set of code? Listen to the breakdown below.

CSS3’s transform property is used by front-end engineers. ScaleX (-1) allows the page to be flipped horizontally along the central axis

By flipping horizontally, the original LTR layout page:


When flipped horizontally, it becomes an RTL layout page:


And it’s layout compatible. Unlike changing direction, you don’t have to worry about your layout: Flex/float/absolute positioning, etc., can go from LTR layout to RTL layout nicely.

It solved the layout problem, but also introduced a new problem, that is, the text, pictures and other information are all reversed, so we need to reverse the text in the text part, for example, add transform: scaleX(-1) on the text container, so as to maintain the correct writing order of the content.

Based on this idea, a scheme design to achieve RTL layout through transform mirror flipping emerged.

Design of universal layout scheme based on Transform image flipping

Through the mirror inversion of transform, the problem of layout inversion can be solved well. My idea of designing general layout based on Transform is as follows:

First, write a NPM module. It is a React component. When using it, you need to import its CSS files and JS components.

If pages require support, add global rollover to Arabic pages:

// xxxxx/index.css
html[lang="ar"] {
    transform: scaleX(-1);
}
Copy the code

Then consider only the parts of the page that don’t need to be flipped: text, some images, some ICONS, etc.

These elements can be wrapped with the React component as follows:

import{ NoFlipOver } from 'xxxxx';

function SomeComp({ title, imgUrl }) {
    const comp1 = <NoFlipOver>
        { title }
    </NoFlipOver>;
    const comp2 = <NoFlipOver>
        <Icon type="clock" />
    </NoFlipOver>;
    const comp3 = <NoFlipOver>
        <img src={ imgUrl } />
    </NoFlipOver>;
    const comp4 = <NoFlipOver>
        <SomethingYouDontKnow />
    </NoFlipOver>;
}
Copy the code

With this kind of lightweight intrusion code, developers don’t have to worry about flipping logic, just wrap up the pages that don’t need flipping. What we need to do is write a generic React component that doesn’t flip. For example, if the React component receives a text, it can do something like this:

// xxxxx/index.js const NoFlipOver = function({ children, ... props }) { if(typeof children === 'string') { return <span { ... props } className="no-flip-over">{ children }</span>; } } // xxxxx/index.css html[lang="ar"] .no-flip-over { transform: scaleX(-1); }Copy the code

For text processing is simpler, just through the span tags package (assurance text aligned to the right, if is left-aligned originally, such a simple word processing component is complete, of course, that is just a simple example, in the design of general layout React when container components must need to consider all aspects, I can only produce more experience after I put it into practice.

Based on this idea, the display form of the page module can be well and more fine-grained. The contents that need to be flipped need not be processed, and the contents that do not need to be flipped need to be wrapped with a React container component, so as to achieve the adaptive LTR/RTL layout effect of the page.

The general layout scheme based on the direction/ Transform mirror inversion is introduced in this paper. The advantages of the transform mirror inversion scheme over the direction scheme are discussed.

First of all, it is not only for CSS display effect, because the whole page is flipped along the center axis, margin-left in the browser understanding is to the right, so the transform scheme is compatible with JS logic, that is, there is no need to modify THE JS logic, While the direction scheme is only for CSS, JS logic needs to be adjusted for compatibility.

Second, it can directly use a set of icon library, a set of pictures, need to be flipped without processing, do not need to be flipped using NoFlipOver wrapped. For example, a separate banner like this:


After the mirror image is flipped, it becomes:


If you are using the direction scheme, you need to prepare two sets of images (of course, you also need to prepare two sets of images if they are not separated).

Third, it does not need to consider a series of engineering issues such as CSS naming and CDN deployment, because it is a way of demarcating CSS scopes and isolating adaptation for LTR/RTL layouts.

Fourth, the embedded style transform scheme is also compatible, while the direction scheme is for CSS files and requires additional work for HTML files.

The transform scheme has some advantages over the Direction scheme. Here are some disadvantages:

First, it needs to transform our existing business scenes and invade business codes. That is to say, if your scenes are relatively scattered and the reuse rate of common modules is low, then each scene needs to be individually modified and adapted when using transform scheme. Of course, if your scenes have many common components, Modifications to common modules can be easily reused across scenarios, so the one-time cost is relatively easy.

Secondly, some page rolling components need to do additional compatibility operations. Through my practice, I found that there are some problems in the rolling components after flipping. I initially believe that the flipping brings some highly attribute value changes.

Finally, the impact of direction and Transform schemes on performance should be taken into consideration. Factors such as higher rendering cost and lag in complex pages should be taken into consideration.

conclusion

Through the use and analysis of the direction/ Transform attribute, this paper designs two LTR/RTL general layout schemes with different ideas. The two schemes have their own strengths and weaknesses.

Before starting to prepare for the transformation, it is best to confirm with UED the design specifications of RTL layout to avoid the wrong visual deviation caused by subjective cognition, so as to provide users in the Middle East with a more localized experience. There are also design specifications for bidirectional page layout, which can be taken a look if you are interested: MATERIAL DESIGN – Bidirectionality

Finally, according to the choice of different business scenarios, the use of appropriate general layout scheme can effectively reduce development and maintenance costs.