DOCSLIB.ORG

Cufón: Custom Font Embedding Technique for Web

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Cufón: Custom Font Embedding Technique for Web Technology Update Cufón: Custom Font Embedding Technique for Web Cufón, pronounced as attributes of Cufón font selectors. Koofo, is one among the Well, such other techniques, even popular font replacement with their certain merits, still remain any of you would painfully tricky to set up and use. techniques of its kind, have been curi- Prior to these developments, web which has attained much ous to know how sites were constrained by pages dis- attention and popularity Msome websites and blog pages display playing only the web-safe fonts, awesome choice of fonts with which are still a handful. Though among web developers. smoother curves on your browsers. designers and developers used Thanks to Simo Kinnuenen, You would have also noticed that images and splash as alternatives a Finland-based web guru such web pages stand out visually (many still do the same), these are attractive and mind grabbing. Well, either non-accessible, non-scalable or who developed this kudos to the several researchers and require plug-ins to display such vari- technique, which has web developers for their efforts in ety of fonts on web pages. evolved and enabled us to making it possible for us to embed numerous customized fonts so as to WHY CUFÓN? use non-web, based fonts on make the page look unique and spe- Cufón has a better edge over the oth- web pages with much ease. cial. Now, with some extra effort ers due to its specific merits: along the process of website develop- ment, you too can make this happen 1. It uses features that are natively on your website. Needless to say, all supported. Hence the client these come with some concerns of machine requires no plug-ins. fonts licensing and certain technolo- 2. Ithas better Browser Compatibili- gy limitations for accessibility and ty. Cufon works on every major user experience. Like many other browser available on net now. designers who admire and get 3. It is easy to use. Cufon requires no inspired of the beauty and function or almost zero configuration for of fonts, which significantly enhance standard use cases. the web surfing experience, I happen 4. Speed of rendering is fast, even for to be one who is curiously observant sufficiently large amounts of text. about how emerging technologies draw and extend boundaries for HOW DOES CUFÓN WORK? expanding possibilities. Cufón setup and use consists of two individual parts - a Font Generator, CUFÓN which converts fonts to a proprietary Cufon is a JavaScript based font format and a Rendering Engine replacement technique, a popular of written in JavaScript. its kind and an effective alternative to the earlier techniques such as sIFR THE FONT GENERATOR (Scalable Inman Flash Replacement) This is a bit more than a web-based and FLIR (Face Lift Image interface to FontForge (a typeface Replacement). Cufon emerged editor program). Initially, the genera- MOHAN DAS Technical Director trumps among the others for many, tor builds a custom FontForge script NIC HQ being faster, by using normal CSS based on user input and then runs it, [email protected] (Cascading Style Sheet) to change the which saves the font as an SVG July 2011 informatics.nic.in 27 Technology Update (Scalable Vector Graphic)font. The sets of drawing commands provided by tion visually but when you select it and SVG font is then parsed and its path the canvas API. This turns out to be hit ctrl+c you will be able to paste it.) converted to VML (Vector Markup somewhat tricky initially, but a solu- In screen readers, each word in text Language) paths. The resulting docu- tion emerged after the second Engine rendered by Cufón being a separate ment is then converted to JSON complete rewrites in the form of code span element, it makes several screen (JavaScript Object Notation) with a generation and caching, resulting in a readers such as VoiceOver, FireVox, blend of functional Javascript. This very fast renderer. Inline SVG is sur- ORCA, Window-Eyes and Opera Voice has many advantages: prisingly slow in a few browsers that read: The. Text. As. If. Each. Word. really supported it properly. Was. Separated. By. A. Full. Stop. In To include a font, one just needs to some cases the screen reader will stop load it with the standard <script> CUFÓN AND ACCESSIBILITY after reading the first word of a Cufón- tag as any other JavaScript file and ISSUES replaced sentence. Setting the separate it would be registered automatically. Along with many advantages of using option to 'none' in the Cufón API is No requirement to manually parse Cufón over other alternatives, there found to be a way to avoid this prob- the file on client-side repeatedly. are also issues regarding web accessi- lem. By doing this, Cufón does not External JavaScript files block exe- bility which are yet to be resolved. But wrap each word in a separate span ele- cution until they are loaded, which the initial inability of text selection in ment. helps us to achieve a flicker-free, clean repla- CONCLUSION cement. Despite having some yet to It compresses fonts be resolved issues of font extremely well. A com- security, for a huge lot, pressed font usually Cufón still remains a weighs 80 to 60% less favourite technique for font than the original. The embedding. For some who process is then repeated feels '@font-face' or a for the rest of the fonts 'TypeKit' style of service provided to the better for usage of large Generator and the number of fonts, they are resulting JavaScript file still constrained with cer- is sent back to the client tain font rendering issues with a distinctive file- on some OS's or browsers. name. Fonts that look brilliant on Chrome in OSX (mac), look THE RENDERER terrible in Windows XP In comparison, this part is Firefox, for example…. slightly tougher. The Renderer consists of fur- With the evolving research ther 3 parts: A Core and activities and innovative two Rendering Engines. web font managing tech- A Core provides the API niques, we can anticipate (Application Program newer developments and Interface) and common surprises from Cufón and functional aspects. One other font handling tech- Renderer out of the two, niques supported by robust renders VML shapes, while technology. In general, the other Rendering embedding websites with Engine uses the widely fonts enabling accessibility, supported HTML5<canvas> element. Cufón has been worked out to a con- which enhances user experience for all, Since the path data is already VML, a siderable extent. In IE(6-8), Safari 4, will always be an integral part of an bit of work is needed in the VML Chrome and FireFox3 you are still able ideal process of web development, engine. The canvas engine thus must to select the original HTML text. thus supporting the well-accepted convert all paths to the corresponding (FireFox3 won't show the text selec- thought of Inclusive Web design. 28 informatics.nic.in July 2011.
Load more

