Goto: A discussion of vertical grids and CSS baselines

Web design layout has been relatively popular grid alignment, but only for horizontal alignment, little or no vertical alignment, this article explains in detail the vertical grid, and even the baseline of its relevance, and CSS3 in the multi-column layout also makes it more important, so it is necessary to understand learning, At least it's a thought. This may be due to the lack of understanding and appreciation of the baseline grid, or because the baseline grid is so difficult to implement, that so far no one has been able to achieve it successfully with a blueprint. Some people even think that the baseline is redundant on the web, the baseline as a typographic term and behavior on the web, and the rules that follow on the web are different from the dismal differences between line-height and true line spacing, which are the most obvious examples. For now, anyway, let's assume that the baseline is, at least to some extent, a useful tool for web designers. But what kind of tool is it, in our hands, what free tools are available to implement it, and most importantly, whether it's worth it.

<ignore_js_op>

Vertical grids and pattern recognition before the light shift of mathematical calculations and alignment to achieve baselines, it is advisable to understand their fundamental nature: vertical grids. When it comes to understanding why, there is a good deal of preparation and a greater incentive to tackle the problem of how to achieve baseline alignment, which is sometimes tedious and fascinating. The vertical grid, which can be easily understood as involving the spacing between the structure height and the vertically arranged elements, is perhaps more generally the padding (padding), margin (margin), and row height (line-height). Just as the horizontal grid achieves a neat and harmonious effect by constraining the layout with a predetermined unit size, the vertical grid also provides fixed structure content with consistent, predictable measures when the user rolls down.

<ignore_js_op> grids are not only useful in the horizontal direction, but also in the vertical direction

Why is vertical grid important? Because vertical grids are related to how our brains work, and how we interpret the world around us through pattern recognition. Even if you don't go into this topic (and other people who are smarter than me), it can be said that pattern recognition allows the human brain to store similar or identical impressions (such as basic shapes and colors) in a pattern library, and to quickly analyze it with new stimuli in the context of a pattern library search. This is why we do not pay attention to when reading a separate letter, but in a blink of an eye to recognize the whole word (from the memory of our brains to take out the previous example of the same pattern), which is also why we can quickly recognize the letter ("a" "B" "C" ...) , even if the font, size, and color change--Its basic shape is stored in the pattern library of our brains.
Once any type of stimulation does not match the pattern you previously stored, it will prompt the brain to deposit new patterns into the new memory, which in turn requires more mental exertion-and this is what makes the structure and grid (both horizontal and vertical) important, and next, imagine a simple layout with a consistent paragraph spacing of x. After the first analysis, as in the same pattern, your brain will immediately recognize all the other identical passages. But if, on the contrary, the elements in the same layout have different spacing, the reader's brain must analyze all the independent elements to understand what they mean. In another sentence: the more shapes the brain needs to analyze, the longer it takes.

<ignore_js_op> irregular left-hand requires more mental energy than the right

Any irregular shape will break out of the flow-like pattern recognition (and thus waste part of the mental activity that should be used to appreciate good content), and a regular, consistent, and predictable structure will make your design more readable and understandable to your design. The establishment of a fixed baseline grid is a good way to implement it.
In addition, through the basic one each vertical (and horizontal) spacing is consistent, each element has a predetermined unit size of the system not only eliminates the above arbitrary inconsistency, but also makes the designer's work easier, designers simply in the general framework of the general decision of the basic structure. Establish a standard, for example, there are always two baseline white spacing under the head, each box has three baseline space padding, add logic in our layout, this is not only easy to design, easy to implement, more important is easy to understand.
Now, if the vertical mesh is also like an abstraction, another advantage of the baseline-Multiple columns horizontal alignment-is easier to understand. This is more common in print design, especially in magazines and newspapers, often using multi-column layouts, adjacent paragraphs (or heads) destructors lines are well-aligned to make reading immersive and cheerful, once the alignment is not good or no alignment reading is annoying interrupted. This quiet layout, derived from baseline alignment, shows a sense of visual confidence, and an invisible stent supports all elements of the page, giving the reader a subconscious sense of relief. A left-handed page with each line aligned to the right-hand page is easy to sense trust, whereas the trust is relatively small in the case of a fundamentally aligned book.

<ignore_js_op> multi-column horizontal alignment

