It turns out that for each line fragment, Cocoa’s typesetter finds the tallest descender on that line and uses that as the baseline offset from the bottom of the line fragment rectangle. We set a fixed line height though, so what went wrong? The answer to that is finding out where the typesetter chooses to place the baseline within the line fragment rectangle. Paragraphs with mixed fonts often didn’t look right in Sketch. It works well for paragraphs of the same font.
Historically this is what setting line height in Sketch would do. If we use the same value for minimum and maximum, we get a fixed line height.
This limits the height of the line fragment rectangles. Paragraphs can also specify a minimum and/or maximum line height. Mixing fonts can produce line fragments of different heights, which is where things start to get interesting: Fixed Line Height In normal typesetting, the height of the line fragment is determined by the tallest font on that line (to be precise sum of the font’s ascent above and descent below the baseline). As long as you use a single font or size in a paragraph everything looks as one would expect: The rectangles containing all glyphs that fit on a single line are called “line fragment rectangles”. To fill the text container with glyphs, we need to split it into lines. In Sketch, the size of the text container is determined by the width of the text layer. How many glyphs we can fit on a line is determined by the text container’s width. The seven characters are represented by a single glyph: Text Containers and Line Fragments The most extreme ligature we’ve ever come across is “ Zapfino” in the Zapfino font. The same characters ordered differently might produce different ligatures and therefore a different number of glyphs. For example, a single glyph can represent more than one character-these are called ligatures. The mapping between characters and glyphs isn’t 1:1. Glyphs are the visual representation of one or more characters for a given font. The first step of laying out a paragraph of text is to convert the text’s characters and font attributes into glyphs. To understand how it works, and what’s changed, we need to have a look at Apple’s Text System, how it lays our lines of text, and how all that applies to Sketch. In Sketch 3.6 we’ve made some changes to the way we typeset text layers, particularly for paragraphs with fixed line height. The caron that can appear on an uppercase S (Š, found in Czech and other Slavic languages) and a lowercase c with a cedilla (ç, most common in Turkish and French) are two of many examples. These are also determined by the font’s metrics, but to simply put it, this space is needed by some characters, particularly those who contain diacritics. Another undesirable effect of this was that text on the canvas often shifted up or down when you switched between fonts.Ī question that often appears in our support inboxes - asks why Sketch renders the seemingly blank areas (highlighted in blue), and doesn’t trim the bounding box to the edges of the ascenders and descenders in the layer. Since both vary so wildly between fonts, text layers in Sketch can change quite dramatically when you switch between fonts, and especially when you mix multiple fonts and sizes in the same paragraph. Where the font gets drawn within that space is determined by the baseline (in red) which is also specified by the typeface. This value does not correspond to the text size and it varies widely across different fonts sometimes it’s nearly the same as the text size, at other times its double the size. The height of a single-line text layer is determined by the font’s line-height value for the text size. To understand some of the problems we needed to solve, let’s first look at the vertical metrics of a text layer in Sketch: We think we emerged victorious in the end, and we hope you’ll like the result.
The way that Sketch handles text is something that we had wanted to improve upon for quite a while, but as you continue to read, you’ll soon discover that undertaking these changes and improvements required us to take a deep dive into Apple’s text rendering system and make some low-level changes. Over the years we’ve learned that what designers expect from a type system does not always match how Apple and other vendors built their text layout systems. Text, like Colors is a topic that appears simple on the surface, but once you dig down, it becomes apparent that it is anything but.
0 kommentar(er)
