User Defined Characters and SVG Fonts

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-face font-family="Vera" units-per-em="1000"> <glyph unicode="S" glyph-name="S" d="…"> <glyph unicode="V" glyph-name="V" d="…"> <glyph unicode="G" glyph-name="G" d="…"> <missing-glyph d="…"> </font-face> </defs> <text font-family="Vera" font-size="100">SVG</text> <defs> <font-face font-family="Vera"> <font-face-src> <font-face-uri xlink:href="Vera.svg#f"/> </font-face-src> </font-face> </defs> <text font-family="Vera" font-size="100">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> SVG </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-face font-family="Vera" units-per-em="1000"> <glyph unicode="&edanashi;" glyph-name="edanashi" d="…"> <missing-glyph d="…"> </font-face> </defs> <text font-family="Vera" font-size="100">&edanashi;</text> body { font-family: Vera; } <html> <body> Edanashi in HTML: <img src="edanashi.svg#f/> <svg> <text>Edanashi in SVG: &edanashi;</text> </svg> </body> </html>

User Defined Characters and SVG Fonts

by Jun Fujisawa

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

User Defined Characters and SVG Fonts Presentation Transcript