User Defined Characters Solution Proposal

User Defined Characters Solution Proposals October 6, 2010 Jun Fujisawa [email_address]

EGLS Requirements ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Solution for Font Embedding ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Web Fonts Implementations ,[object Object],[object Object],   Chrome   Opera   Firefox  WebKit  Safari IE9  IE9 IE SVG WOFF EOT TrueType OpenType Web Browser

Solution A for In-line Graphics ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

SVG In-line Graphics ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"> <title>IPA Mincho</title> <path fill="black" d=" 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="http://www.w3.org/1999/xhtml"> <head> <title>Solution A</title> </head> <body> <div style="font-size:100px;"> なにぬね <img src="IPAMincho.svg" width="100" height="100"> </div> </body> </html>

Solution B for In-line Graphics ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

SVG Fonts In-line Graphics ,[object Object],[object Object],[object Object],[object Object],[object Object],<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Solution B</title> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> <defs> <font horiz-origin-x="0" horiz-adv-x="1000" id="IPAMincho"> <font-face font-family="IPAMincho" units-per-em="1000" ascent="880" descent="120"/> <glyph unicode=" の " glyph-name =" の " vert-origin-y="786" vert-adv-y="870" d="M505 683 Q512 642 512 585…"/> </font> </defs> </svg> </head> <body> <div style="font-size:100px;"> なにぬね <span style="font-family:IPAMincho;"> の </span> </div> </body> </html>

Rendering Quality ,[object Object],[object Object],Rendered by Safari on Mac OS X

Effect of Hinting ,[object Object],Rendered by Firefox on Windows XP, Windows 7, and Mac OS X, respectively

Web Fonts Overview ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Web Fonts Examples ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],@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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

WOFF Font Format ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Handling Variations ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

SVG Fonts Overview ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

SVG Fonts Examples ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<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> </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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Extending Existing Fonts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],@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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<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> </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>

User Defined Characters Solution Proposal

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (18)

Ähnlich wie User Defined Characters Solution Proposal

Ähnlich wie User Defined Characters Solution Proposal (20)

Mehr von Jun Fujisawa

Mehr von Jun Fujisawa (8)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

User Defined Characters Solution Proposal