Recommended publications
  • 0321722132.Pdf
    Stunning CSS3: A project-based guide to the latest in CSS Zoe Mickley Gillenwater New Riders 1249 Eighth Street Berkeley, CA 94710 (510) 524-2178 Fax: (510) 524-2221 Find us on the Web at www.newriders.com To report errors, please send a note to [email protected] New Riders is an imprint of Peachpit, a division of Pearson Education Copyright © 2011 by Zoe Gillenwater Acquisitions Editor: Wendy Sharp Production Editor: Hilal Sala Project/Copy Editor: Wendy Katz Technical Editor: Chris Mills Cover design: Charlene Charles-Will Interior design: Mimi Heft, Charlene Charles-Will Compositor: Danielle Foster Indexer: Emily Glossbrenner Notice of Rights All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For information on getting permission for reprints and excerpts, contact [email protected]. Notice of Liability The information in this book is distributed on an “As Is” basis, without warranty. While every precaution has been taken in the preparation of the book, neither the author nor New Riders shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the instructions contained in this book or by the computer software and hardware products described in it. Trademarks Acrobat, Dreamweaver, Fireworks, and Photoshop are all trademarks or registered trade- marks of Adobe Systems, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks.
    [Show full text]
  • Web Typography │ 2 Table of Content
    Imprint Published in January 2011 Smashing Media GmbH, Freiburg, Germany Cover Design: Ricardo Gimenes Editing: Manuela Müller Proofreading: Brian Goessling Concept: Sven Lennartz, Vitaly Friedman Founded in September 2006, Smashing Magazine delivers useful and innovative information to Web designers and developers. Smashing Magazine is a well-respected international online publication for professional Web designers and developers. Our main goal is to support the Web design community with useful and valuable articles and resources, written and created by experienced designers and developers. ISBN: 978-3-943075-07-6 Version: March 29, 2011 Smashing eBook #6│Getting the Hang of Web Typography │ 2 Table of Content Preface The Ails Of Typographic Anti-Aliasing 10 Principles For Readable Web Typography 5 Principles and Ideas of Setting Type on the Web Lessons From Swiss Style Graphic Design 8 Simple Ways to Improve Typography in Your Designs Typographic Design Patterns and Best Practices The Typography Dress Code: Principles of Choosing and Using Typefaces Best Practices of Combining Typefaces Guide to CSS Font Stacks: Techniques and Resources New Typographic Possibilities with CSS 3 Good Old @Font-Face Rule Revisted The Current Web Font Formats Review of Popular Web Font Embedding Services How to Embed Web Fonts from your Server Web Typography – Work-arounds, Tips and Tricks 10 Useful Typography Tools Glossary The Authors Smashing eBook #6│Getting the Hang of Web Typography │ 3 Preface Script is one of the oldest cultural assets. The first attempts at written expressions date back more than 5,000 years ago. From the Sumerians cuneiform writing to the invention of the Gutenberg printing press in Medieval Germany up to today՚s modern desktop publishing it՚s been a long way that has left its impact on the current use and practice of typography.
    [Show full text]
  • Preservation with PDF/A (2Nd Edition)
    01000100 01010000 Preservation 01000011 with PDF/A (2nd Edition) 01000100 Betsy A Fanning 01010000 AIIM 01000011 01000100 DPC Technology Watch Report 17-01 July 2017 01010000 01000011 01000100 01010000 01000011 Series editors on behalf of the DPC Charles Beagrie Ltd. 01000100 Principal Investigator for the Series Neil Beagrie 01010000 01000011 © Digital Preservation Coalition 2017, Betsy A Fanning 2017, and AIIM 2017, unless otherwise stated ISSN: 2048-7916 DOI: http://dx.doi.org/10.7207/twr17-01 All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, without prior permission in writing from the publisher. The moral rights of the author have been asserted. First published in Great Britain in 2008 by the Digital Preservation Coalition. Second Edition 2017. Foreword The Digital Preservation Coalition (DPC) is an advocate and catalyst for digital preservation, ensuring our members can deliver resilient long-term access to digital content and services. It is a not-for-profit membership organization whose primary objective is to raise awareness of the importance of the preservation of digital material and the attendant strategic, cultural and technological issues. It supports its members through knowledge exchange, capacity building, assurance, advocacy and partnership. The DPC’s vision is to make our digital memory accessible tomorrow. The DPC Technology Watch Reports identify, delineate, monitor and address topics that have a major bearing on ensuring our collected digital memory will be available tomorrow. They provide an advanced introduction in order to support those charged with ensuring a robust digital memory, and they are of general interest to a wide and international audience with interests in computing, information management, collections management and technology.
    [Show full text]
  • EPUB Export in Libreoffice Writer by Miklos Vajna Software Engineer at Collabora Productivity 2018-02-03
    EPUB export in LibreOffice Writer By Miklos Vajna Software Engineer at Collabora Productivity 2018-02-03 @CollaboraOffice www.CollaboraOffice.com About Miklos ● From Hungary ● More blurb: https://vmiklos.hu/ ● Google Summer of Code 2010/2011 ● Rewrite of the Writer RTF import/export ● Then full-time LibreOffice hacker, SUSE ● Now a contractor at Collabora FOSDEM 2018, Brussels | Miklos Vajna 2 / 20 EPUB export in LibreOffice Motivation ● EPUB is kind of the new PDF ● PDF is still nice on larger screens – Not going away ● Reflowable text is a hard requirement – E-readers and similar devices ● LibreOffice has great PDF support ● Native EPUB support would be nice ● LibreOffice 6.0 brings basic support FOSDEM 2018, Brussels | Miklos Vajna 4 / 20 Hyperlinks ● Clickable hyperlinks are now supported: ● To get there: ● Basic text support ● Set of character formatting attributes ● Same for paragraphs FOSDEM 2018, Brussels | Miklos Vajna 5 / 20 Table support ● Custom cell widths ● Custom row height ● Row span FOSDEM 2018, Brussels | Miklos Vajna 6 / 20 Image support ● Image borders ● Image captions ● To have this: ● Support various wrap types ● Multiple anchor types FOSDEM 2018, Brussels | Miklos Vajna 7 / 20 Font embedding ● File → Properties → Font → Embed to turn this on ● E.g. Calibre supports it nicely ● No font data manipulation ● Same format as ODF FOSDEM 2018, Brussels | Miklos Vajna 8 / 20 Cover images ● How Readium renders it: FOSDEM 2018, Brussels | Miklos Vajna 9 / 20 Export options ● Metadata and other tweaks: FOSDEM 2018, Brussels
    [Show full text]
  • Web Type: the Next Big Thing NYC Web Design Meetup July 19, 2010
    Web Type: The Next Big Thing NYC Web Design Meetup July 19, 2010 Jaron J. Rubenstein Rubenstein Technology Group http://www.rubensteintech.com/ Overview Technology Licensing Foundries and Distributors Code Results Issues Conclusion References Copyright © 2010, Rubenstein Technology Group, Inc. All Rights Reserved. Evolution of Web Type Web Fonts – Arial, Times New Roman, etc. – Verdana, Georgia, Tahoma, Trebuchet MS, etc. Scalable Inman Flash Replacement (sIFR) – JavaScript/Flash text replacement – Requires Flash plugin – Limitations for animation, dynamic text, Cufón – Replaces text with VML (MSIE) or SVG (everything else) – Rather slow, complex, has some issues with text selection and screen rendering CSS and @font-face – Method of specifying and downloading fonts – Not “HTML5” , introduced in CSS2 in 1998, standardized in CSS3 – Works with MSIE4+, Firefox 3.5+, Safari 3.1+, Opera 10+ and Chrome 4.0+ – Specification: http://www.w3.org/TR/css3-fonts/#font-resources Copyright © 2010, Rubenstein Technology Group, Inc. All Rights Reserved. @font-face Font Formats TrueType (TTF) – Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+ Embedded OpenType (EOT) – Microsoft Internet Explorer 4+ Web Open Font Format (WOFF) – Firefox 3.6+, Internet Explorer 9+, Chrome 5+ Scalable Vector Graphics (SVG) – iPad and iPhone Scalable Vector Graphics, gzipped (SVGZ) – Compressed SVG files (via gzip compression) – iPad only Copyright © 2010, Rubenstein Technology Group, Inc. All Rights Reserved. Format Browser Compatibility Browser TrueType WOFF EOT SVG SVGZ MSIE 4 - 8 Yes MSIE 9 Soon Yes Firefox 3.5+ Yes Firefox 3.6+ Yes Yes Safari 3.1+ Yes Yes Yes Chrome 4+ Yes Soon Yes Yes Opera 10+ Yes Soon Yes Yes iPhone Yes iPad Yes Yes Source: http://www.fontspring.com/fontface Copyright © 2010, Rubenstein Technology Group, Inc.
    [Show full text]
  • The Typography of Law Reviews: a Typographic Survey of Legal Periodicals
    The Typography of Law Reviews: A Typographic Survey of Legal Periodicals Ambrogino Giusti Submitted to Professor Penny A. Hazelton to fulfill course requirements for Current Issues in Law Librarianship, LIS 595, and to fulfill the graduation requirement of the Culminating Experience Project for MLIS University of Washington Information School Seattle, Washington May 30, 2016 Typefaces are the clothes words wear, and just as we make judgments about people by the clothes they wear, so we make judgments about the information we’re reading by the typefaces. - Caroline Archer1 Times New Roman is a workhorse font that’s been successful for a reason. Yet it’s an open question whether its longevity is attributable to its quality or merely its ubiquity. - Matthew Butterick2 Keywords fonts, law reviews, law journals, legal periodicals, legal publications, typefaces, typography 1 Sam McManis, What Your Font Choice Says About You, THE ROANOKE TIMES (Jan. 13, 2008), http://www.roa- noke.com/webmin/features/what-your-font-choice-says-about-you/article_44076b07-db52-585b-af72- 84dc4bc4c8e6.html. 2 Matthew Butterick, A Brief History of Times New Roman, in BUTTERICK’S PRACTICAL TYPOGRAPHY (2016), http://practi- caltypography.com/times-new-roman.html. Table of Contents 1.0 Introduction ............................................................................................................................................ 1 2.0 History of Typography ............................................................................................................................
    [Show full text]
  • A Sort of Comprehensive Guide to Making a PDF/A-Compliant Thesis File
    Save yourself some grief: a sort of comprehensive guide to making a PDF/A-compliant thesis file Luis R.J. Costa August 8, 2018 Contents 1 Prologue 1 2 A tale of two PDFs2 2.1 PDF: a minuscule history...............................2 2.2 PDF/A: the nuts and bolts..............................3 3 Keys to success4 3.1 Which PDF/A version should I use?.........................4 3.2 Things to keep in mind when creating graphics files.................4 3.3 Embedding fonts in graphics files produced with MATLAB............6 3.3.1 Method 1: using export_fig .........................6 3.3.2 Method 2: the EPS and ps2pdf route....................7 3.3.3 Method 3: manually from the graphics window...............8 4 Epilogue 8 1 Prologue Should you be in haste with no time to waste for seeming trivia, skip on to section3. Perhaps you will return to this parchment when the time is ripe, with your favourite brew in front of you. Whereas you with a little time to invest, read on... In the autumn of 2017, Aalto University School of Electrical Engineering decreed that printed and bound copies of bachelor’s and master’s theses would no longer be collected for the library archives, so joining the School of Engineering and the School of Science, who had already made the decision to take the plunge a few months earlier. The use of shelf space was becoming unsustainable and limited archive resources had to be used wisely. Thus it is to be that now you must submit your thesis in electronic form as a PDF/A-compliant file [1] prior to graduation.
    [Show full text]
  • BBN–ANG–183 Typography Setting Type on a Pc, Onscreen & Web Typography
    BBN–ANG–183 Typography Setting type on a pc, onscreen & web typography Zoltán G. Kiss & Péter Szigetvári Dept of English Linguistics, Eötvös Loránd University gkz & szp (delg) pc, onscreen, web typo 1 / 88 last time last time ◮ digital fonts, formats ◮ how the computer handles fonts ◮ character & font encoding ◮ Unicode and OpenType ◮ smart font options gkz & szp (delg) pc, onscreen, web typo 2 / 88 aims aims for today ◮ typesetting systems on a computer ◮ markup vs. WYSIWYG ◮ electronic distribution of text ◮ pdf ◮ preflighting ◮ setting type on the web gkz & szp (delg) pc, onscreen, web typo 3 / 88 automation from manual to automated typesetting gkz & szp (delg) pc, onscreen, web typo 4 / 88 automation automated typesetting – basic innovations of Gutenberg are still in use gkz & szp (delg) pc, onscreen, web typo 5 / 88 automation automated typesetting – some typographical features still lagging behind: ◮ proportional optical sizes ⇐⇒ scalable fonts ◮ fine typography (true small caps, ligs, etc.) ⇐⇒ limited font technology ◮ BUT: OpenType fonts + Unicode... ◮ separation of logical markup from actual formatting ⇐⇒ WYSIWYG systems gkz & szp (delg) pc, onscreen, web typo 6 / 88 automation automated typesetting – historical steps ◮ typewriters (1870s) – concept of escapement, monospaced letters ◮ machine typesetters: Monotype & Linotype (1880s until 1990s) ◮ phototypsetting (1970s) ◮ computerization (1980s) gkz & szp (delg) pc, onscreen, web typo 7 / 88 automation automated typesetting: typesetting machines ◮ the Linotype & Monotype machines
    [Show full text]
  • Google Fonts Terms of Use
    Google Fonts Terms Of Use Funerary Raymond calumniating that heritability eructated lucklessly and bankrolls hiddenly. Antirachitic Olaf jangle mislabelseducationally. owlishly. Sometimes transatlantic Neville chrome her gyres wide, but alphanumeric Danny evades twitteringly or 10 Excellent Font Pairing Tools for Designers StyleShout. Google taking off both the copyright and infrastructure responsibilities for you. Read on and learn this easy care is water use web fonts in your email campaigns using Campaign Monitor. The 4 Main eLearning Font Categories eLearning Brothers. Another factor to consider is accessibility. What is all best Google font for a website? How to thing a font to Google Docs in 2 different ways. Getting a hold of the WOFF version of the font from Google Fonts requires use of either Safari or Internet Explorer. Visit the platform or app can add text of google fonts installed on the grid system fonts, discounts and sizes while many, think about page, no purpose is using. Google Font as average below! Flash and a software technology for creating interactive animations. Now have google uses of using licensed using in the digital fonts used for that is not be changed server or saving the. My site uses data hygiene, locate the terms of google fonts use any kind words. Are taking privacy considerations in using Google web fonts. Implementing and using Google Fonts, like other web fonts, are no big deals but delivering the fonts to your website visitors. Today Monty delivers four tips to help guide use Google Fonts like a pro. Google fonts sailor Halcyon Home. Using Google fonts in Animate Adobe Help Center.
    [Show full text]
  • New Online Filing (CMS)
    New online filing (CMS) Set-up and troubleshooting CMS version 1.90 Copyright © European Patent Office All rights reserved Last updated: 28/10/2020 Document version:new_online_filing_cms_setup_guide_1-90_EN Table of contents Disclaimer 3 1. About new online filing (CMS) 4 1.1. What this guide contains 4 1.2. Terms and conditions of use 4 1.3. Contacting EPO Customer Services 4 2. Getting started with new online filing (CMS) 5 2.1. Prerequisites 5 2.1.1. Hardware requirements 6 2.1.2. Software requirements 6 Operating system 6 Internet browser 6 PDF software 7 2.2. Enrolling for an EPO smart card 7 2.3. Installing the smart card software 7 2.3.1. Downloading the cryptovision smart card software 7 2.3.2. Installing the cryptovision smart card software 8 2.3.3. Connecting the smart card reader 8 2.3.4. Setting up the cryptovision module in Mozilla Firefox 8 2.4. Activating your smart card for the EPO's online services 10 2.5. Registering for new online filing (CMS) with your smart card 10 2.6. Accessing new online filing (CMS) 10 2.6.1. Logging on 10 Internet Explorer and Google Chrome 10 Mozilla Firefox 11 Apple Safari 12 2.6.2. Logging off 13 3. Configuring your system 14 3.1. General system settings 14 3.1.1. System text size 14 New online filing (CMS) 1.90 – Set-up and troubleshooting Page 2 of 27 Windows 7 and Windows 8.1 14 Windows 10 14 3.1.2. Browser text size 14 3.2.
    [Show full text]
  • Fontexpert 2018 User Guide
    FontExpert 2018 User Guide Version 15 Proxima Software FontExpert 2018 User Guide Contents Contents ....................................................................................................................................................................... 2 Welcome ....................................................................................................................................................................... 4 Features ........................................................................................................................................................................ 4 Learning FontExpert Views ........................................................................................................................................... 5 Windows Fonts View .................................................................................................................................................... 7 Folders View ................................................................................................................................................................. 8 Worklist View.............................................................................................................................................................. 10 Fonts View .................................................................................................................................................................. 10 Adding Fonts to Library .............................................................................................................................................
    [Show full text]
  • PDF with Notes
    Facing up to Fonts Richard Rutter Fonts. Typefaces. The bain of the web typographer’s life right? In previous talks eschewed discussion of typeface Not because of lack of choice but because there’s more important fundamentals. • correct glyphs, leading, margins & white space, vertical rhythm, layout, size system “When the only font available is Times New Roman, the typographer must make the most of its virtues. The typography should be richly and superbly ordinary, so that attention is drawn to the quality of the composition, not the individual letterforms.” Elements of Typographic Style by Robert Bringhurst • As Bringhurst said… • going beyond that now, because exciting things are afoot ≠ So this talk is about fonts. General rule is that web pages must be rendered using fonts installed on the reader’s computer. Let’s look at some of these... Times New Roman Times New Roman is a serif typeface commissioned by the British newspaper, The Times, in 1931, designed by Stanley Morison and Victor Lardent at the English branch of Monotype. It was commissioned after Morison had written an article criticizing The Times for being badly printed and typographically behind the times. Arial Arial is a sans-serif typeface designed in 1982 by Robin Nicholas and Patricia Saunders for Monotype Typography. Though nearly identical to Linotype Helvetica in both proportion and weight, the design of Arial is in fact a variation of Monotype Grotesque, and was designed for IBM’s laserxerographic printer. Times New Roman and Arial you’ll be familiar with… You can do beautiful things with just Times New Roman.
    [Show full text]