Css baseline research: vertical alignment implementation-good, bad, and ugly

Css baseline research: vertical alignment implementation-good, bad, and ugly

This may be because of the lack of understanding and appreciation of the baseline mesh, or because the baseline mesh is notoriously hard to implement. So far no one has taken the blueprint for its successful implementation. Some people even think that baselines are redundant on the network. As a Typographical term and network behavior, baselines follow different rules on the network from those used for printing, the depressing difference between line-height and real line spacing is the most obvious example. At present, in any case, let's first assume that baseline is at least a useful tool for web designers to some extent. But what kind of tool is it, and what tools we have in hand that can be freely used to implement it, and most importantly, it is not worth it.

Vertical mesh and Pattern Recognition

Before mathematical computation and baseline alignment, you can understand its fundamental nature: vertical grid. While understanding why, we have good preparation and greater motivation to solve the problem of baseline alignment, which is sometimes boring and fascinating. Vertical grids can be simply understood as the spacing between the structural height and the vertical Arrangement elements, or more general points are the padding and the margin (margin) and line-height ). Just as the horizontal grid uses a predefined unit size to constrain the layout to achieve a neat and harmonious effect, the vertical grid is consistent when users roll down, predictable measures provide fixed structure content. Well-developed 5-year UI front-end framework!

The grid is useful not only in the horizontal direction, but also in the vertical direction.

Why is vertical grid important? BecauseVertical grids are related to how our brains work.It is also related to how we use pattern recognition to parse the world around us. Even if you don't go deep into this topic (other people who are smarter than me are more suitable for this task ), it can also be said that pattern recognition allows the human brain to store similar or identical impressions (such as basic shapes and colors) in the Pattern Library ), in addition, in the face of new stimulus, the model library is used for quick analysis. This is why we readDo not pay attention to being an independent letter.Instead, you can recognize the entire word in an instant (using the same pattern as before from our brain memory ), this is also why we can quickly recognize A letter ("A" B "" C "...), Even if the font, size, and color change-their basic shapes have been stored in our brain pattern library. Once any type of stimulation does not match the pattern you previously stored, this will prompt the brain to store the new pattern in the new memory, this in turn requires more mental power-and this is the important aspect of structure and grid design (both horizontal and vertical). Next, imagine a simple layout with a consistent section spacing of X. After the first analysis, as in the same pattern, your brain will immediately recognize all other identical paragraphs. If, on the contrary, elements in the same layout have different spacing, the reader's brain needs to analyze all the independent elements to understand what they mean. The more shapes the brain needs to analyze, the longer it takes. Well-developed 5-year UI front-end framework!

Irregular left side requires more mental power than right side

Any irregular shape will interrupt pattern recognition that flows first (so it will waste part of mental activity that should have been used to appreciate excellent content), and a rule, A consistent and predictable structure will make your design easier to read and understand. Creating a fixed baseline mesh is a good way to achieve it.

In addition, the spacing between each vertical (and horizontal) is basically the same. A system with a preset unit size for each element not only eliminates the above ununiformity, but also makes the designer's work easier, the designer only needs to determine the basic structure in the total framework. Establish a standard. For example, there is always a White gap between two baselines under the header, and each box has three baseline margins. Adding logic in our layout is not only easy to design, easy to implement, and more importantly, easy to understand.

Now, if the vertical grid is still like an abstract concept, another advantage of the baseline --Horizontal Alignment of multiple columns-- It is easier to understand. This is more common in printed design, especially in magazines and newspapers. Multiple columns of layout are often used, and adjacent paragraphs (or headers) may be immersed and cheerful if the baseline alignment is good, once alignment is poor or there is no alignment reading at all, it is annoying to interrupt. This silent layout derived from baseline alignment shows a visual confidence. An invisible bracket supports all the elements on the page and gives readers the subconscious peace of mind. Each row on the left-hand page is aligned with a book on the right-hand page, which makes it easy to feel trust. On the contrary, if the book is basically aligned, this trust is relatively less. Well-developed 5-year UI front-end framework!

Horizontal Alignment of multiple columns

Line-height Problems

Traditionally, baselines refer to an invisible line on which most of the letters are "located". A basic baseline mesh is formed between each baseline, as discussed earlier, A baseline not only forms a vertical grid, but also horizontal alignment between adjacent columns. Once the baseline mesh is defined, the next step is to force the alignment of all elements so that the text, border, image, or box elements in a line are always aligned to the same vertical structure.

