woff requirements for indian languages for indian languages in woff the indic fonts need to contain...
TRANSCRIPT
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
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
OPTIONAL
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 using above tool of some of the Indic
fonts(Normal) are given below:
Font (ttf) ttf (Kb) WOFF
(Kb)
WOFF2
(Kb)
Compression
in WOFF(%)
Compression
in WOFF2(%)
SakalBharati
Hindi
377 135 78 64.19 % 79.31%
SakalBharati
Bengali
366 163 110 55.46% 69.94%
SakalBharati
Kannada
233 105 66 54.93% 71.67%
SakalBharati
Assamese
365 163 109 55.34% 70.13%
SakalBharati
Nepali
377 136 78 63.92% 79.31%
SakalBharati
Oriya
344 141 89 59.01% 74.12%
SakalBharati
Gujarati
306 111 63 63.72% 79.41%
SakalBharati- 234 71 40 69.65% 82.90%
Punjabi
SakalBharati-
TamilNormal
295 118 73 60% 75.25%
SakalBharati
Maithili
378 135 78 64.8% 79.36%
Aparaj-
Devanagari
218 115 98 47.2% 55%
Gautmi-Telugu 251 120 105 52.1% 58.1%
Kalinga-Oriya 208 125 111 39.9% 46.6%
Kartika-
Malyalam
129 72 67 44.1% 48.6%
Kokila-
Devanagari
197 106 94 46.1% 52.2%
Latha-Tamil 119 67 62 43.6% 47.8%
Mangal-
Devanagari
202 97 86 51.9 57.4
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