English titulky

← Linux Font Rendering Stack

Získať kód na vloženie
2 Languages

Ukazujem Revíziu 4 vytvorenú 08/22/2018 od scribblemaniac.

  1. Okay, good morning everyone.
  2. I'm going to talk about the
    Linux Font Rendering stack,
  3. and that is what I learned the last
    four and a half years.
  4. I worked at the
    city administration of Munich.
  5. For introduction to font rendering,
  6. I can say writing is
    the most used interface,
  7. or probably the most used interface
    between humans and the machines.
  8. So all of you probably use it everyday
    on your computer.
  9. Screen text is replacing text on paper
    more and more
  10. and this is still an ongoing process.
  11. The way from a string in a computer to
    display text is surprisingly complex,
  12. And writing in itself is quite profound.
  13. For example, it's influenced by history
    so probably all, or at least most,
  14. writing systems are derived from some
    pictograph writing systems.
  15. This is also true for Roman letters.
  16. And also the Roman letters themselves,
    they changed a lot since 2000 years ago.
  17. In the Roman Empire they used some
    different letters than we use now.
  18. So the goal of this talk is to raise
    awareness of font rendering in computing,
  19. with the focus on the Linux desktop.
  20. Now to the history,
    and then I talk about typography.
  21. Text display in early computing.
  22. In early computing it was just
    a way to display results.
  23. Before that there were
    only flashing lights
  24. where you can read the results
    and...
  25. [audience member] ??... BT100
    ?? raise your hand
  26. [Max] And the output device receives
    a page or a character stream,
  27. and then the presentation is the job
    of the output device.
  28. So for example, a typewriter
    or a printer or a terminal.
  29. And this is a BT100
    you can see on the right side.
  30. So this is a real terminal.
  31. But going on in history
    there's the home computer era.
  32. In the home computer era you have
    fixed character sets
  33. and most of the time due to system
    limitations, memory limitations,
  34. you have graphics mode and text mode.
  35. In the graphics mode you can basically
    set the pixels more or less as you want,
  36. and in the text mode you can use fonts.
  37. The screen configuration at that time
    is more or less defined
  38. by the state of technology.
  39. So every screen at that time has more or
    less the same resolution,
  40. and that's something that the engineers
    of that time relied on,
  41. and also software engineers relied on.
  42. The text rendering was just
    using bitmap fonts.
  43. That means you have a fixed size character
    and you just define it pixelwise
  44. so it's some kind of hand-crafted
    characters.
  45. You have a given raster and then
    you really display
  46. these hard-defined characters.
  47. So then I need to introduce a few
    typography terms.
  48. First, there's glyph or a character.
  49. That's...well you can say a symbol.
  50. So I think most people can understand what
    that means.
  51. Then a font, this is a set of glyphs.
  52. And then we have a collection of fonts,
    that is called typeface or font family.
  53. Those are closely related fonts with
    the same visual appearance,
  54. And they differ only in slopes or widths
    or weights for example.
  55. Usually with typesetting, with moving
    letters in the printing press,
  56. you really had, for weight for example,
    different pieces/letters/hardware.
  57. And then the point size,
    or typographic unit.
  58. This is a measure of the size, and
    derives directly from the printing press
  59. with moving letters.
  60. There are different definitions, and what
    we probably all use as point size is the
  61. DTP point – desktop publishing point,
  62. where one point is defined as 1/72 inch,
    which is 0.3527 period millimeters.
  63. It is interesting to note that this has
    nothing to do with pixels.
  64. [audience] (unintelligible question)
  65. [Max] Please use the microphone
    if you a question.
  66. [audience] ...3257, what's the bar
    over the 7 mean?
  67. [Max] It means that the 7 goes
    on and on and on forever.
  68. So this is typography of the
    Latin alphabet...terminology.
  69. There's something called kerning.
  70. You can see an example of kerning
    on the right side.
  71. So in the printing press you have letters
    and they usually have a gap.
  72. To improve the readability, and to
    make all the text appear more uniform
  73. the typesetter reduces the gap.
  74. With moving letters they have special
    letter pairs...
  75. if you go on with this
    there are ligatures,
  76. which are replacement glyphs for close
    standing characters.
  77. An example of this is
    a double f, fi or fl.
  78. So you can see also in the slides here
    that double f is such a ligature.
  79. It's one connected glyph.
  80. And then there's a speciality
    if you reverse all of the ?? [static].
  81. The term non-proportional font.
  82. So you have a font where very character,
    every glyph, has the same width.
  83. This is also called monospace font.
  84. Sometimes you distinguish half-width
    and full width letters.
  85. This is also something you would see
    on a typewriter for example.
  86. Early bitmap fonts are usually
    monospaced fonts.
  87. Okay, let's go to
    the text rendering stack.
  88. Text rendering today.
  89. In all computing nowadays,
    typography is introduced.
  90. So won't find many devices on the market
    which don't use accurate typography.
  91. Glyphs are now represented as
    size-independent outlines.
  92. We can see on the right side there's
    a font editor: Font Forge.
  93. This is the way that such fonts
    are created.
  94. So you can see here in the picture
    the outline of the "S".
  95. It's a size-independent outline and
    you can just use that for
  96. every kind of display.
  97. And then you do something that is called
    rasterization, or sampling, or rendering
  98. for displaying it at the actual display.
  99. In the past this allowed for new
    applications for computers.
  100. First it allowed word processing and
    computer-based typesetting.
  101. Before that typesetting was
    a very hard job.
  102. It allowed internationalization.
  103. It allows universal graphical interface
    which goes
  104. hand-in-hand with internationalization.
  105. Come to think of it, not so long ago it
    was not so common that you could
  106. buy devices where you can easily switch
    the language to
  107. any language you would like.
  108. This is just a recent development.
  109. So now I will give you an overview of
    the formats we see on Linux systems.
  110. First I talk about the bitmap formats.
  111. Today we have bitmap formats in the
    PC Screen Font format,
  112. PSF or PSFU.
  113. These are the fonts that are used for the
    Linux VT, also known as the console.
  114. Usually you can store in such a font
    256 or 512 glyphs.
  115. Some of them contain
    a Unicode translation table.
  116. And on the other hand there are
    X Window System Bitmap Fonts.
  117. There are three formats:
  118. There's a Sever Normal Format (SNF).
  119. Glyph Bitmap Distribution Format (BDF).
  120. And Portable Compiled Format (PCF).
  121. Nowadays PCF is the only letter that
    you can find on a Linux system if so,
  122. and the first two are deprecated.
  123. And also the X Window Bitmap Fonts
    themselves are not very common these days.
  124. To the outline font formats.
  125. There are Postscript Formats.
  126. Postscript Formats have different versions
    as I would call them. It's called types.
  127. Type 1 is the one that is still relevant,
    to a certain degree.
  128. Those are the ones you can probably
  129. find on a standard Debian installation
    for example.
  130. It uses cubic bezier curves.
  131. The file format is divided into
    different files.
  132. So for every font you have
    Printer Font ASCII
  133. or a Printer Font Binary file,
    and you have
  134. a Print Font Metric or
    Adobe Font Metric file.
  135. Then you have the Truetype file format.
  136. This is more common. I guess everyone
    heard of that already.
  137. It uses quadratic bezier curves.
  138. It can contain optional code for
    TrueType Hinting Virtual Machine.
  139. What that means I will explain latter.
  140. There's a third format,
    the OpenType format,
  141. which has two possible glyph formats:
    one is TrueType,
  142. and the other is Compact Font Format,
    which is based on Postscript Type 2.
  143. So you can say what is new in this format,
    or what's the difference?
  144. Well it supports so-called Smartfonts.
  145. That means you can have language-specific
    ligatures or character substitutions.
  146. For example, kerning classes, which means
    you have a class of characters like
  147. the A and different variations.
  148. So these are A with different diacritic
    symbols,
  149. and you can just use one kerning class for
    all of those characters and don't have to
  150. invent the wheel for every A with
    diacritic symbols anew.
  151. Now to the font rendering techniques that
    I use today.
  152. This only applies to the outline fonts
    because well rendering bitmap fonts is
  153. obviously quite easy. You just paint the
    pixels that are in the bitmap.
  154. So rasterization is all about using
    outline fonts.
  155. The one library library that is used all
    over the free and open source world
  156. is FreeType.
  157. It is used on Linux system, BSD desktops,
    Android, and ReactOS, and some others.
  158. For example it is contained in Ghostscript
    and therefore in most of the printers.
  159. It's also on iOS [exhale].
  160. So the naive rasterization algorithm would
    be just lay a pixel raster over the
  161. outline font, over the character you want
    to display, and if the center of the pixel
  162. is inside the outline then you
    set the color to black.
  163. The problem is the so called
    aliasing effect.
  164. This is what you can see
    in the picture below.
  165. So those are the same words,
    rendered at different resolutions.
  166. The left one has 10x the resolution
    of the right one.
  167. You can see that, for example,
    the 'w' is quite deformed.
  168. Or the curl of the 'g';
    there's even a part missing.
  169. So you have details of the font
    which are lost,
  170. and you have artefacts.
  171. Somehow, especially in the early computing
    days you wanted to reduce those,
  172. and therefore you used a technique
    called hinting.
  173. This is to avoid such artefacts and
    improve the readability
  174. at lower resolutions.
  175. Therefore the outline is adjusted to fit
    the pixel raster at the rasterization.
  176. Some of the fonts can contain
    instructions, the so-called hints
  177. where the the name comes from:
    "hinting".
  178. You can see in the example here,
    in the picture above,
  179. that it's quite a good result.
  180. This is much more readable
    than the word above.
  181. However, with the use of hinting, there
    are also characteristics of the font lost
  182. which is obvious because
    if you change the outline
  183. then obviously characteristics get lost.
  184. And especially important for
    word processing,
  185. what you see is what you get
    word processing,
  186. is that the tracking
    of the font is changed.
  187. So tracking means the width
    of single characters.
  188. The picture below, this is a picture I
    took from LibreOffice.
  189. If you have a close look, you can see
    that the gap between those 'i' characters
  190. is not always the same.
  191. But if do word processing, you actually
    want to have a result which looks the same
  192. as on the printout.
  193. So I would recommend not
    to hint fonts in
  194. a what you see is what you get
    word processor.
  195. If you have a look beyond the backyard,
    on macOS there exists no hinting,
  196. and in the Windows world, hint can't
    be turned off,
  197. so this is hardwired in the
    font rendering of the Windows system.
  198. Well another approach to improve
    readability is anti-aliasing
  199. which applies multisampling.
  200. So for every pixel you take samples at
    different spots
  201. and then you compute from
    that a gray value,
  202. which is a measure of how much of the
    area of the pixel is covered by the glyph.
  203. On the picture you can see again
    the simple raster word,
  204. and then in the middle you see the word
    with anti-aliasing,
  205. and below you can see a combination of
    hinting and antialiasing.
  206. Suddenly the text becomes very readable
    also on low resolutions.
  207. This is what was usually used in
    computing in the 90s.
  208. So there is another approach to improve
    and therefore I have to
  209. talk a bit about LCD displays.
  210. So in the picture on the left, above you
    can see tube monitor pixels and
  211. on the bottom you can see
    LCD monitor pixels.
  212. All of the pixels consist of so-called
    subpixels with different colors.
  213. The mixture of the three different colors
  214. gives them a wide range
    of different colors.
  215. With the tube monitors this is not used,
    but with LCD display
  216. depending on the
    configuration of the subpixels
  217. it can be used to improve improve the
    resolution in one direction.
  218. Therefore you have to know how the
    configuration of the display is.
  219. So usually, one pixel, which you can see
    in the picture below right?
  220. These are the usual computer monitors.
  221. One pixel consists of a red, green and a
    blue subpixel in this order.
  222. But you have to keep in mind, especially
    with tablets, or smartphones,
  223. you can rotate the screen, so you have to
    keep that in mind.
  224. Also there are other subpixel
    configurations.
  225. For example, depending on the technology
    there can be additional red or green
  226. or even white subpixels.
  227. So there are also multiple possibilities
    of the configuration.
  228. We can use this configuration as I said
    to improve the resolution
  229. and in the usual case
    this is horizontally.
  230. You can see on the picture
    on the left side,
  231. first there's the naive,
    simple rendered character,
  232. then the character
    just using anti-aliasing,
  233. and then there's the
    subpixel rendered character.
  234. This one is the most readable
    or most sharp character.
  235. Not sharp!... but it's most correctly
    rendered according to the outline font.
  236. Depending on the technique of the display,
  237. you can see a color haze
    around the characters.
  238. So this happens when the software
    and the display technology
  239. don't match each other.
  240. So this is what you can see
    on the picture on the right.
  241. Okay, let's talk about the font rendering
    software parts in the Linux desktop.
  242. There's the so-called server-side
    text rendering.
  243. So in the X server there's the
    Core Font subsystem.
  244. With that, X11 clients can request the
    server to display a text
  245. by sending a string via libXfont
  246. and using the so-called
    X Logical Font Description (XLFD).
  247. Here's an example for Adobe Career font,
  248. then the X server has to
    render the text using the font.
  249. If you imagine a terminal server setup
    with thin clients,
  250. then the thin client runs the X server
    and the terminal server runs the X client
  251. and every thin client then has to
    handle the font rendering.
  252. So I don't know if
    this is the only reason,
  253. but nowadays server-side font
    rendering is not so common.
  254. Probably not used anymore.
  255. Now I have to talk first
    about font management.
  256. In Linux systems there is
    a software called fontconfig,
  257. which manages installed fonts
    on the system
  258. and it configures for example how to
    substitute fonts.
  259. For example if in a document there's a
    font to render a text
  260. and the font is not
    available on the system
  261. then in the font config system there can
    be rules to replace the font
  262. with a similar font.
  263. This is heavily used in Linux systems.
  264. There are also rules for what font to
    use if the current selected font
  265. doesn't contain a character
    you want to display.
  266. You can see on the picture on the right
    that this is also used...
  267. although I have to admit,
  268. I had to take this picture on a Debian 5.0
    system in LibreOffice
  269. because nowadays
    it works a bit different,
  270. but this is a good example where
    you can see that those characters
  271. come from different fonts actually.
  272. There's also a command line tool
    which is quite nice.
  273. fc-match command line tool.
  274. So for example if you want to see what is
    the replacement font for, let's say, Arial
  275. then you get the output:
    okay, it's Nimbus Sans.
  276. And you can also set rendering options,
  277. which means you can set anti-aliasing
    or you can turn off hinting.
  278. Usually these configurations are stored in
    /etc/fonts
  279. and there is also a per-user configuration
    in .config/fontconfig
  280. and it's in XML file format snippets.
  281. In the picture you can see an example.
  282. This is the replacement rule for
    Carlito and Calibri.
  283. Carlito is a replacement font for the
    nowadays often used
  284. Calibri font from Microsoft.
  285. So this configuration says the one way,
    Carlito is the same as Calibri,
  286. and the other way around.
  287. This is just an example,
  288. you can have a look at /etc/fonts
    and a lot of such snippets.
  289. It defines how fonts are
    displayed on the system.
  290. Another thing, and this is the reason
    why I had to take the screenshot
  291. on an older system, there's a piece of
    software called HarfBuzz.
  292. HarfBuzz is Persian for OpenType,
  293. so this software relies on the OpenType
    font format.
  294. You can see on the right side
    the HarfBuzz logo
  295. that actually says
    HarfBuzz in Persian.
  296. Before I talked about ligatures,
  297. In some languages ligatures are required
    to render fonts correctly
  298. and this is an example on the left of
    Devanagari, which is an Indic script.
  299. So if you have the first two characters
    combined then this is the rule
  300. of how to replace those characters
    with a third glyph.
  301. There were early implementations
    by Qt and Pango
  302. and those were integrated in HarfBuzz.
  303. Well those parts are now known as
    Harfbuzz Old,
  304. and the current HarfBuzz is a rewrite.
  305. Nowadays it's also used for
    the so-called simple script,
  306. meaning especially Latin script,
  307. and is integrated into Qt, GTK,
    LibreOffice, Firefox, Android, and XETEX.
  308. This is what I use for the slides here,
  309. so all the slides here are
    also rendered using HarfBuzz.
  310. And of course the whole
    font rendering stack.
  311. HarfBuzz also has fancy features like
    variable widths or weight
  312. with only one font or you can define
    in the font characters with
  313. variable widths and without stepping you
    can change it using HarfBuzz.
  314. Those techniques are used in
    client-side rendering.
  315. One library often was
    until recently often used, Xft.
  316. Well this is the applications meaning the
    X clients render the text
  317. based on FreeType and fontconfig.
  318. Then the X server
    only displays the results.
  319. Well, there is some caching involved,
  320. and it requires
    an extension to the protocol.
  321. In the widget libraries this was also
    used a long time,
  322. but now Qt, for example, has its own
    code for font rendering
  323. based on HarfBuzz, FreeType,
    and fontconfig.
  324. There's the combination of
    Pango and Cairo,
  325. which is used in the GTK environment.
  326. Pango derives from Greek and Japanese:
    pan means all and go means languages.
  327. So this is the background to write
    in all languages.
  328. This also uses HarfBuzz, FreeType,
    and fontconfig.
  329. And if you look at Wayland clients,
    they only do client-side rendering.
  330. To sum it up, we have a variety of
    techniques for text display.
  331. Some have historical than
    practical value nowadays.
  332. The modern font rendering stack
    is quite complex.
  333. But writing is one of the
    main interface to computers,
  334. so developers should be aware
    of the complexity.
  335. Keep that in mind.
  336. Thank you.
  337. [applause]
  338. Are there any questions?
  339. [audience] More a request than a question,
    I find the topic very interesting
  340. and I'd like to check it again. I know
    your video was not recorded
  341. or I think it was not recorded...
  342. [Max] Well it was I think.
  343. [audience] Okay so nevermind, but still
    if you are able to share your presentation
  344. [Max] Yes
  345. [audience] I would be very
    happy to look at it. Thank you.
  346. [audience] [tests mic] What's
    the problem due to the
  347. complexity from the software stack
    in your open ??.
  348. [Max] The problem of what?
  349. [audience] What's the problem it came from
    this complex software stack
  350. in your open ??.
  351. There's no problem with that,
    or there's some problem
  352. with these lot of layers, very lot of
    components to render the font.
  353. [Max] Okay, I try to rephrase the question
    [audience] Please.
  354. [Max] What is the reason there is so many
    layers in the font rendering stack today.
  355. [Max] Is that correct?
  356. [audience] And it caused some problem. Do
    you know any problem
  357. with current font rendering system.
  358. [Max] Colored font rendering system?
  359. [audience] Current, now.
  360. [Max] Ah current font-
  361. [audience 2] The question is
    whether the complexity
  362. means that there are
    difficulties for developers.
  363. Is it too complex?
  364. Does that cause problems?
  365. [Max] Well the complexity is hidden behind
    the font rendering stack.
  366. So it's a huge collection of software,
  367. usually there's HarfBuzz, fontconfig,
    and FreeType heavily used nowadays.
  368. But it's all encapsulated
    in these libraries
  369. and it's used all over
    the free software world
  370. and it makes it easy to write applications
    which are easily translatable.
  371. [audience] Yes but for example,
    the fontconfig is not so flexible.
  372. For example, when we're using
    mainly Japanese
  373. and other display of the language,
  374. then the font of config chooses the
    non-Japanese font like the Chinese one.
  375. I know some distributions like Ubuntu make
    language specific fontconfig file
  376. for each language to deal with but
    Debian doesn't have such a mechanism.
  377. So in my opinion the fontconfig
    is a bit terrible so
  378. is there any ?? meant or any hack for it?
  379. [Max] Okay, the fontconfig system comes
    from the time where XML was popular.
  380. [audience] Mhmm
    [Max] As you can see.
  381. Well the problem here is
    not so much the software stack
  382. more than the Unicode system.
  383. So in the Unicode system there are
    same code points for
  384. Japanese and Chinese characters somewhere
    although they have different appearances.
  385. In the fontconfig system there are
    replacement rules for characters
  386. and it is just a list and usually Chinese
    fonts are listed first.
  387. So that is the reason why in the Japanese
    language you get Chinese characters
  388. instead of Japanese characters.
  389. So I also think there's room to improve
    the software stack, yes.
  390. [audience] Thank you.
  391. [Max] Okay, done. Thank you.
  392. [applause]