The problem is that in InDesign, you can easily adjust the shape to align the grid by clicking the button (enable and disable the grid accurately, in css, you can only adjust the line height (line-height), padding (padding), margin (margin), and size (size) -- Any change may cause a change in the overall height of the element. Well-developed 5-year UI front-end framework!

The traditional baseline is the online location where most of the letters are located, and the height between baselines is the total height of the element.

Worse, the line-height attribute in css does not have the baseline concept in a strict sense, and each line of text is roughly in the middle of the total height of the element. This means that precise text alignment (baseline alignment) based on different styles and fonts requires further manual, time-consuming adjustments, and pixel-level light shifting.

Therefore, how do we start to Implement css baselines? Due to the lack of native baseline syntax, quick or functional Forced vertical alignment of browsers, we will leave it to future experiments. Let's start with the most basic css method. Well-developed 5-year UI front-end framework!

Good method: basic css baseline

So far, there is no unified and correct method to achieve css baselines. Some people have met the requirements as long as the Row Height and spacing comply with a set of standards, others are more elaborate and meticulous-no matter what-only each line of text is beautifully "located" on the base line, images, borders, the box and other elements are perfectly aligned with the same grid. The good news for everyone is that basic css baselines are really not hard at all. Through some pre-design decisions (and persistence), they only need a little bit of basic mathematics.

Define your baseline. it is best to start with the smallest text you use, most of which are your body text, and then calculate it based on it. In my example below, I use the 14px font-size with the line-height of 22px, that 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 the border, inner margin, and outer margin) must be a multiple of 22px, as shown below:

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

Currently, the defined line-height and font-size are not optimal. Therefore, they are converted to em for scalability. This makes the Code a bit difficult to read, but the mathematics used is quite simple-Just remember to re-calculate line-height when changing the font-size. Well-developed 5-year UI front-end framework!

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: In the entire article, I will refer to font-size and line-height in px units, so as to clearly indicate the "physical" size and the proportion in the given example. However, all code is converted to em.
With the visible mesh (many people use background images of png or gif, while others use tools such as Baseliner), we can detect the alignment of all styles. Here we found that the lines of text are not "located" on the baseline, rather floating between baselines. At this stage, there is nothing to worry about-we can simply cheap our background image, or put the padding on the body to fix it.

A visual grid will be helpful for the design process.

So far, everything went smoothly, but our code is still quite basic. But what will happen if we include more attributes, such as the upper border, to all elements? Naturally, the attribute value needs to be adjusted so that the total height after the border height is merged is a multiple of the height between baselines. Well-developed 5-year UI front-end framework!

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

Note: how to make the sum of the 3px border-top and 19px margin-bottom equal to the height of 22px between baselines

Use SASS or REM

Although this is really not a high technology, adding the above numbers will be a great challenge for complicated websites, especially when using relative units. If you are willing to sacrifice em scalability and stick to using px, pre-compiled languages like SASS can solve some of the trouble. With SASS, we can define the height between baselines as a variable ($ baseline in my case) and define its multiples using an equation. This makes the entire process very simple and makes css easier to read. In the general process, if you want to change the height between your baselines again, you only need to change one place. Although Sass is used in my example below, the same is true when rems is used-only defining the height between your baselines in one place and then taking effect in the entire code. Well-developed 5-year UI front-end framework!

$baseline: 22px;    .box {    padding-top: 3px;    height: $baseline*15;}h1{    font-size: 40px;    line-height: $baseline*2;    margin-bottom: $baseline;}p {    font-size: 16px;    line-height: $baseline;    margin-bottom: $baseline;}

Use JavaScript on images and complex la s

The use of baseline grids in a simple text layout is relatively simple, but we must ensure that other elements and images must be aligned with the grid. For the container, button, and webpage boundary, it is very important to use css to make any unit a multiple of the height of the baseline. But on the other hand, images seldom follow this convention, which is generally a series of arbitrary heights. In this example, a small amount of JavaScript can help us a lot. I won't go into it here, but the jQuery plug-ins Baseline. js and Matthew Wilcox are worth reading about the vertical grid. If you are working on a complex layout, you can check out FtColumnflow-a piece of code that "fixes css multi-column layout defects". It is widely used in the Financial Times web app, and if you want to find a more robust solution, it may be more suitable.

The above basic scheme. By ensuring that our row height, inner margin, outer margin, height -- Any attribute -- addition is always equal to a multiple of the height between baselines, we can ensure that the entire vertical grid is not affected, this is simple, right?

Of course, you will not read this article if you do not continue to explore it later. Well-developed 5-year UI front-end framework!

Bad solution: Any variant

The bad news is that most designers work under restricted conditions, and sometimes the height of a 22px baseline is more of an annoying obstacle for them than a useful constraint. For example, following the yellow split rule, a section subject section of 16px can be pushed to the section header of 26px (although the lower section subject may apply any value higher than 20px, depending on the font ). Keeping the height of our baselines 22px, you may find that the height of a simple 22px baseline is too narrow to read comfortably, however, the height of a double baseline is too wide. This debate is only possible when h2 is displayed in two rows. Theoretically, we can assume that the column width is long enough, this will never happen. Well, it's just theory.

H2 is either small, embarrassing, or the row is too high.

