• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
User Defined Characters and SVG Fonts
 

User Defined Characters and SVG Fonts

on

  • 3,112 views

EPUB WG EGLS Sub-group Meeting

EPUB WG EGLS Sub-group Meeting
August 4, 2010

Statistics

Views

Total Views
3,112
Views on SlideShare
3,111
Embed Views
1

Actions

Likes
0
Downloads
28
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    User Defined Characters and SVG Fonts User Defined Characters and SVG Fonts Presentation Transcript

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