User Defined Characters and SVG Fonts August 4, 2010 Jun Fujisawa [email_address]
User Defined Characters <ul><li>EGLS Requirements </li></ul><ul><ul><li>EGLS_TK_01 Unicode 6.0 should be used for IVS and ...
Web Fonts Overview <ul><li>Web Fonts Specification </li></ul><ul><ul><li>Introduced in CSS Level 2 www.w3.org/TR/2008/REC-...
Referencing Web Fonts <ul><li>Multi Weights Example </li></ul><ul><ul><li>One rule for each weight </li></ul></ul><ul><ul>...
New in CSS Fonts Level 3  <ul><li>Renewed Font Format List </li></ul><ul><ul><li>&quot;truetype&quot;, &quot;truetype-aat&...
Handling Variations <ul><li>East Asian Text </li></ul><ul><ul><li>The editor's draft of CSS Fonts Level 3 introduced  'fon...
WOFF Font Format <ul><li>WOFF Font Specification </li></ul><ul><ul><li>WOFF File Format 1.0 www.w3.org/TR/2010/WD-WOFF-201...
SVG Fonts Overview <ul><li>SVG Fonts Specification </li></ul><ul><ul><li>Introduced in SVG 1.0 www.w3.org/TR/2001/REC-SVG-...
Defining SVG Fonts <ul><li>Inline Font Example </li></ul><ul><ul><li>One 'glyph' for each glyph </li></ul></ul><ul><ul><li...
New in SVG Tiny 1.2  <ul><li>No Arbitrary SVG </li></ul><ul><ul><li>Specify glyph outline only by using path data (with 'd...
Web Fonts Implementations <ul><li>WOFF is going to be supported everywhere </li></ul><ul><ul><li>SVG Fonts is the only cho...
User Defined Characters <ul><li>EGLS Requirements </li></ul><ul><ul><li>EGLS_TK_01 Unicode 6.0 should be used for IVS and ...
Solution Using SVG Fonts <ul><li>Obvious Advantages </li></ul><ul><ul><li>Supported by major browsers and tools (TK_02, JF...
Extending Existing Fonts <ul><li>Extended Font Example </li></ul><ul><ul><li>Add @font-face rule for each user defined cha...
Glyphs without Code Points <ul><li>SVG Glyph Example </li></ul><ul><ul><li>Use unique identifier in stead of a character a...
Upcoming SlideShare
Loading in...5
×

User Defined Characters and SVG Fonts

2,930

Published on

EPUB WG EGLS Sub-group Meeting
August 4, 2010

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,930
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

User Defined Characters and SVG Fonts

  1. 1. User Defined Characters and SVG Fonts August 4, 2010 Jun Fujisawa [email_address]
  2. 2. User Defined Characters <ul><li>EGLS Requirements </li></ul><ul><ul><li>EGLS_TK_01 Unicode 6.0 should be used for IVS and Emoji </li></ul></ul><ul><ul><li>EGLS_TK_02 SVG font format should be supported </li></ul></ul><ul><ul><li>EGLS_CHANG_R1 Characters outside of BMP can be EUDC </li></ul></ul><ul><ul><li>EGLS_CHANG_R2 EUDC can be embedded inside EPUB file </li></ul></ul><ul><ul><li>EGLS_CHANG_R3 Mechanism to assign resource for each font </li></ul></ul><ul><ul><li>EGLS_CHANG_R4 E mbed mapping information in EPUB file </li></ul></ul><ul><li>Additional Requirements </li></ul><ul><ul><li>JF_01 Must be compatible with major scalable font formats </li></ul></ul><ul><ul><li>JF_02 Must be applicable to XHTML/HTML5/SVG documents </li></ul></ul><ul><ul><li>JF_03 Should support the use of glyphs without code points </li></ul></ul><ul><ul><li>JF_04 Should be applicable to vertical oriented text as well </li></ul></ul><ul><ul><li>JF_05 Each glyph should optionally be defined separately </li></ul></ul>
  3. 3. Web Fonts Overview <ul><li>Web Fonts Specification </li></ul><ul><ul><li>Introduced in CSS Level 2 www.w3.org/TR/2008/REC-CSS2-20080411 </li></ul></ul><ul><ul><li>Enhanced in CSS Fonts Module Level 3 dev.w3.org/csswg/css3-fonts </li></ul></ul><ul><li>Major Features </li></ul><ul><ul><li>Supports downloadable fonts, local fonts, and system fonts </li></ul></ul><ul><ul><li>Font properties ('font-family', 'font-weight', 'font-stretch', 'font-style', 'font-variant', 'font-size', 'font-size-adjust', 'font') </li></ul></ul><ul><ul><li>Font reference rules (@font-face, 'src', 'unicode-range') </li></ul></ul><ul><ul><li>Font matching algorithm </li></ul></ul>
  4. 4. Referencing Web Fonts <ul><li>Multi Weights Example </li></ul><ul><ul><li>One rule for each weight </li></ul></ul><ul><ul><li>Use 'local' to use local fonts if available </li></ul></ul><ul><ul><li>Use 'url' to reference downloadable fonts </li></ul></ul><ul><li>Composite Font Example </li></ul><ul><ul><li>One rule for each language specific font subset file </li></ul></ul><ul><ul><li>Use &quot;-&quot; to specify range </li></ul></ul><ul><ul><li>Use &quot;?&quot; for any digit value </li></ul></ul><ul><ul><li>Download smaller subset file if the text contains only Latin characters </li></ul></ul>@font-face { font-family: Helvetica; src: local(Helvetica), url(fonts/Helvetica.ttf); } @font-face { font-family: Helvetica; font-weight: bold; src: local(&quot;Helvetica Bold&quot;), url(fonts/HelveticaBold.ttf); } @font-face { font-family: DroidSans; src: url(DroidSansJp.woff); unicode-range: U+3000-9FFF, U+FF??; } @font-face { font-family: DroidSans; src: url(DroidSans.woff); unicode-range: U+000-5FF, U+1 E 00-1 FFF , U+2000-2300 ; }
  5. 5. New in CSS Fonts Level 3 <ul><li>Renewed Font Format List </li></ul><ul><ul><li>&quot;truetype&quot;, &quot;truetype-aat&quot; : TrueType Font (.ttf) </li></ul></ul><ul><ul><li>&quot;opentype&quot;: OpenType Font (.ttf, .otf) </li></ul></ul><ul><ul><li>&quot;embedded-opentype&quot;: Embedded OpenType Font (.eot) </li></ul></ul><ul><ul><li>&quot;woff&quot;: WOFF Font (.woff) </li></ul></ul><ul><ul><li>&quot;svg&quot;: SVG Font (.svg) </li></ul></ul><ul><li>OpenType Features Support </li></ul><ul><ul><li>Kerning ('font-kerning') and ligatures ('font-variant-ligatures') </li></ul></ul><ul><ul><li>Subscript and superscript ('character-transform') </li></ul></ul><ul><ul><li>Alternates and swashes ('font-variant-alternates') </li></ul></ul><ul><ul><li>Capitalization ('font-variant-caps') </li></ul></ul><ul><ul><li>Numerical formatting ('font-variant-numeric') </li></ul></ul><ul><li>Same-origin Restriction </li></ul><ul><ul><li>Cross-Origin Resource Sharing (CORS) should be supported as well </li></ul></ul>
  6. 6. Handling Variations <ul><li>East Asian Text </li></ul><ul><ul><li>The editor's draft of CSS Fonts Level 3 introduced 'font-variant-east-asian' property </li></ul></ul><ul><ul><li>Supports OpenType Feature Tags (hojo-kanji, jis78, jis83, jis90, jis04, nlckanji, simplified, traditional, fwid, pwid) </li></ul></ul><ul><ul><li>OpenType UVS Subtable should be supported as well? </li></ul></ul><ul><li>Example of Variations </li></ul><ul><ul><li>JIS78 Forms (jis78) ■ Traditional Forms (traditional) </li></ul></ul><ul><ul><li>Proportionally Spaced Variants (pwid) </li></ul></ul>
  7. 7. WOFF Font Format <ul><li>WOFF Font Specification </li></ul><ul><ul><li>WOFF File Format 1.0 www.w3.org/TR/2010/WD-WOFF-20100727 </li></ul></ul><ul><ul><li>WOFF stands for Web Open Font Format </li></ul></ul><ul><li>Progress </li></ul><ul><ul><li>WebFonts Working Group launched in March 2010 </li></ul></ul><ul><ul><li>W3C Submission from Microsoft, Mozilla, and Opera in April </li></ul></ul><ul><ul><li>Already implemented on Firefox 3.6, Google Chrome 5, and IE9 Platform Preview 3 </li></ul></ul><ul><li>Major Features </li></ul><ul><ul><li>A GZIP compressed repackaging of TrueType/OpenType fonts </li></ul></ul><ul><ul><li>Added XML based extended metadata block </li></ul></ul><ul><ul><li>No DRM (WOFF fonts may not be reused as system fonts) </li></ul></ul><ul><ul><li>Same-origin restriction as well as CORS is supported </li></ul></ul>
  8. 8. SVG Fonts Overview <ul><li>SVG Fonts Specification </li></ul><ul><ul><li>Introduced in SVG 1.0 www.w3.org/TR/2001/REC-SVG-20010904 </li></ul></ul><ul><ul><li>Reduced the features in SVG Tiny 1.2 www.w3.org/TR/2008/REC-SVGTiny12-20081222 </li></ul></ul><ul><ul><li>Mandatory feature in SVG 1.1/2.0 (required for ACID3) </li></ul></ul><ul><li>Major Features </li></ul><ul><ul><li>Embedded within HTML/SVG documents or saved as a separate SVG file (GZIP compressed .svgz file is supported) </li></ul></ul><ul><ul><li>Define font with 'font' ('horiz-origin-x', 'horiz-adv-x') and 'font-face' elements ('font-family', 'font-weight', etc.) </li></ul></ul><ul><ul><li>Define each glyph with 'glyph' element ('unicode', 'glyph-name', 'd', 'arabic-form', 'lang', 'horiz-adv-x') </li></ul></ul><ul><ul><li>Hinted outline fonts is not supported </li></ul></ul>
  9. 9. Defining SVG Fonts <ul><li>Inline Font Example </li></ul><ul><ul><li>One 'glyph' for each glyph </li></ul></ul><ul><ul><li>'d' value contains path data defining the glyph outline </li></ul></ul><ul><ul><li>'unicode' value can be a character or string (to define ligatures, for example) </li></ul></ul><ul><li>External Font Example </li></ul><ul><ul><li>Font definition can be moved to local or downloadable files </li></ul></ul><ul><ul><li>Use 'font-face-uri' to point to external SVG Font files </li></ul></ul><ul><ul><li>Need to directly reference 'font' element (by using a fragment identifier) </li></ul></ul><defs><font horiz-adv-x=&quot;500&quot;> <font-face font-family=&quot;Vera&quot; units-per-em=&quot;1000&quot;> <glyph unicode=&quot;S&quot; glyph-name=&quot;S&quot; d=&quot;…&quot;> <glyph unicode=&quot;V&quot; glyph-name=&quot;V&quot; d=&quot;…&quot;> <glyph unicode=&quot;G&quot; glyph-name=&quot;G&quot; d=&quot;…&quot;> <missing-glyph d=&quot;…&quot;> </font-face> </font></defs> <text font-family=&quot;Vera&quot; font-size=&quot;100&quot;>SVG</text> <defs><font> <font-face font-family=&quot;Vera&quot;> <font-face-src> <font-face-uri xlink:href=&quot;Vera.svg#f&quot;/> </font-face-src> </font-face> </font></defs> <text font-family=&quot;Vera&quot; font-size=&quot;100&quot;>SVG</text>
  10. 10. New in SVG Tiny 1.2 <ul><li>No Arbitrary SVG </li></ul><ul><ul><li>Specify glyph outline only by using path data (with 'd' attribute) </li></ul></ul><ul><ul><li>'glyph' element in SVG 1.0/1.1 can contain arbitrary SVG graphic elements) </li></ul></ul><ul><li>No Vertical Orientation </li></ul><ul><ul><li>Unsupported 'font' element attributes: 'horiz-origin-y', 'vert-origin-x', 'vert-origin-y', 'vert-adv-y' </li></ul></ul><ul><ul><li>Unsupported 'font-face' element attributes: 'v-ideographic', ' v-alphabetic ', ' v-mathematical ', ' v-hanging ' </li></ul></ul><ul><ul><li>Unsupported 'glyph' element attributes: 'orientation', 'vert-origin-x', 'vert-origin-y', 'vert-adv-y' </li></ul></ul><ul><li>No External Font Descriptors </li></ul><ul><ul><li>'definition-src' element is not supported in SVG Tiny 1.2 and SVG 1.1 2 nd Edition </li></ul></ul>
  11. 11. Web Fonts Implementations <ul><li>WOFF is going to be supported everywhere </li></ul><ul><ul><li>SVG Fonts is the only choice for iPhone and iPad </li></ul></ul>   Chrome   Opera   Firefox  WebKit  Safari IE9  IE9 IE SVG WOFF EOT TrueType OpenType Web Browser
  12. 12. User Defined Characters <ul><li>EGLS Requirements </li></ul><ul><ul><li>EGLS_TK_01 Unicode 6.0 should be used for IVS and Emoji </li></ul></ul><ul><ul><li>EGLS_TK_02 SVG font format should be supported </li></ul></ul><ul><ul><li>EGLS_CHANG_R1 Characters outside of BMP can be EUDC </li></ul></ul><ul><ul><li>EGLS_CHANG_R2 EUDC can be embedded inside EPUB file </li></ul></ul><ul><ul><li>EGLS_CHANG_R3 Mechanism to assign resource for each font </li></ul></ul><ul><ul><li>EGLS_CHANG_R4 E mbed mapping information in EPUB file </li></ul></ul><ul><li>Additional Requirements </li></ul><ul><ul><li>JF_01 Must be compatible with major scalable font formats </li></ul></ul><ul><ul><li>JF_02 Must be applicable to XHTML/HTML5/SVG documents </li></ul></ul><ul><ul><li>JF_03 Should support the use of glyphs without code points </li></ul></ul><ul><ul><li>JF_04 Should be applicable to vertical oriented text as well </li></ul></ul><ul><ul><li>JF_05 Each glyph should optionally be defined separately </li></ul></ul>
  13. 13. Solution Using SVG Fonts <ul><li>Obvious Advantages </li></ul><ul><ul><li>Supported by major browsers and tools (TK_02, JF_01) </li></ul></ul><ul><ul><li>Compatible and should work well with Unicode IVS (TK_01) </li></ul></ul><ul><ul><li>Can be embedded directly into contents (CHANG_R2, JF_02) </li></ul></ul><ul><ul><li>Can be applicable to vertical oriented text (JF_04) </li></ul></ul><ul><ul><li>Each glyph can be stored in a separate file (JF_05) </li></ul></ul><ul><li>Disadvantages </li></ul><ul><ul><li>Unable to include hinting information in SVG Fonts </li></ul></ul><ul><ul><li>Size can be larger than other formats without compression </li></ul></ul><ul><li>Needs Investigation </li></ul><ul><ul><li>Can we add characters to existing fonts? (CHANG_03) </li></ul></ul><ul><ul><li>Can we support glyphs without code points? (JF_03) </li></ul></ul>
  14. 14. Extending Existing Fonts <ul><li>Extended Font Example </li></ul><ul><ul><li>Add @font-face rule for each user defined character </li></ul></ul><ul><ul><li>Use 'unicode-range' to specify the code point </li></ul></ul><ul><ul><li>Default 'unicode-range' value is U+0-10FFFF </li></ul></ul><ul><ul><li>Rules defined later take precedence </li></ul></ul><ul><li>Referencing from HTML </li></ul><ul><ul><li>Just use the extended font </li></ul></ul><ul><ul><li>Referencing user defined characters is easy as log as the code point is assigned </li></ul></ul>@font-face { font-family: Helvetica; src: local(Arial); } @font-face { font-family: Helvetica; src: url(HelveticaEx01.svg#f); unicode-range: U+E758; } @font-face { font-family: Helvetica; src: url(HelveticaEx02.svg#f); unicode-range: U+E759; } body { font-family: Helvetica; } <html> <body> <p>SVG</p> </body> </html>
  15. 15. Glyphs without Code Points <ul><li>SVG Glyph Example </li></ul><ul><ul><li>Use unique identifier in stead of a character as the value of 'unicode' </li></ul></ul><ul><ul><li>SVG user agent recognizes the specific sequence of characters and replace it with user defied glyph </li></ul></ul><ul><li>Referencing from HTML </li></ul><ul><ul><li>Use 'image' element to display a glyph image </li></ul></ul><ul><ul><li>You can directly embed an SVG fragment into the HTML5 document </li></ul></ul><defs><font horiz-adv-x=&quot;500&quot;> <font-face font-family=&quot;Vera&quot; units-per-em=&quot;1000&quot;> <glyph unicode=&quot;&edanashi;&quot; glyph-name=&quot;edanashi&quot; d=&quot;…&quot;> <missing-glyph d=&quot;…&quot;> </font-face> </font></defs> <text font-family=&quot;Vera&quot; font-size=&quot;100&quot;>&edanashi;</text> body { font-family: Vera; } <html> <body> <p>Edanashi in HTML: <img src=&quot;edanashi.svg#f/> </p> <svg> <text>Edanashi in SVG: &edanashi;</text> </svg> </body> </html>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×