Upload
jun-fujisawa
View
110
Download
5
Embed Size (px)
DESCRIPTION
EPUB WG EGLS Sub-group Meeting August 4, 2010
Citation preview
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 Embed 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 2www.w3.org/TR/2008/REC-CSS2-20080411
Enhanced in CSS Fonts Module Level 3dev.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 onlyLatin 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+1E00-1FFF, 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.0www.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.0www.w3.org/TR/2001/REC-SVG-20010904
Reduced the features in SVG Tiny 1.2www.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 defineligatures, 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 afragment identifier)
<defs><font horiz-adv-x="500"> <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></font></defs><text font-family="Vera" font-size="100">SVG</text>
<defs><font> <font-face font-family="Vera"> <font-face-src> <font-face-uri xlink:href="Vera.svg#f"/> </font-face-src> </font-face></font></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 2nd Edition
Web Fonts Implementations WOFF is going to be supported everywhere
SVG Fonts is the only choice for iPhone and iPad
Web BrowserTrueTypeOpenType
EOT WOFF SVG
IE IE9 IE9
Safari WebKit Firefox Opera Chrome
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 Embed 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 foreach user defined character
Use 'unicode-range' tospecify the code point
Default 'unicode-range'value is U+0-10FFFF
Rules defined later takeprecedence
Referencing from HTML Just use the extended font Referencing user defined
characters is easy as log asthe 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>SVG</p> </body></html>
Glyphs without Code Points SVG Glyph Example
Use unique identifier instead of a character asthe value of 'unicode'
SVG user agent recognizesthe specific sequence ofcharacters and replace itwith user defied glyph
Referencing from HTML Use 'image' element to
display a glyph image You can directly embed
an SVG fragment into theHTML5 document
<defs><font horiz-adv-x="500"> <font-face font-family="Vera" units-per-em="1000"> <glyph unicode="&edanashi;" glyph-name="edanashi" d="…"> <missing-glyph d="…"> </font-face></font></defs><text font-family="Vera" font-size="100">&edanashi;</text>
body { font-family: Vera; }
<html> <body> <p>Edanashi in HTML: <img src="edanashi.svg#f/> </p> <svg> <text>Edanashi in SVG: &edanashi;</text> </svg> </body></html>