Typography and modern CSS

While some CSS properties that are responsible for all sorts of beautiful (like filter, mix-blend-mode or transition) attract the attention of everyone, others are covered very little on the Internet. Take at least the properties responsible for typography. They are very useful and spectacular, but are not widely known. Let us correct the injustice and illuminate what usually remains in the shadows.

Correct hyphenation

Something was always wrong with line breaks in CSS. At the beginning we had the word-wrap property, which seems to work, but is listed as a draft and is not recommended for use. Then came the word-break , which puts the hyphenation based only on whether the words fit in the container, and still does not mark them with any signs. Only now, after so many years, CSS translations are ready to rise from their knees: finally, we can transfer words according to the rules of the language using the hyphens property:

article { hyphens: auto; }

Possible values:
')

manual - Words are transferred only in those places of the text where the special character & shy; or the <wbr> tag. Used by default;
auto - the browser adds hyphenation automatically based on the built-in dictionary;
none - words are not transferred.

An important caveat: in order for the hyphenation dictionary to work, in the <html> tag, you must specify the lang attribute with the language code:

 <html lang="ru">

You can also set this attribute directly in the text paragraph:

 <p lang="en">Some long text</p>

It works everywhere, except for desktop Chrome and Opera, everything will look as usual in them. But in other browsers we get normal hyphenation, so you can safely use it.

Capital (font-variant: small-caps)

A small cap is the typeface in the headset, in which the lowercase characters look like small caps. In CSS, you can set it using the font-variant property, which is responsible for representing lowercase letters. Available values:

normal is the default;
inherit - inherits the value of the parent;
small-caps - what interests us. Displays all lowercase characters as uppercase, but reduced in size.

 h1 { font-variant: small-caps; }

It looks very interesting:

css font-variant

Font-variant has long been supported in all browsers. You can play with other text or font here:

Advanced underline styling (text-decoration-skip)

I have already written about the text-decoration-style and text-decoration-color properties. But there is one more thing: text-decoration-skip . It includes the omission of detailing elements in the underlined text, which looks pretty impressive.

css text-decoration-skip

The property can take several values, but more or less only work:

ink - the underline skips letters that go beyond the baseline;
objects is the default value. Line skips objects like images and inline-block elements

 a { text-decoration-skip: ink; }

It works in Chrome, Opera and Safari (and Safari on a poppy, by default, uses text-decoration-skip: ink).

Making quotes

Did you know that in CSS you can specify the format of all the quotes used on the site? For this there is a special property quotes . It applies to the content of the <q> tag, as well as to pseudo-elements with the content property equal to open-quote or close-quote .

 q { quotes: "«" "»"; }

 q { quotes: "“" "”"; }

 q { quotes: "\0022" "\0022"; }

The property has long been supported by all browsers.

Tuning multicolumn texts (orphans and widows)

Properties orphans and widows can be called outsiders. Here, for example, what about one of them is written in the Mozilla documentation:

The widows CSS property determines what minimum number of lines should be left at the beginning of a new page on paged media. In typography, the “hanging” line (widow) is the last line of a paragraph, appearing at the beginning of the next page. Setting the widows property allows you to prevent hanging lines.

On non-paged media such as screen, the CSS widows have no effect.

It looks like something useless for 99.9% of developers. Tell me how often you had to use it? If this happened at least once, please write about it in the comments.

But this is not all that these properties are capable of! For some reason, few places describe that they work for multi-column layouts!

css orphans

 article { columns: 2; orphans: 10; /*      ,   */ }

 article { columns: 2; widows: 5; /*       */ }

Immediately the question arises: “What if for a block both properties are indicated? Will they start to clash? ” In such cases, widows take precedence and are counted first.

In the context of page styling, properties have long worked everywhere except Firefox. With regard to the stylization of columns, they do not work in IE / Edge.

As you can see, among the little-known properties you can find many useful things. The properties for more fine-tuning hyphenation, text flow for different blocks (CSS Regions), frame inserts (CSS Exclusions) and much more are not far off.

If you know other typographic news in HTML and CSS that already work in browsers, please write in the comments!

Source: https://habr.com/ru/post/277933/

All Articles