Dynamic Hanging Punctuation in HTML
Surely you have seen on many sites hanging quotes and brackets at the beginning of lines. And although on paper such a complete hanging in simple texts (not headings) is at least debatable, it looks great on the web. This text behavior is called “hanging punctuation”, and currently there is exactly one way to implement it in (X) HTML / CSS — adding pairing styles. This method, for example, is applied on the site of Artemy Lebedev.
The main disadvantage of the classic "Lebedev" implementation of hanging punctuation on the web is its static nature. Let me explain how they did it.
CSS has a pair of styles: .h [symbol] and .s [symbol], for example, .slaquo and .hlaquo. For each of them, a plumb through the margin is registered. When using hanging symbols in the text, the s [symbol] style is added to the space in front of the symbol, and h [symbol] to the symbol itself. Accordingly, when both the space and the character are in the same line, the plumb lines cancel each other out and the text looks as usual. And when a hanging symbol for some reason is torn down to the next line - the first style (balancing second block) remains on the previous line, so the desired symbol hangs to the left to the given plumb line.
')
The implementation is essentially good, with one “but” - fonts. For each font plummet, say, opening quotes, Christmas trees or opening brackets are different. Yes, of course, we can calculate it manually and nail it into the stylesheet (this is exactly what Lebedev did on the site), but for this you have to be sure that at least 90% of site visitors will have this font. In case the browser shows this in some other font, problems will begin with moving lines.
What was done?
Three obviously invisible blocks are placed in the beginning of the document: a block with an opening Christmas tree, a block with an opening bracket, and a block of 1em size (if there is a need to hang any more characters, add the necessary blocks, there can be any characters). Next, a simple JavaScript function is called that calculates the sizes of these invisible blocks, converts them from pixels to “emmas” (it’s not for nothing that we made a block of 1em size) and dynamically inserts them into the main CSS of the document. Using the plumb lines themselves is completely different from the original method, only the setting of styles is different.
This method, which is not very complicated in implementation, allows you to ensure that hanging punctuation is correctly displayed in all modern browsers and operating systems, regardless of the font used by the user; This method also reduces the cost of coding styles for the webmaster, since it is no longer necessary to calculate plumb lines manually.
Finally, I’ll give an example of the final implementation (thanks to the text material, thanks to Yandex.Refers ). Feel free to use this feature on your sites, but please respect copyrights. The example is guaranteed to work in Firefox, Opera, Internet Explorer, and Safari. Naturally, after introducing dynamic hanging punctuation, static styles from CSS need to be removed.
The main disadvantage of the classic "Lebedev" implementation of hanging punctuation on the web is its static nature. Let me explain how they did it.
CSS has a pair of styles: .h [symbol] and .s [symbol], for example, .slaquo and .hlaquo. For each of them, a plumb through the margin is registered. When using hanging symbols in the text, the s [symbol] style is added to the space in front of the symbol, and h [symbol] to the symbol itself. Accordingly, when both the space and the character are in the same line, the plumb lines cancel each other out and the text looks as usual. And when a hanging symbol for some reason is torn down to the next line - the first style (balancing second block) remains on the previous line, so the desired symbol hangs to the left to the given plumb line.
')
The implementation is essentially good, with one “but” - fonts. For each font plummet, say, opening quotes, Christmas trees or opening brackets are different. Yes, of course, we can calculate it manually and nail it into the stylesheet (this is exactly what Lebedev did on the site), but for this you have to be sure that at least 90% of site visitors will have this font. In case the browser shows this in some other font, problems will begin with moving lines.
What was done?
Three obviously invisible blocks are placed in the beginning of the document: a block with an opening Christmas tree, a block with an opening bracket, and a block of 1em size (if there is a need to hang any more characters, add the necessary blocks, there can be any characters). Next, a simple JavaScript function is called that calculates the sizes of these invisible blocks, converts them from pixels to “emmas” (it’s not for nothing that we made a block of 1em size) and dynamically inserts them into the main CSS of the document. Using the plumb lines themselves is completely different from the original method, only the setting of styles is different.
This method, which is not very complicated in implementation, allows you to ensure that hanging punctuation is correctly displayed in all modern browsers and operating systems, regardless of the font used by the user; This method also reduces the cost of coding styles for the webmaster, since it is no longer necessary to calculate plumb lines manually.
Finally, I’ll give an example of the final implementation (thanks to the text material, thanks to Yandex.Refers ). Feel free to use this feature on your sites, but please respect copyrights. The example is guaranteed to work in Firefox, Opera, Internet Explorer, and Safari. Naturally, after introducing dynamic hanging punctuation, static styles from CSS need to be removed.
Source: https://habr.com/ru/post/26585/
All Articles