WOFF requirements for Indian languages 1. Introduction 2. WOFF file format 2.1. File header 2.2. Metadata 2.3. Private data 3. Why WOFF required 4. Comparison between WOFF and WOFF2 5. Why use WOFF for Indian languages 6. Steps to display Indic fonts in WOFF format on browsers 6.1. Conversion of other fonts to WOFF 6.2. Using WOFF in CSS(Cascading style sheet) 6.3. Screenshots of websites using WOFF 7. Compression compared to WOFF & WOFF2 with Indic fonts 8. References
1. Introduction WOFF (the Web Open Font Format) is a web font format. It uses a compressed version of the same table-based sfnt structure used by TrueType, OpenType, and Open Font Format, but adds metadata and private-use data structures, including predefined fields allowing vendors to provide license information if desired. The WOFF format is not expected to replace other formats such as TrueType/Open Type/Open Font Format or SVG fonts, but provides an alternative solution for use cases where these formats may be less performant, or where licensing considerations make their use less acceptable. 2. WOFF file structure The structure of WOFF files is similar to the structure of sfnt fonts: a table directory containing lengths and offsets to individual font data tables, followed by the data tables themselves. The sfnt structure is described fully in the TrueType, Open Type and Open Font Format specifications. The main body of the file consists of the same collection of font data tables as the input sfnt font, stored in the same order, except that each table may be compressed, and the sfnt table directory is replaced by the WOFF table directory. A complete WOFF file consists of several blocks: a 44 -byte header, immediately followed (in this order) by a variable - size table directory, a variable number of font tables, an optional block of extended metadata, and an optional block of private data. Except for padding with a maximum of three null bytes in places where 4 - byte alignment of a table length or block offset is specified, there must not be any extraneous data between the data blocks or font data tables indicated by the WOFF header and table directory, or beyond the last such block or table. The file must also be rejected as invalid if the offsets and lengths of any data blocks or font tables indicate overlapping byte ranges of the file, or ranges that would extend beyond the end of the file.
WOFF Header Font data Metadata OPTIONAL Private data 2.1. File header It Includes identifying signature, indicates the specific kind of font data (TTF, TF, etc.), provides the file parsing information, font table directory, etc. it also has a font version number, offsets to additional data chunks, and the number of entries in the table directory that immediately follows the header
2.2. Font data The font data tables in the WOFF file are exactly the same as the tables in the input font, except that each table MAY have been compressed. 2.3. Metadata An optional block of extended metadata represented in XML format and compressed for storage in the WOFF file. The schema for the extended metadata XML is described below.
2.4. Private data An optional block of private data for the font designer, foundry, or vendor to use. The content of this data MUST NOT affect font usage or load behaviour of user agents. User agents should make no assumptions about the content of a private block; it may (for example) contain ASCII or Unicode text, or some vendor-defined binary data, and it may be compressed or encrypted, but it has no publicly defined format. 3. Why WOFF required WOFF provides a lot of advantages over other font choices. WOFF fonts have the following benefits: WOFF fonts are compressed, so they are smaller than other types of font files
WOFF fonts can help with internationalization because you can embed fonts with characters from other languages. Like all CSS styled text, fonts styled with WOFF are more search engine friendly. WOFF files include typographical information like contextual forms and old style figures. This gives your web pages better typography because you're using the correct characters, not just approximations. 4. Comparison between WOFF and WOFF2 WOFF format was designed to provide lightweight, easy-to-implement compression of font data, suitable for use with CSS @font-face rules. Any properly licensed TrueType/OpenType/Open Font Format file can be packaged in WOFF format for Web use. User agents decode the WOFF file to restore the font data such that it will display identically to the input font. The WOFF format also allows additional metadata to be attached to the file; this can be used by font designers or vendors to include licensing or other information, beyond that present in the original font. Such metadata does not affect the rendering of the font in any way, but may be displayed to the user on request. WOFF 2 format was designed to provide a reasonably easy-to-implement compression of font data with significantly better compression than previous techniques, suitable for use with CSS @font-face rules. The improvement in compression rates, compared to previously developed WOFF 1.0 format [WOFF1] are realized due to improved entropy coding and font data preprocessing and optimization step that reduces built-in redundancy of various font data structures. The evolution of compression gain from WOFF is given in below section. 5. Requirements for Indian languages in WOFF The Indic fonts need to contain a glyph for each allocated code point of the script. For example, Hindi would contain glyphs for the allocated code points. All the Indic Glyph set should be incorporated in the Font Tables. So
there is need to define Glyph set of all Indic characters in the WOFF file structure including the following : (a) glyphs for conjuncts (b) variants for vowel signs (matras), vowel modifiers (Chandrabindu, Anuswar), the consonant modifier (Nukta) WOFF is used to compress the other Indic fonts and give the following advantages : The font data is compressed, so multilingual sites using WOFF will use less bandwidth and will load faster than equivalent uncompressed TrueType or OpenType files. Many font vendors that are unwilling to license their TrueType or OpenType format fonts for use on the web will license WOFF format fonts. This improves availability of fonts to site designers. Both proprietary and free-software browser vendors like the WOFF format, so it has the potential of becoming a truly universal, interoperable font format for the web, unlike other current font formats. 6. Implementation to display Indic fonts in WOFF format on browsers 6.1. Conversion of other fonts to WOFF The first step is to convert OTF/TTF/Open font format to WOFF. The various tools are available on the web for conversion. Some of the tools references are given below : http://everythingfonts.com/ttf-to-woff http://onlinefontconverter.com/ http://www.font2web.com/
http://www.softpedia.com/get/others/font-utils/free-ttf-to- WOFF-Converter.shtml Compression results given by fonts(normal) are given below: using above tool of some of the Indic Font (ttf) ttf (Kb) WOFF WOFF2 Compression Compression (Kb) (Kb) in WOFF(%) in WOFF2(%) SakalBharati 377 135 78 64.19 % 79.31% Hindi SakalBharati 366 163 110 55.46% 69.94% Bengali SakalBharati 233 105 66 54.93% 71.67% Kannada SakalBharati 365 163 109 55.34% 70.13% Assamese SakalBharati 377 136 78 63.92% 79.31% Nepali SakalBharati 344 141 89 59.01% 74.12% Oriya SakalBharati 306 111 63 63.72% 79.41% Gujarati SakalBharati- 234 71 40 69.65% 82.90%
Punjabi 295 118 73 60% 75.25% TamilNormal SakalBharati 378 135 78 64.8% 79.36% Maithili 218 115 98 47.2% 55% Devanagari Gautmi-Telugu 251 120 105 52.1% 58.1% Kalinga-Oriya 208 125 111 39.9% 46.6% 129 72 67 44.1% 48.6% Malyalam 197 106 94 46.1% 52.2% Devanagari Latha-Tamil 119 67 62 43.6% 47.8% SakalBharati- Aparaj- Kartika- Kokila- Mangal- 202 97 86 51.9 57.4 Devanagari Raavi-Gurmukhi 93 46 42 50.5% 54.8% Shruti-Gujarati 264 117 102 55.6% 61.3% Vani-Telugu 378 136 108 64% 71.4% Vijaya-Tamil 168 84 76 50% 54.7%
Vrinda-Bengali 254 130 112 48.8% 55.9% 6.2. Using WOFF in CSS(Cascading style sheet) The primary purpose of the WOFF format is to package fonts linked to Web documents by means of CSS @font-face rules. User agents supporting the WOFF file format for linked fonts must respect the requirements of the CSS3 Fonts specification.in particular, such linked fonts are only available to the documents that reference them; they MUST NOT be made available to other applications or documents on the user's system. The WOFF format is intended for use with @font -face to provide fonts linked to specific Web documents. The @font-face CSS property to use WOFF fonts for text in web content. It works exactly like OpenType and TrueType format fonts do, except will likely let your content download more efficiently due to the addition of compression. @font-face { font-family: 'MyWebFont'; src: url('myfont2.woff2') format('woff2'); url('myfont.woff') format('woff'); Style-linked fonts are being used in all HTML elements that usually display variants of their default fonts, e. g. em (emphasis: italic by default) and strong (strong emphasis: bold by default). Use the font-weight and font-style properties inside your @font-face rules to define groups of style-linked fonts under a common family name:
@font-face { font-family: Unit; src: url("/fonts/unitwebpro-regular.woff") format("woff"); } @font-face { font-family: Unit; src: url("/fonts/unitwebpro-bold.woff") format("woff"); font-weight: bold; } @font-face { font-family: Unit; src: url("/fonts/unitwebpro-italic.woff") format("woff"); font-style: italic; } @font-face { font-family: Unit; src:url("/fonts/unitwebpro-bolditalic.woff") format("woff");
font-weight: bold; font-style: italic; } p { font-family: Unit, Arial, sans-serif; line-height: 1.35em; } 6.3. Screenshots of Desktop and mobile browsers using WOFF Text display on browsers after converting ttf font to woff of some of the Indic languages are shown below: i. Hindi Font : SakalBharati Hindi Normal.woff ii. Bengali Fiont : SakalBharati Bengali.woff
iii. Gujarati font : SakalBharatiGujarati.woff iv. Tamil font : SakalBharati-TamilNormal.woff v. Punjabi font : SakalBharatiPunjabiNormal.woff vi. Kannada font : SakalBharatiKannada.woff
Mobile browsers : The test results of some of the Indic languages in simulator are shown below : iphone4 simulator Hindi Bengali Gujarati Kannada
Nepali Punjabi Tamil
Android version 4.4.2 Hindi
Bengali Gujarati
Nepali Kannada
Punjabi Tamil 7. References 1. http://www.w3.org/tr/woff/ 2. http://www.w3.org/tr/woff2/ 3. http://everythingfonts.com/ttf-to-woff 4. https://developer.mozilla.org/en-us/docs/web/guide/woff 5. http://iphone4simulator.com/