Your SlideShare is downloading. ×
User Defined Characters and SVG Fonts
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

User Defined Characters and SVG Fonts

2,807

Published on

EPUB WG EGLS Sub-group Meeting …

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,807
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. User Defined Characters and SVG Fonts August 4, 2010 Jun Fujisawa [email_address]
  • 2. 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
  • 3. 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
  • 4. 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 ; }
  • 5. 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
  • 6. 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)
  • 7. 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
  • 8. 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
  • 9. 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>
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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)
  • 14. 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>
  • 15. 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>

×