If there is a fast way in place, the above problem will not occur, just as we can simply remove h2 from the baseline mesh, looking at the short ones that follow it is not magic-like to fall into the correct position. Unfortunately, there is no such magic. We can only find a solution in a realistic manner.

At the beginning of the article, I recommended that you define the height between your baselines from the line-height of your smallest text, just like the text of the body. As we can see, the minimum unit of a fixed 22px (or any value of your body line-height) will make the line-height value of a fixed font inappropriate. But what if we halved the height of our original baselines? Technically, our body text will have line-height between two baselines, but this is just a piece of paper. In most examples, the variability and typographical freedom result is worthwhile. We use the golden split ratio to quickly define the size of some h elements (rounding, keep the em value clean), we can easily see that each increase is worth a proper line-height value, such as 16px/22px, 28px/33px, 40px/44px, etc. Well-developed 5-year UI front-end framework!

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;}

H1, h2, and p are aligned with the baseline mesh.

Ugly solution: Offset Method

Before I continue, I must admit that the following content is completely experimental and even some of you may think it is too bad to practice. But if you want to move on to me, read it even if it becomes ugly. Well, what I'm talking about is ugly because of the idea that the code is neat. Maybe from the design point of view, it may be pretty.

Now we have the knowledge and tools to improve the baseline mesh for most la s, based on the above basic scheme and the arbitrarily variable scheme with a little practicality (optional, however, real baselines are not implemented. As mentioned above, the line-height Calculation Method in css means that the character is approximately in the vertical midpoint of the line spacing, rather than the bottom of the character is next to the baseline (first InDesign and Quark ). Many people think it is appropriate. This is how iine-height works in css, which cannot be changed. Yes, but our eyes do not know the concept of css. Our eyes are not used to scanning lines of text at the center of the X axis-they are used to following the character to the point where the baseline is read and become less readable when the adjacent lines are misplaced.

Let's take a look at the following example: carefully developed a five-year UI front-end framework!

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, even though the baseline is correct throughout the section, the bottom of the letter (red line) of the section is not aligned with the main section, this is due to the line-height after font calculation.

In css, the line-height is not a boast column.

Now it's an ugly place. To align the lines of text in all columns (of course, the most important thing is starting from the baseline mesh), we must manually offset the style. A simple method is to add the padding-top value until the character is next to the baseline, and adjust the margin-bottom to compensate for the added value. Well-developed 5-year UI front-end framework!

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? Maybe yes. It's really boring. At the same time, nothing can make the baseline perfectly aligned and complex la s as excited.

All elements are aligned with multiple columns.

Hush. If you are still reading, you may be either a masochistic, or a pathological obsession with details. Congratulations to the latter, there is no doubt that your baseline is as solid as a brick on the exterior wall.

Is this worth it? Well-developed 5-year UI front-end framework!

Below is all of us. The baseline of basic css is quite simple. You only need a small amount of mathematics and organization to improve your layout. On the other end of the balance, we can manually adjust the padding and margin values to simulate the exact baseline in the design like printing. This concept will undoubtedly make the pure css writers look sad. The real problem is, of course, whether the benefits of manual offset styles on visual effects are worthwhile. In some cases, such as design-driven projects and micro-sites, this is indeed worthwhile.

In other cases, most of the cases are for more complex sites (your project manager will blink your mind to find out why you need to spend so much time building an initial template) or several developers can maintain collaborative projects with the same code, which is indeed not worth it. What we need to address is that what we are talking about in some extreme examples not only increases physical labor, but alsoMake code more responsible and difficult to maintain. Loading time of your site may even be affected in a large enough project.

However, just a few years ago, from industry leaders to hackers, it was rare to advocate the "sliding doors" technology, but css3 has made it commonplace. Is it worth using two divs 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 implementation difficulties and semantic defects in code. But the key point is that if no one attempts such labor-intensive and code-intensive technologies, we may not have a technology era of mature syntax.

Experimental, bad experience, hacks, ugly code -- whatever we call it -- it has been launched and will continue to be released, and our syntax will be improved, we will use new tools to create and publish next-generation online content. In response to Mark Boulton's"How cool it would be if css could easily create a baseline Mesh"No matter how strong your obsession is-whether your character is next to a baseline or is suspended between baselines-the vertical grid is an important idea, any method listed in this article will give you a satisfactory baseline mesh.

Of course, there are some examples that make it difficult to implement grid constraints, such as some elements such as question note, navigation or list items, which do not seem to be correctly aligned to a pre-defined structure. In these examples, it is worth noting that some compromises are not the end of the world. For some designs, such as the outstanding design, Khoi Vinh, the baseline is the most important in the context of your content subject, secondary elements may not comply with baseline alignment without damaging the layout. Well-developed 5-year UI front-end framework!

What I hope to understand is that there is no correct or wrong baseline implementation method here, which will encourage you to try in your project in the future, I also encourage anyone who likes typographical to contribute to this ongoing project, so that vertical grids and horizontal grids will be equally important in future Web design.