1 the introduction

The Belt and Road Initiative is actively promoting China’s internationalization process, and front-end websites are also facing unprecedented internationalization challenges. So how can we respond positively to the “One Belt and One Road” strategy and promote the internationalization of the website? Start with an international layout.

This week’s closer read: New-CSS-logical-properties, a new CSS technology that enables internationalized layouts.

CSS Logical Properties is a new CSS layout scheme. Yes, like Flex and Grid layouts a few years ago, CSS Logical Properties has unsurprisingly been blocked by Microsoft:

It doesn’t matter, we’ve survived both Flex and Grid. Proxy is not supported by Microsoft yet, but it’s supported on Edge. CSS Logical Properties can be used in foreign environments for the first time, and will be used in Korea after Edge is supported or phased out in a few years.

2 an overview

The old box model told us the four directions left, right, up and down, but in the new model, remember inline-start inline-end block-start block-end:

(LTR) corresponding relationship is as follows:

  • Left:inline-start
  • Right:inline-end
  • On:block-start
  • Bottom:block-end

These apply to the margin padding border modifier, such as left -> left -> inline-start -> margin-inline-start in margin-left

This is a bit like introducing the coordinate system concept into the layout. For different countries, inline and block directions are different:

  • In the vast majority of east Asian countries, Anglo-American countriespadding-inline-start = padding-left
  • In Arab countriespadding-inline-start = padding-right
  • In Japan,padding-inline-start = padding-top

Based on the reading order of China and Anglo-American countries, Arab countries turn their web pages upside down, while Japan turns its web pages 90 degrees clockwise.

Why inline means left or right and block means up or down? Remember display: inline? The layout is left to right, whereas the display: block layout is top to bottom.

Wide high

The width height should also be inline-size and block-size.

  • width: inline-size
  • min-width: min-inline-size
  • max-width: max-inline-size
  • height: block-size
  • min-height: min-inline-size
  • max-height: max-inline-size

Here’s a comparison of Box Model versus Logical:

Absolute positioning

For absolute positioning attributes top/right/left/bottom

  • top: inset-block-start
  • bottom: inset-block-end
  • left: inset-inline-start
  • right: inset-inline-end

Remember in the same way as the upper, lower, left, and right tables, preceded by the inset prefix.

Although it’s complicated to describe it this way:

.popup {
  position: fixed;
  inset-block-start: 0; /*top - in English*/
  inset-block-end: 0; /*bottom - in English*/
  inset-inline-start: 0; /*left - in English*/
  inset-inline-end: 0; /*right - in English*/
}
Copy the code

But this attribute supports aggregate writing:

.popup {
  position: fixed;
  inset: 0 0 0 0; /*top, right, bottom, left - in English*/
}
Copy the code

Float

For two values of float, it is easy to infer that they will be replaced by inline-start and inline-end (LTR) :

  • float: left = float: inline-start
  • float: right = float: inline-end

Text-align

Text-align also has left right attributes, which are replaced by start end (LTR) :

  • text-align :left = text-align: start
  • text-align :right = text-align: end

Css Grid and Flexbox

Web pages using CSS Grid and Flexbox layout schemes will automatically enjoy international layout adjustments on supported browsers without requiring syntax changes.

Writing-mode

So far, we have seen the normalization of typesetting in Css. Grid and Flexbox do not need to be changed due to their new API definitions. The old display, position, width, height, float apis need to be semantically modified.

Now comes the key international part of the layout. The web pages we’ve encountered so far are top-down, but other cultures are different. The entire page layout can be changed by configuring the writing-mode:

Writing-mode: horizontal-tb = Top to bottom Writing-mode: vertical-rl = right to left for example, Japanese writing-mode: vertical-lr = left to right for example, Mongolian

I haven’t seen a bottom-up web page yet, which perhaps proves that bottom-up is the least reasonable way to read.

Direction

This is a typesetting property, where writing-mode controls the orientation of the page and direction controls the alignment of text.

Currently there are only two configurations: RTL and LTR:

html {
  direction: rtl;
}
Copy the code

If the layout of a page is vertical-rl – right to left, then the LTR of direction is the same as top to bottom.

Finally, there are some unanswered questions, such as how to turn on smart layout? One way is:

html {
  flow-mode: physical;
  /*or*/
  flow-mode: logical;
}
Copy the code

In addition, in @meta configuration, max-width should be replaced with max-inline-size, line-height should be replaced with line-size, border-width should be replaced with border-size, etc.

3 intensive reading

The Logical Properties specification as a whole appears to be an irreversible trend and represents a global effort by the W3C specification in typography.

Why change grammar

The first problem is that the left top right bottom syntax we’re used to needs to be changed to a slightly more obscure syntax like inline-start block-end, and as you can see, the new syntax is exactly one-to-one equivalent to the old syntax, That is, it can be handed over to a conversion program!

As you can see, this is a matter of habit. The W3C wanted to reshape the semantics of the internationalization layout, and the original left top and others could not support these semantics, so they had to be changed.

The new specification requires developers to make an abstraction that abstracts their country’s habits into habit-independent descriptions. However, for every front-end practitioner, the description of left Top has become muscle memory, and it is difficult to change the specification. In the future, the front-end community may have three solutions:

  • Conservative – Use Babel to map old syntax to new syntax on a one-to-one basis, for exampleposition: left -> position: inset-inline-start. This solutionMinimal cost and no change in developer habits, so it is most likely to be adopted first by domestic companies. The biggest resistance to pushing something in a business environment isThe cost of 与 consensusThe layout specification touches on both points and may tilt the team towards being conservative.
  • Compatibilist – Duplicity, using Babel for mapping is the same as conservatives, but new code is recommended to be written in a new syntax, and if someone on the team does not follow the new specification, the tool will automatically convert to the new specification. This kind of soft requirement will result in two sets of team layout code, but the final effect is no magic effect. In the long run, it is not good for maintenance, but it is a relatively compromise strategy.
  • Reformers – Use scripts to replace old specifications with new ones in a project and have the team’s future code follow the new layout specifications. Obviously, this faction takes advantage of the small cost of migration, but does not take into account the customary cost of migration of the human factor. How to persuade others to understand the new norms and make “colleagues who join in the future” agree with and follow the new norms is probably the biggest uncertainty.

Why doesn’t Flex Grid syntax need to change?

The change is aimed at culturally obvious syntax such as left, right, width height.

However, Flex syntax already translates the direction definition to abstract start and end, while center is unambiguous, so FlexBox syntax remains unchanged.

Grid is a syntax for breaking up cells and does not involve specific descriptions of the top, bottom, left, and right, so it also fits the internationalization semantics.

4 summarizes

So why didn’t the W3C change the syntax until now? Didn’t it occur to you before? Maybe that’s true, either because of the cost of promotion, or because the stage of civilization didn’t realize that cultural differences lead to different layouts.

When Logical Properties appear, human globalization extends beyond the translation dimension to other dimensions such as layout.

In addition to the layout needs to be international, the habit of using numbers also needs to be international, can read this extension article and The European people to deal with must know their number writing, otherwise suffer a great loss! .

So what dimensions of internationalization strategy are there besides these? In addition to language translation, what else needs to be prepared for internationalization? Leave a comment below.

The discussion address is: Close read Internationalized Layout – Logical Properties · Issue #121 · DT-fe /weekly

If you’d like to participate in the discussion, pleaseClick here to, with a new theme every week, released on weekends or Mondays. Front end Intensive Reading – Helps you filter the right content.