I have worked for so many years, I have never thought of recording anything, learning anything and being good at anything. Today, I am free and have nothing to do. I come here to touch fish and paddle water and record my work today.

When it comes to the font – face, may be is to make people think more UI icon, do a like SVG, scalable, custom color, and light weight, can solve common scenarios icon file is too big, today to share with the same actually, I’m not just for icon shows that it really used to deal with the content, the principle is the same, The requirement is to make whitespace visible. Online exploration for a long time, there are very few cases of this kind of sharing, so today I will share this small skill zhan Pit.

demand

Editor toolbar adds control over the display of invisible characters in the content area, similar to the display of Spaces and TAB characters in major code editors

After the function is enabled, it is displayed as a small dot

background

We are the Internet software development of translation industry, facing the customer groups are translation companies or translation departments of companies, or students who will step into the translation industry. People in the translation industry pay much attention to the original text or the content of the translation, and the quality of the translation output is directly related to the work efficiency and cost of the next process. In order to protect the eyes of the translator and make the translation more accurate, we need to visualize some invisible characters, such as the space character.

To explore the solution

VS Code

VS Code can set the display of whitespace, it is directly replaced by new characters, the original whitespace is normal & NBSP; Replace the content with new ‘·’ characters and add styles after mouse strokes or functions are enabled. The specific processing logic is not explained too much (because the explanation is not clear, it involves the entire render mode of his editor ^ v ^).

Language Tool

Languagetool’s demo site has a similar example, but can’t take a screenshot because I forgot the url. They take a DOM node-based analysis, drawing an extra canvas to cover the characters. The difficulty of this scheme is to achieve a set of accurate calculation scheme based on character position. This scheme can also achieve many unexpected effects, such as underline words, word error prompt and other effects.

The solution

Because we now translation editor function already very complicated, for the control of the translation and processing is also tedious, beyond imagination can’t because of the small demand continues to adopt the way of operation characters in VS Code to do this, because involves to the content of replace, switch rendering, tag, content changes again, search after matching color coded and content style overlay, Delta iteration fixes and so on.

The disadvantage of the Language Tool scheme is that the scheme itself is complex to implement and there is a delay in the markup floating on the literal as the page scrolls, like this somersaulting cloud tail. It’s not elegant in the end.

So please come to today’s protagonist @font-face custom font.

  1. Create a Font using the Font Creator Program
  2. The front end uses @font-face and the definition uses fonts
  3. Use a custom font-family reference on the desired node

Font, pick out some invisible characters, to redraw, character set for some don’t need delete directly, here we will space character painting into a small dot, method is simple, direct selected open canvas, dragging on the left side of the material on the canvas, you can use these raw material draw shapes, such as Chinese characters, (PERSONALLY, I guess it is not the actual situation, but will abstract out various five-stroke structures, the final combination, need to draw various horizontal strokes and vertical strokes and radicals, is also a guess.)

Since there is only one place to use this switch display, reference the exported font file directly in the code. Since only space characters are drawn in this font production, the valid character range of this font can be limited by Unicode-range, and the rest will be rendered by other fonts in the system. For unicode-range, please refer to here for the optional steps

Other uses:

Font shows the price of some e-commerce sites show used to confusion, electricity between developers is the most annoying crawler from around the world friends to patronize, fetching commodity information, price information, analyze the other product price trends, and a once available preventive measures is digital fonts deliberately disrupt regularly, such as will as 8, 4 as 1, The original page shows the price of 81, but in fact the data capture is 14, as long as the user sees the right line, in fact, the content of the web page is always changing the price, which can disturb a group of crawler players to a certain extent.

The next article I’m working on will show you how to implement a fast internationalization solution for Vue projects so that Vue based projects can be translated in real time so that both developers and translators can see page translations in the DEV environment in real time.

The above are some personal ideas, I hope you tolerance correction.