SLIDE 1
Rendering Quality in WebKit's Open Source Graphics Stack Dominik - - PowerPoint PPT Presentation
Rendering Quality in WebKit's Open Source Graphics Stack Dominik - - PowerPoint PPT Presentation
Rendering Quality in WebKit's Open Source Graphics Stack Dominik Rttsches dominik.rottsches@intel.com 01.org/webkit About WebKit Software Engineer @ Intel Finland, OTC WebKit Committer Specialized in Tizen WebKit's Graphics Backend In
SLIDE 2
SLIDE 3
In this talk
Define rendering quality WebKit's 2D rendering stack Improvements to Tizen WebKit's rendering quality
SLIDE 4
Rendering Quality
Site looks "as intended by the author" Text & graphics look accurate & pleasant Sharp Readable Regular spacing & layout No glitches, artifacts, gaps, irregularities
SLIDE 5
"Looks as intended" = Consistency
across platforms and devices across browsers across different screens with look & feel of the operating system
SLIDE 6
Great looking fonts and graphics create a great user experience. WebKit Graphics Backend
SLIDE 7
WebKit Graphics Backend
... ... WebKit API WebCore JSCore Platform Abstractions
2D Graphics Fonts & Metrics Text Shaping
SLIDE 8
... ... WebKit API WebCore JSCore Platform Abstractions
2D Graphics Fonts & Metrics Text Shaping
WebKit Graphics Stacks
2D Graphics Font & Metrics Text Shaping Tizen WebKit Cairo FreeType HarfBuzz NG (ex: Pango) WebKit GTK Cairo FreeType HarfBuzz NG (ex: Pango) Safari CoreGraphics CoreText CoreText Chromium Linux Skia FreeType HarfBuzz NG Chromium Mac Skia CoreText (via Skia) HarfBuzz NG Qt WebKit QPainter Platform dependent HarfBuzz NG
SLIDE 9
What could possibly go wrong?
(Downloadable) Fonts Shadows Layout, Scaling and Zooming Precision
SLIDE 10
Font Selection & Font Antialiasing Web Fonts & Complex Font Support
SLIDE 11
Font Selection & Font Antialiasing Web Fonts & Complex Font Support
SLIDE 12
Shadows in CSS and SVG
SLIDE 13
SLIDE 14
SLIDE 15
Baseline Positioning of Text
SLIDE 16
SLIDE 17
SLIDE 18
SLIDE 19
Artifacts on Reflections
SLIDE 20
Artifacts on Reflections
SLIDE 21
SLIDE 22
Fractional Units in Layout
4 1 1 1 1
Fractional Units Gone Wrong
SLIDE 23
Fractional Units in Layout Fractional Units Gone Wrong Sub-pixel Layout to the Rescue
Keeps account of fractional layout values Takes into account zooming and scaling Lays out web page with fractional precision Renders snapped to device pixels
SLIDE 24
Sub-pixel Layout to the Rescue
Keeps account of fractional layout values Takes into account zooming and scaling Lays out web page with fractional precision Renders snapped to device pixels
SLIDE 25
What needs to be done right?
Font Selection Font Aliasing Settings Web Fonts & Complex Font Rendering Robust Graphics Backend Layout, Scaling and Zooming Precision
SLIDE 26