Line-height's Problem
Traditionally, baselines refer to an invisible line on which most letters are "located", forming a basic baseline grid between each baseline, as discussed previously, where the baseline not only forms a vertical mesh, but also aligns the adjacent columns horizontally. Once the baseline grid is defined, the next thing to do is to force all element alignment so that lines of text, borders, pictures, or box elements are always aligned to the same vertical structure.
The problem is that, like in InDesign, you can easily adjust the shape to align the grid by clicking the button (accurate opening and closing the grid), corresponding to the CSS only by adjusting the row height (line-height), padding (padding), margin (margin), Size-Any change can cause a change in the total height of the element.

The <ignore_js_op> traditional baseline is that most of the letters are "situated" on their line, and the height between the baselines is the total height of the elements.

Worse still, the Line-height attribute in CSS does not have a strict baseline concept, and each line of text is roughly in the middle of the total height of the element. This means that precise alignment (baseline alignment) of text based on different styles and fonts requires further manual, time-consuming adjustments, and pixel-level nudge.
So how do we begin to implement the baseline of CSS? Because of the lack of native baseline syntax, fast-in-place or forced vertical alignment of the browser's functionality, we leave it to the next experiment. Let's start with the most basic CSS method.
A good approach: basic CSS baselines
So far, there is no uniform right way to achieve CSS baselines, some people just make the line height and spacing following a set of specifications are satisfied, others are more production and meticulous-no matter how--only each line of text is beautiful "located" on the baseline, picture, border, The box and other elements are perfectly aligned to the same mesh to satisfy. The good news for everyone is that the basic CSS baseline is really not hard at all. With some pre-design decisions (and persistence), they only require a little bit of basic math.
Define your baseline, preferably starting with the smallest text you use, most of which is your body text, based on which to calculate. In my example below, I use 14px font-size with 22px line-height, which is 22px is the height between my baselines. The result of this definition is that all line-height and the total height of all elements (including border, padding, and margin) must be multiples of 22px, as follows:

H1 {
font-size:40px;
line-height:44px;
margin-bottom:22px;
}
p {
font-size:14px;
line-height:22px;
margin-bottom:22px;
}

The line-height and font-size defined now are not optimal, so they are converted to EM for scalability. This makes the code a bit hard to read, but the math used is fairly simple-just remember to recalculate line-height with the use of change font-size.

H1 {
Font-size:2.5em; /* = 40px/16px */line-height:1.1em; /* = 44px/40px */margin-bottom:22px;
}
p {
Font-size:0.875em; /* 16PX is the default em size */line-height:1.5714285714285714em; /* = 22px/14px */margin-bottom:22px;
}

Note that I will refer to Font-size and line-height in PX for the entire article, which will make it more clear that the "physical" size and the proportions of the given example. However, all the code, we will convert to EM.
With visible grids (many people use PNG or GIF backgrounds, others use tools such as baseliner), we can detect the alignment of all styles. Here we find that the lines of text are not "situated" on the baseline, but floating between the baselines instead. There's nothing to be careful about at this stage-we can simply lower our background image, or fix it by adding an inner margin (padding) to the body.

<ignore_js_op> a visual grid will be very helpful for the design process

So far everything goes well, but our code remains fairly basic. But we have more properties--like the top border--to all the elements, what will happen? Naturally, the property value needs to be adjusted so that the total height after the border height is still a multiple of the height between the baselines.

H1 {
border-top:3px;
padding-top:22px;
margin-bottom:19px; /* 22px-3px */}

<ignore_js_op>

Note how to make the sum of the 3px border-top and 19px margin-bottom equal to the height between the baseline 22px
Using SASS or REM
While this is certainly not a high-tech, the addition of the above-mentioned numbers in complex web sites, especially when using relative units, will be a big challenge. If you're willing to sacrifice em scalability, stick with PX, and precompiled languages like Sass can solve a part of the hassle. Using SASS We can define the height of the baseline as a variable (in my case, $baseline) and use the one-time equation to define its multiples. This makes the whole process very simple and makes CSS easier to read. In general, if you want to re-dinginess the height between your baselines, you only have to change one place. While using sass in my example below, the same is true when using Rems--Define your baseline height in one place, and then take effect in the entire code.

