Web design (web designs) Space processing method

Article Description: believe that you have done a web design, or attention to the page design peers are not unfamiliar with the "space". "Space" belongs to a kind of detail, it is easy to ignore, but also compare effect, more trouble is very bad control. The idea of summing up the question comes from "knowing" the question from the upper sea and reflecting and summarizing his professional answers.

Believe that you have done a web design, or attention to the page design peers are not unfamiliar with the "space". "Space" belongs to a kind of detail, it is easy to ignore, but also compare effect, more trouble is very bad control. This question sums up the idea of coming to ...

Believe that you have done a web design, or attention to the page design peers are not unfamiliar with the "space". "Space" belongs to a kind of detail, it is easy to ignore, but also compare effect, more trouble is very bad control. The idea of summing up the question comes from "knowing" the question from the upper sea and reflecting and summarizing his professional answers.

As far as the question is concerned, I am still firmly "no space" faction, I do not deny the "space" after the effect of ascension, but can not completely solve the problem, both pros and cons. Since the effect is not very satisfactory, I think the meaning is limited in terms of workload and maintainability. Or even more pessimistic that, to achieve the perfect effect, you must manually adjust, there is no perfect controllable program logic. The reason is like the book typesetting, the true typesetting excellent good book, all is one page of manual customization, the typesetting effect must follow the content to go.

This issue in professional web design, I think can be categorized in "content typesetting", and the user experience "readability" directly related. The graphic design seems to be called "typography", and I think the same should be measured by "readability" metrics. But under the principle of Web page composition, I think that in the Web page, the space affects not only "content typesetting", but also "page layout" problem is also typical. "Content typesetting" mainly refers to the content level, "page layout" mainly refers to the structural level, the bottom separate to discuss.

Spaces for content typesetting

At present, the content of the Internet, Chinese and English are very common, and can be magnified as "Chinese and Western text mixed row (their basic only in English, so the follow-up are written" Chinese and English mixed Row ")". Not only the use of English words, all kinds of English terminology and abbreviations have been fully integrated into the lives of ordinary people. Especially in the information explosion of the Internet, this problem performance is more prominent.

I first saw and write the Chinese and English content, all are connected to write, will not consider adding spaces. Later, in some very professional website found that there are in Chinese, English plus space between the argument, especially translation over the technical Reference. It is easy to think that this way of writing is to better distinguish between different languages, so as to avoid the reading of "adhesion" barriers, add space after really greatly enhance the "readability." (Lianghai more professional views of the original "text" at the junction should be a smooth transition, as far as possible to meet the needs of both sides of the text, and let the rhythm of the text as smooth as possible. ”）

But at the same time I found that the impact of "mixed in Chinese and English" effect of many reasons, in the web design is not only "plus space" means to optimize. For example, change the font, because in the computer system, the choice of English is actually much more than the monotony of the Chinese "song Body". Different English fonts, not only compare the size of Chinese, and the distance between the adhesion is not the same.

Around 2003, my most commonly used font is Arial, Tahoma, Verdana, the same font size can be found, Arial smallest and Verdana largest. So in our understanding at that time, the Chinese and English mixed row best use Verdana, if remember the Microsoft official website used at that time is, I specially to some foreign-language website authentication.

2005, I began to read a lot of blog, I found that the WordPress default style of "Chinese and English mixed row" effect is good, after checking that people are using Lucida Grande font, since then I began to consciously focus on "mixed in Chinese and English" effect of a good personal blog in order to extract the "readability "Better fonts, this thing is going to be a hassle if you want to experiment yourself." But please note that at that time WordPress actually not many people use, not even movable type of users.

In fact, at first I tried to add space to both sides of the English, but it was really troublesome. And there's a detail I don't know if anyone has noticed that some fonts (which are not thoroughly tested) define the width of the "space" because the left side is Chinese or English instead. That is to say, to add a space on both sides of a word, the left side will appear wide, right narrow effect, which I can not accept. And after the "font" to solve the way of thinking, more completely abandoned the "add space" idea. In the future, we have met the Helvetica, Calibri, and so on, so excellent fonts, so it is more than sufficient.

As far as fonts are concerned, there is a lot of learning, as well as the readability factors of sharpness and lining, and there may be differences in the performance of different client browsers. For example, I know that the underline of different fonts will also affect the readability, the Tahoma underline is close to the text. Here only to talk about space, I am not professional research, all the conclusions are out of practical experience. At present my personal website uses is Calibri, personal blog or Lucida Grande, I think the mixed row effect is good.

The figure is just an example, different size, browser and other objective conditions may affect the effect.

Space for page layout

The space of the structure level is mainly in the HTML structure code, many times we need to do the interval for the content of different tags. My practice before, is a natural space, is in the HTML code to typing a space. But slowly I found that the first is not easy to do pixel-level precision control, the second different clients under the space width resolution inconsistent, which is very important for cross-browser compatibility. And I quickly realized that the short grid in the code did not conform to the principle of "structure, performance" separation. So, then I put all the need "space" effect of all the content with the margin definition of CSS to solve, want to empty, want to empty how much can be changed at any time.

Soon the problem came again, and there were usually no spaces in the High-fidelity prototype, but the test prototypes of the research and development engineers did. This is because in the client code, a newline is a space. Engineers tend to be less aware of the application-tier development and are usually free to see the code for convenience. There is also a kind of situation is possible to use some kind of control or special statements, and even can not find out the situation, this kind of thing I also encountered a lot.

Of course, this trivial detail problem, often do not put a high priority, but more effective effect. In fact, there is no solution, you can use the CSS statement word-spacing:-3px, to define the void, through the local control flexible response, the effect of the recent trial is quite good.

Back to the previous "content typesetting" issue, as Lianghai, through the structural layer of the unified approach to the English tag, such as <span lang= "en" >manual of Style</span>, I think it is undesirable. The first is too troublesome, the second theoretically can use JS direct judgment in English and Chinese. In general, I think it is a little superfluous to control the English language in "content typesetting" alone.

DT inside the contents of the mark without space, with margin precise control.