User Defined Characters Solution Proposal


Published on

Presentation material for EPUB WG EGLS Taipei Meeting.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

User Defined Characters Solution Proposal

  1. 1. User Defined Characters Solution Proposals October 6, 2010 Jun Fujisawa [email_address]
  2. 2. EGLS Requirements <ul><li>EGLS_CG3 In-line Graphics </li></ul><ul><ul><li>It should be possible for content providers to embed graphics in text with the intention that the graphics should be aligned, positioned, and sized well with the surrounding text even when the user or reading system selects any writing mode and any font </li></ul></ul><ul><ul><li>Rationale: People need something beyond characters or character variations commonly available in the present computing environment, which is typically based on Unicode or ISO/IEC 10646 </li></ul></ul><ul><li>EGLS_CG4 Font Embedding </li></ul><ul><ul><li>It should be possible for content providers to embed fonts such as SVG Fonts and WOFF Fonts as part of EPUB documents </li></ul></ul><ul><ul><li>Rationale: Fonts for some characters or character variants might not be always available in any reading system </li></ul></ul>
  3. 3. Solution for Font Embedding <ul><li>EGLS_CG4 Solution A </li></ul><ul><ul><li>Use '@font-face' rule specified in CSS Fonts Level 3 to reference Web Fonts (WOFF Fonts, SVG Fonts, or OpenType) embedded within the same EPUB container file </li></ul></ul><ul><ul><li>EPUB 2.0 already supports the use of '@font-face' rule specified in CSS Level 2 </li></ul></ul><ul><ul><li>Using WOFF Fonts is supported on most browsers and appropriate for general font embedding </li></ul></ul><ul><li>Issues </li></ul><ul><ul><li>CSS Level 2 Revision 1 does not specify '@font-face' rule </li></ul></ul><ul><ul><li>CSS Fonts Level 3 is currently in WD status and may not become CR status in time for EPUB 3.0 </li></ul></ul><ul><ul><li>WOFF File Format is currently in WD status and may not become CR status in time for EPUB 3.0 </li></ul></ul>
  4. 4. Web Fonts Implementations <ul><li>WOFF Fonts are going to be supported everywhere </li></ul><ul><ul><li>SVG Fonts are currently 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
  5. 5. Solution A for In-line Graphics <ul><li>EGLS_CG 3 Solution A </li></ul><ul><ul><li>Use HTML 'img' element to reference an SVG graphics file or SVG fragment in the same HTML file </li></ul></ul><ul><ul><li>This solution also satisfies EGLS_CG4 </li></ul></ul><ul><ul><li>SVG is a vector graphic format and better than raster image format like PNG in terms of scalability </li></ul></ul><ul><ul><li>Using SVG graphics is supported on most browsers and appropriate for describing small numbers of user defined characters or glyphs </li></ul></ul><ul><ul><li>CSS 2D Transforms can be used to rotate SVG graphics to better support mixed text layout </li></ul></ul><ul><li>Issues </li></ul><ul><ul><li>It may be difficult to align SVG graphics with the baseline of the surrounding text </li></ul></ul><ul><ul><li>It may be difficult to change SVG graphics based on the font family used for the surrounding text </li></ul></ul>
  6. 6. SVG In-line Graphics <ul><li>SVG File Example </li></ul><ul><ul><li>Use 'path' element to define a character glyph </li></ul></ul><ul><ul><li>Use 'viewBox' attribute to use local coordinate system </li></ul></ul><ul><ul><li>The path describes a Hiragana character &quot; の &quot; </li></ul></ul><ul><li>HTML File Example </li></ul><ul><ul><li>Use 'img' element to display SVG graphics </li></ul></ul><ul><ul><li>Referencing an SVG file from 'img' element is already supported on most browsers </li></ul></ul><svg xmlns=&quot;; viewBox=&quot;0 0 1000 1000&quot;> <title>IPA Mincho</title> <path fill=&quot;black&quot; d=&quot; M505 683 Q512 642 512 585 Q512 417 393 225 Q338 137 266 88 Q236 70 214 70 Q178 70 146 107 Q91 169 91 279 Q91 450 218 582 Q348 716 528 716 Q666 716 762 649 Q901 553 901 378 Q901 193 767 98 Q668 27 488 16 L482 41..../ > </svg> <html xmlns=&quot;;> <head> <title>Solution A</title> </head> <body> <div style=&quot;font-size:100px;&quot;> なにぬね <img src=&quot;IPAMincho.svg&quot; width=&quot;100&quot; height=&quot;100&quot;> </div> </body> </html>
  7. 7. Solution B for In-line Graphics <ul><li>EGLS_CG 3 Solution B </li></ul><ul><ul><li>Use SVG 'font' element to define graphics as SVG Fonts and put that definition directly into HTML 'head' element. In the same HTML file, we can just specify the 'font-family' for the SVG Font to display the corresponding graphics. </li></ul></ul><ul><ul><li>This solution also satisfies EGLS_CG4. </li></ul></ul><ul><ul><li>SVG Fonts behave just like normal fonts, and the text can be aligned, selected, and searched very easily. </li></ul></ul><ul><li>Issues </li></ul><ul><ul><li>SVG Fonts may not be supported on some browsers (IE and Firefox). </li></ul></ul><ul><ul><li>SVG Fonts don't support hinting and may not be rendered in highest quality on some display conditions. </li></ul></ul><ul><ul><li>SVG 1.1 supports both vertical and horizontal layout for SVG Fonts, but SVG Tiny 1.2 only supports horizontal layout. </li></ul></ul>
  8. 8. SVG Fonts In-line Graphics <ul><li>HTML File Example </li></ul><ul><ul><li>Use SVG 'glyph' element to define a character glyph </li></ul></ul><ul><ul><li>Use HTML 'span' element to specify the font family name of the SVG Font </li></ul></ul><ul><ul><li>The use of CSS '@font-face' rule is not required </li></ul></ul><ul><ul><li>Any glyphs without code points can be defined </li></ul></ul><html xmlns=&quot;;> <head> <title>Solution B</title> <svg xmlns=&quot;; width=&quot;100&quot; height=&quot;100&quot;> <defs> <font horiz-origin-x=&quot;0&quot; horiz-adv-x=&quot;1000&quot; id=&quot;IPAMincho&quot;> <font-face font-family=&quot;IPAMincho&quot; units-per-em=&quot;1000&quot; ascent=&quot;880&quot; descent=&quot;120&quot;/> <glyph unicode=&quot; の &quot; glyph-name =&quot; の &quot; vert-origin-y=&quot;786&quot; vert-adv-y=&quot;870&quot; d=&quot;M505 683 Q512 642 512 585…&quot;/> </font> </defs> </svg> </head> <body> <div style=&quot;font-size:100px;&quot;> なにぬね <span style=&quot;font-family:IPAMincho;&quot;> の </span> </div> </body> </html>
  9. 9. Rendering Quality <ul><li>SVG Fonts Example by John Daggett </li></ul><ul><ul><li> </li></ul></ul>Rendered by Safari on Mac OS X
  10. 10. Effect of Hinting <ul><li>Meiryo Fonts Example by John Daggett </li></ul>Rendered by Firefox on Windows XP, Windows 7, and Mac OS X, respectively
  11. 11. Appendix
  12. 12. Web Fonts Overview <ul><li>Web Fonts Specification </li></ul><ul><ul><li>Introduced in CSS Level 2 </li></ul></ul><ul><ul><li>Enhanced in CSS Fonts Level 3 </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>
  13. 13. Web Fonts Examples <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 ; }
  14. 14. 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>
  15. 15. WOFF Font Format <ul><li>WOFF Font Specification </li></ul><ul><ul><li>WOFF File Format 1.0 </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>
  16. 16. 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>
  17. 17. SVG Fonts Overview <ul><li>SVG Fonts Specification </li></ul><ul><ul><li>Introduced in SVG 1.0 </li></ul></ul><ul><ul><li>Reduced the features in SVG Tiny 1.2 </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>
  18. 18. SVG Fonts Examples <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> </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>
  19. 19. 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>
  20. 20. 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>
  21. 21. 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> </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>