$baseline: 22px;
. box {
padding-top:3px;
Height: $baseline *15;
}
H1 {
font-size:40px;
Line-height: $baseline * *;
Margin-bottom: $baseline;
}
p {
font-size:16px;
Line-height: $baseline;
Margin-bottom: $baseline;
}

Use JavaScript on pictures and complex layouts
It is relatively simple to use a baseline grid on a simple typography layout, but we must ensure that other elements are aligned to the grid. For containers, buttons, and page boundaries, it is an important convention to make any cell a multiple of the height of the baseline through CSS. But on the other hand, pictures rarely follow this convention, which is generally a series of arbitrary heights, so in such cases, a small amount of JavaScript can do us a great favor. I'm not going to delve into this, but jquery's plugin baseline.js and Matthew Wilcox's article about vertical grids is worth a look. If you're working on a complex layout, look at ftcolumnflow--'s code, "fix CSS multi-column layout flaws," which is widely used in the music Financial Times web app, and may be more appropriate if you're looking for a more robust solution.
The underlying scenario above. By keeping our rows high, padding, margins, heights--any attribute--adding and always being equal to a multiple of the height between the baselines, we can guarantee that our entire vertical grid will not be affected, which is very simple, right?
Of course, if you don't go further in the next step, you won't read this article.
It sucks. Solution: Any variable type
The bad news is that most designers work under restricted conditions, and sometimes the height of a 22px baseline is more like an annoying hindrance than a useful constraint. For example, by following the rules of the yellow section, a 16px paragraph body part can derive a 26px segment header (although the lower paragraph subject may apply any value above 20px, depending on the font). Keep our baseline height of 22px, you may find a simple 22px baseline between the height of the line is too narrow to be comfortable reading, but a double baseline between the height is too wide, only in the case of H2 show two lines, there will be such a controversy, Of course, it is theoretically possible to assume that the width of a column is long enough for a folded line to never happen.

&LT;IGNORE_JS_OP&GT;H2 is either a little awkward or too high.

If there is a quick way to get in place, the above problem will not happen, just as we can simply put H2 without applying a baseline grid, and see that the short number that follows it will not magically fall to the right place. Unfortunately, there is no such thing as magic, we can only think realistically to find a solution.
At the beginning of the article I recommended starting with the line-height of your smallest text to define the height of your baseline, just like the body text. As we can see, a fixed, 22px (or any value of your body line-height) is the smallest unit that makes the line-height value of a fixed font a lot more inappropriate. But what if we halve the height of our original baseline? Technically our body text will have two line-height between the baseline height, but this is just a theory. In most cases, the result of this variability and typography is worth it, and we use the Golden Section to quickly define the size of some H elements (rounding, keeping EM values tidy), and we can easily see that each time it is worth the increase there is a suitable line-height value, For example: 16px/22px, 28px/33px,40px/44px and so on.

H1 {
Font-size:2.5em;
Line-height:1.1em;
margin-bottom:22px;
}
H2 {
Font-size:1.625em; /* 26px/16px */line-height:1.2692307692307692em; /* 33px/26px */margin-bottom:11px;
}

&LT;IGNORE_JS_OP&GT;H1, H2, and p all align to the baseline grid.

        Ugly scenarios: How to offset
       Before I go on, I have to admit, The following is completely experimental and even some of you may even think it is bad practice. But if you are ready to continue to indulge me, even if it becomes ugly also continue to read. Well, the ugliness I'm talking about comes from the "neat code" point of view. Perhaps from a design point of view, it may indeed be beautiful.
       based on the above-mentioned basic scenarios and free-to-grow scenarios with a little practicality (optional), now we have the knowledge and tools to improve the baseline grid for most layouts, but not for a real baseline. As mentioned earlier, the way in which Line-height is computed in CSS means that the character is approximately in the vertical midpoint of the leading line, rather than the bottom of the character next to the baseline (InDesign and Quark first). Many people take it for granted that this is the right one. This is the way the iine-height work in CSS, and we can't change it. Yes, but our eyes don't know the concept of CSS. Our eyes are not used to scanning lines of text in the center of the x-axis-they are accustomed to the point of following the character, the baseline to read, and the readability becomes worse when the adjacent rows are misaligned.
       Take a look at the following example:

