Author of this article: Reading front end team

This article is produced by a member of YFE, please respect the original, please contact the public account (ID: yuewen_YFE) for authorization to reprint, and indicate the author, source and link.

The full text and the digital information in the picture are not true, only for technical demonstration reference ~

Some time ago, I assisted to complete the writer’s inventory activity, and designed the visual draft given to me as shown below. When I first got the manuscript, I thought it was a simple routine activity, but actually there were a few twists and turns in the process of finishing this activity. I also learned some knowledge points about vertical typesetting in this process. Now I will describe the process of doing this activity and explore the mystery of vertical typesetting together

Text vertical 🤔, immediately thought of using writing-mode, change the direction of text display

It’s known as writing-mode

Writing-mode adjusts document flow from horizontal to vertical

Take a paragraph of text in the P label as an example, add writing-mode: vertical-rl to it, and the effect of vertical text arrangement as shown in the figure below can be quickly realized

Example code for the P tag is as follows:

<p class="text-vertical">Love to communicate, love to be alone</p>

.text-vertical {
  writing-mode: vertical-rl;
}
Copy the code

Open source links

A page basic layout down, you can see the page effect and the design draft is still different 😔, specific in the red box line as shown below; The numbers in the red box are displayed “upright up”

Feel the page restore display is also innocuous, so take the contrast map to find a design to communicate greatly; However, the design largely adheres to the digital display effect on the visual draft, in order to better convey the key information in the activity (users can quickly see the data without rotating the phone or side head).

When I was trying to make it better, I consulted Mr. Zhang, who suggested that text-orientation: Upright could be gracefully lowered to show non-vertical effects, even if it was an inferior machine

We consulted the product about the proportion of models used by the product. The proportion of poor models is very low, and the product also accepts the degraded effect of low-end models, perfect 💯

Under the guidance of Teacher Zhang, I specially studied the content related to text-orientation attributes

Some of you know “text-orientation.

Text-orientation: Upright (with writing-mode set and horizontal-TB not set)

From the previous example, add Text-Orientation: Upright to make the numbers stand upright. For the upright effect, look at the numbers in the red line in the image below

Sample code for the P tag is shown below:

<p class="text-vertical">999Diary,12356Swastika < /p>
.text-vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
    -webkit-text-orientation: upright;
  }
Copy the code

Open source links

After the adjustment, the activity is basically completed and the activity enters the testing stage. After the activity was tested, the test casually mentioned “The date seems a little inconvenient”.

The test was just a passing remark, but I took it to heart and wondered if it was possible to optimize the date display. It happened that the nature of Text Uneven-upright could make this kind of vertical and horizontal combinations possible

Fewer people know text-combine- Upright

Text-combine – Upright, which shows 2-4 characters horizontally, is perfect for horizontal display of dates in vertical composition

The red line in the image below shows the horizontal combination of the dates after the addition of Text – Combine – Upright: All, and the word “10” is combined to make it easier for readers to pick up text quickly

See the sample code below:

<p class="text-vertical">
  <span class="upright-combine">10</span>month<span class="upright-combine">1</span>Day time diary online</p>
Copy the code
.text-vertical {
   writing-mode: vertical-rl;
   text-orientation: upright;
}
.upright-combine {
   /* for IE11+ */
  -ms-text-combine-horizontal: all;
  /* for Chrome/Firefox */
  text-combine-upright: all;
  /* for Safari */
  -webkit-text-combine: horizontal;
}
Copy the code

The specific operation steps are described as follows:

1) Wrap a label around the element to be merged

2) Add Text -combine- Upright: All

The text-uneven-upright attribute supports both keyword and numeric values. Considering the incompatibility of numeric values, the word all is used here

3) Compatibility processing, compatibility processing for Internet Explorer and Safari (support Internet Explorer 11+), instructions and codes are shown below:

While Internet Explorer uses -ms-text combine-horizontal, while Text -combine- Upright Safari uses -webkit-text- Combine, Only none and horizontal attribute values are supported

The actual code snippet in the project is shown below, which can be compatible with the mobile terminal project. The date display is optimized!

.upright-combine {
  /* for IE11+ */
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
  /* forSafari */
  -webkit-text-combine: horizontal;
}
Copy the code

Note to Text -combine- Upright

  • Only used for horizontal merging of 2-4 characters, such as date, year, etc
  • Because numeric values are not compatible, the content to be horizontally merged needs to be wrapped around the label

At this point, the activity successfully completed and online, in the process of completing the reform activity is not overnight. As for the realization scheme of digital vertical typesetting, some other schemes have also been practiced in the middle, which may have reference value for everyone to realize similar scenes in the future ~

Other solutions for digital vertical typesetting

At first, WHEN I was considering the realization of digital vertical typesetting, I practiced other schemes, and I would like to share them with you

1.JS segmentation method

JS cuts all the text information into a single label, and takes the single text content as a block element. At this time, it is not necessary to set the writing-mode, but directly set the maximum width of the outer paragraph text to 1EM, so as to achieve the effect of vertical content + vertical number

The core code is as follows:

function text2html(element) {
  var treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
  var node;
  let list = []
  while ((node = treeWalker.nextNode())) {
    list.push(node)
  }
  // Plain text node array traversal
  list.forEach(function(node) {
    // Plain text node cutting, replaced with span tag
    var replaceArr = node.textContent.split(' ').map(function(str) {
      var newSpan = document.createElement('span');
      newSpan.textContent = str;
      returnnewSpan; }); node.replaceWith.apply(node, replaceArr); })}Copy the code

JS segmentation method, all text content is divided into a single label, the scheme is simple and crude, may increase the difficulty of style layout, there are potential risks, so this method is not adopted in the end, but it is more suitable for local individual copy processing, bottom display or low-end model processing

2. Convert the half corner to the full corner

When the number is full corner, when it is displayed vertically, its display effect is similar to Chinese, which is naturally “upright upward”, so half corner number can be turned into full corner number

The following is an example code for converting a digital half Angle to a full Angle:

// Digital half turn full 0-9 corresponds to half Angle 48-57, and full Angle 65296-65305
function ToDBC(txtstring) {
    var newNumber = "";
    for(var i = 0; i < txtstring.length; i++) {
        if(txtstring.charCodeAt(i) <= 57 && txtstring.charCodeAt(i) >= 48) {
            newNumber = newNumber + String.fromCharCode(txtstring.charCodeAt(i)+65248);
        } else {
            newNumber = newNumber + txtstring.substring(i, i+1); }}return newNumber;
}
Copy the code

Digital half Angle to turn the whole Angle method seems very perfect, but the subsequent have what don’t need extra consider whole Angle, and it comes to some calculation figure, also need to turn the whole Angle half Angle (the Angle of digital cannot be directly involved in the logic operation), to show the whole Angle, to handle more complicated, so finally didn’t select this technology solutions

Digital “upright up” scheme summary

  • The CSS text – orientation
  • Violent deconstruction of DOM
  • Adjust the number to full Angle

If you have other good thinking Angle or solution about the realization of digital “upright up”, please share with us

The final summary

  • Vertical layout can be quickly realized by writing-mode
  • For numbers that need to be upright, use the Text – Orientation: Upright method
  • Date characters (2-4 characters) can be optimized by horizontal combinations of the Text – Combine – Upright attribute

New writing, if there is any legacy, mistakes, welcome to correct. Also welcome to have the same friends to discuss the research ~ ~ ~

Refer to the link

  • Horizontal combinations of characters using CSS Text-combine – Upright
  • text-combin-upright
  • Full Angle and half Angle
  • writing-mode
  • text-orientation