Embed Size (px)
Citation preview
TYPOGRAPHY ON WEB HOW BROWSERS RENDER TEXT
Igor Trindade Oliveira @igortolivei
OUR MISSION
To design and develop the digital products people use every day.
2013FOUNDED
BrooklynHEADQUARTERS
EMPLOYEES
172
OFFICES
ORPortland
BRRio de Janeiro
KEY ENGAGEMENTS TO DATE
Refuse to accept that unfamiliar things are black boxes full of magic that can’t be touched.
WHY?
Diversity
TYPOGRAPHY
Diversity
TYPOGRAPHY
Baseline
X-height
Cap Height
TYPOGRAPHY
حكمةਿਸਆਣਪ
TYPOGRAPHY
حكمة ح ك م ة ਿਸ ਆ ਣ ਪ ਿਸਆਣਪ
WEB BROWSER
Render Tree SVG Animation WebGL Web APIs
HTML Parser DOM CSS Parser Workers JS Engine
Open GL Text Layout AudioHarfBuzz (Linux) CoreText (MacOSX) DirectWrite (Window)
WEB BROWSER
Render Tree SVG Animation WebGL Web APIs
HTML Parser DOM CSS Parser Workers JS Engine
Open GL Text Layout AudioHarfBuzz (Linux) CoreText (MacOSX) DirectWrite (Window)
DOM Render Layout Paint
HIGH LEVEL FLOW
HTML
CSS
DOM Render Layout Paint
HIGH LEVEL FLOW
HTML
CSS
NetworkByte Stream
DecoderTokenizer
Input Stream Processor
DOM Tree Builder
Script Execution
document.write
PARSING HTML
PARSING HTML • The parsing algorithm is spec’d
• It is extremely forgiving
• Reentrant
• The WebKit implementation has 10k LOC
<!DOCTYPE html> <html> <head> <meta charset=utf-8"> <title>Title</title> </head> <body> <span> Hi WebBR! </span> </body> </html>
PARSING HTML – EXAMPLE
1: BODY 0x1231b08f0 (renderer 0x1175d6af0) 2: #text 0x1174bac80 "\n " 3: SPAN 0x1231b0958 (renderer 0x11749d540) 4: #text 0x1174bacd0 " Hi WebBR! " 5: #text 0x1174bad20 "\n\n\n"
PARSING HTML – EXAMPLE
<!DOCTYPE html> <html> <meta charset=utf-8"> <head> <title>Title</title> </head> <body> <div style="unicode-bidi: plaintext"> שלו Unicode مرحبا </div> </body> </html>
PARSING HTML – EXAMPLE
PARSING HTML – EXAMPLE
1: BODY 0x11bb2e270 (renderer 0x1176d4e38) 2: #text 0x11bb162d0 "\n " 3: DIV 0x11bb2e2d8 (renderer 0x1203d4230) STYLE=unicode-bidi: plaintext; 4: #text 0x11bb16b40 "\n مرحبا Unicode שלו\n " 5: #text 0x11bb16b90 "\n\n\n"
PARSING HTML – RESULT
DOM Render Layout Paint
HTML
CSS
PARSING HTML – EXAMPLE
RENDER AND LAYOUT • It is a forest of Objects:
• RenderLayers
• RenderObject
• Line boxes
LINE BOX • It represents a rectangle that occurs in a line.
• Encapsulates the Text Runs
<!DOCTYPE html> <html> <meta charset=utf-8"> <head> <title>Title</title> </head> <body> <div> שלו Unicode مرحبا </div> </body> </html>
LINE BOX – EXAMPLE
שלו Unicode مرحبا
RootInlineBox
InlineBox InlineBox InlineBox
LINE BOX – EXAMPLE
1: layer at (0,0) size 800x600 2: RenderView at (0,0) size 800x600 3: layer at (0,0) size 800x37 4: RenderBlock {HTML} at (0,0) size 800x37 5: RenderBody {BODY} at (8,8) size 784x21 6: RenderBlock {DIV} at (0,0) size 784x21 7: RenderText {#text} at (0,1) size 119x18 8: text run at (0,1) width 32 RTL: "\x{645}\x{631}\x{62D}\x{628}\x{627}" 9: text run at (31,1) width 63: " Unicode " 10: text run at (93,1) width 26 RTL: "\x{5E9}\x{5DC}\x{5D5}"
RENDER TREE
Line BreakerUnicode
BiDi Algorithm
White space collapsing
Construct Runs for segment
TextLine
Boxes
Text Shaper
LINE LAYOUT
Line BreakerUnicode
BiDi Algorithm
White space collapsing
Construct Runs for segment
TextLine
Boxes
<br> word-break
LINE LAYOUT
Line BreakerUnicode
BiDi Algorithm
White space collapsing
Construct Runs for segment
TextLine
Boxes
<br> word-break:
white-space:
LINE LAYOUT
Line BreakerUnicode
BiDi Algorithm
White space collapsing
Construct Runs for segment
TextLine
Boxes
<br> word-break:
white-space: Block / Inline dir=
unicode-bidi: direction:
Unicode characters
LINE LAYOUT
Line BreakerUnicode
BiDi Algorithm
White space collapsing
Construct Runs for segment
TextLine
Boxes
<br> word-break:
white-space: Block / Inline dir=
unicode-bidi: direction:
Unicode characters
LINE LAYOUT
UNICODE BIDI ALGORITHM
• It describes the algorithm used to render a bidirectional paragraph
• Defines the bidirectional character types(Strong, Weak, Neutral, Explicit Formatting)
• There is just one compliant implementation: libicu.
DOM LayoutRenderer
HTML
CSS
Paint
HIGH LEVEL FLOW
Apply Shaping
algorithm
Render Glyphs
Line Boxes
Generate Glyphs
PAINTING
Apply Shaping
algorithm
Render Glyphs
Line Boxes
Generate Glyphs
ح + ك + م + ة حكمة
PAINTING
Apply Shaping
algorithm
Render Glyphs
Line Boxes
Generate Glyphs
حكمة
PAINTING
Apply Shaping
algorithm
Render Glyphs
Line Boxes
Generate Glyphs
Skia Graphics Library Qt
GTK Cocoa
PAINTING
OUR WORK
Q&A
www.work.co 244 Water St. Brooklyn, NY. 11201