H1 {
Font-size:2.5em;
Line-height:1.1em;
margin-bottom:22px;
}
H2 {
Font-size:1.625em; /* 26px/16px */line-height:1.2692307692307692em; /* 33px/26px */margin-bottom:11px;
}
p {
Font-size:0.875em;
Line-height:1.5714285714285714em;
margin-bottom:11px;
}
P.intro {
Font-size:1.125em; /* 18px/16px */line-height:1.22222222em; /* 22px/16px */margin-bottom:22px;
}

In the case of two adjacent columns and, although the baseline has been correctly penetrated through the introductory paragraph, the bottom (red line) of the letter of the introductory paragraph is not aligned with the main paragraph, which is caused by the line-height after the font calculation.

<ignore_js_op>css in the line-height is not a boast of its

Now it's the place where it gets ugly. In order to be able to align lines of text in all columns (the most important point, of course, starts with the baseline grid), we must manually offset the style. A simple method is to increase the value of the padding-top until the character is close to the baseline and adjust the margin-bottom accordingly to compensate for the added value.

H1 {
Font-size:2.5em;
Line-height:1.1em;
Padding-top:xpx; /* This requires trial and error, as X depends on your font and line-height */margin-bottom:22px-xpx;
}
H2 {
Font-size:1.625em; /* 26px/16px */line-height:1.2692307692307692em; /* 33px/26px */padding-top:xpx;
Margin-bottom:11px-xpx;
}
p {
Font-size:0.875em;
Line-height:1.5714285714285714em;
Padding-top:xpx;
Margin-bottom:11px-xpx;
}
P.intro {
Font-size:1.125em; /* 18px */line-height:1.22222222em; /* 22px */padding-top:xpx;
Margin-bottom:11px-xpx;
}

Chaos? Yes, maybe. Really boring. But at the same time there is nothing like a magical way to make the baseline perfectly aligned to a complex layout that is as pleasing and enjoyable as possible.

<ignore_js_op> all elements are aligned in multiple columns.

Hush. If you're still reading, maybe you're either a masochist or a morbid obsession with detail, and for the latter, congratulations, there's no doubt that your baseline is as solid as the brick wall.
Is it worth it?
Here are all of our. The baseline of the underlying CSS, quite simple, requires only a few math and organization to improve your layout. At the other end of the scale, we can manually adjust the padding and margin values to simulate a precise baseline in the print design, a concept that will undoubtedly make the pure CSS look sad. The more real question, of course, is whether the manual offset style is worth the benefit of visual effects. In some cases, such as design-driven projects and micro-sites, this is really worth it.
In other cases, most of the time, for a more complex site (your project manager will be racking his brains to find out why you need to spend that long to build an initial template) or a collaborative project where several developers maintain the same code, it's really not worth it. What we need to face is--what we're talking about in some extreme cases not only increases physical labor, it makes the code more responsible and difficult to maintain. A large enough project can even affect the load time of your site.
But just a few years ago, few people from industry leaders to hackers advocated flattering "sliding doors" technology, but now CSS3 has made it commonplace. Is it worthwhile to use two div instead of one to achieve rounded corners? Obviously, it is worthwhile for some people-but others think it is a waste of time, leading to difficulties in implementation and semantically flawed code. But the key point is that if no one tries such labor and code-intensive techniques, we may not have a mature grammar technology age.
Experimental, bad experience, hacks, ugly code-no matter what we call it-it's already launched, and will continue to roll, our syntax will improve and we'll use new tools to create and publish next-generation online content. In response to Mark Boulton's "How cool it would be to create a baseline grid without the pain of CSS" no matter how strong your mind is-whether your character is next to the baseline or suspended between the baseline-the vertical grid is an important idea, Using any of the methods listed in this article will give you a satisfactory baseline grid.
Of course, there are some examples where grid constraints are difficult to implement, like elements such as captions, navigation, or list items that don't seem to be aligned correctly into a predefined structure. In these examples, it is important to note that some compromises are not the end of the world. Some designs, like the outstanding design time Khoi Vinh, think that the baseline is most important in the context of your content body, and that some minor elements can not conform to baseline alignment without breaking the layout.
What I want to understand is that there is no right or wrong way to achieve the baseline, which will motivate you to try in your project in the future, and I encourage anyone who likes to make a contribution to this ongoing project, which will be as important as the vertical grid and the horizontal grid in future web design.
Article Source:Bole Online

Goto: A discussion of vertical grids and CSS baselines