SVG Text Layout
by Amelia Bellamy-Royds
Copyright 2015 Amelia Bellamy-Royds. All rights reserved.
Printed in the United States of America.
Published by OReilly Media, Inc. , 1005 Gravenstein Highway North, Sebastopol, CA 95472.
OReilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles ( http://safaribooksonline.com ). For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com .
- Editor: Meg Foley
- Production Editor: FILL IN PRODUCTION EDITOR
- Copyeditor: FILL IN COPYEDITOR
- Proofreader: FILL IN PROOFREADER
- Indexer: FILL IN INDEXER
- Interior Designer: David Futato
- Cover Designer: Karen Montgomery
- Illustrator: Rebecca Demarest
- January -4712: First Edition
Revision History for the First Edition
- 2015-07-16: First Release
See http://oreilly.com/catalog/errata.csp?isbn=9781491933756 for release details.
The OReilly logo is a registered trademark of OReilly Media, Inc. SVG Text Layout, the cover image, and related trade dress are trademarks of OReilly Media, Inc.
While the publisher and the author(s) have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the author(s) disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights.
978-1-491-93375-6
[FILL IN]
Preface
Scalable Vector Graphics (SVG) consist of a markup language and associated style rules for defining images and diagrams. SVG is an image format, and for most people, text isnt the first thing they think of when considering the uses of SVG. From the beginning, however, a key feature of SVG has been its ability to encode text in a machine-readable form. Since SVG itself is a text-based markup language, the text characters in an SVG file can be viewed and edited in any text editor.
This book takes a deep dive into the use of text within SVG. It explores the creative possibilities, but also the potential pitfalls. It describes the basics, but also shows how you can use SVG to generate complex layouts. And, unfortunately, it also outlines the many inconsistencies and limitations of web browser implementations of SVG text (as of mid-2015, when this book was written).
This book was born from another project, an introduction to using SVG on the web. In order to keep that book a manageable lengthand keep it suitable for introductory audiencesmany details and complexities had to be skimmed over. But those details and complexities add up to the full, wonderful potential of SVG as a graphics format. Once you understand the basics of SVG, you can start thinking about creating more intricate designs and more creative effects.
What Well Cover
If youre reading this, hopefully you are already familiar with the basics of SVG: how to define a graphic as a set of shapes, and how to use that graphic either as a stand-alone image file or as markup in an HTML page. It will also help if you are familiar with the basics of CSS-styled HTML text, since SVG text builds upon the basic CSS style rules.
The book starts with a brief overview of how computers display text content, and then steadily introduces the many ways SVG allows you to control the appearance of text:
reviews the basics of laying out text in word processors and web sites, and introduces much of the technical terminology used to describe text.
introduces the SVG element and the basic attributes for positioning simple text labels within a graphic, including the particular issues of sizing text within a scalable coordinate system.
briefly covers SVGs fill
and stroke
properties for controlling the visual appearance of text.
gets into more complex text layouts, using formatted poetry as examples.
explores SVGs ability to control the position and orientation of individual text characters.
introduces the text-anchor
property and discusses how it affects the alignment of text.
considers the particular issues of multi-directional text, including right-to-left horizontal text and vertical text.
introduces the properties that control the vertical alignment of horizontal text and the horizontal alignment of vertical text.
looks at the element and how it can be used to create curved or complex text layouts.
explores fonts and their impact on SVG text, including the use of the @font-face
rule to incorporate web fonts in your SVG graphics online.
looks at the textLength
attribute and font-size-adjust
property, which can be used to standardize text layout when you dont have full control over the fonts used; the chapter also includes decorative uses for textLength
.
Finally, introduces the SVG element, and shows how it can be used to include CSS-formatted HTML text within an SVG image.
To complete the book, summarizes the related style properties.
About This Book
Whether youre casually flipping through the book, or reading it meticulously cover-to-cover, you can get more from it by understanding the following little extras used to provide additional information.
Conventions Used in This Book
(OReilly boilerplate on code & term formatting)
Tip
Tips like this will be used to highlight particularly tricky aspects of SVG, or simple shortcuts that might not be obvious at first glance.
Note
Notes like this will be used for more general asides and interesting background information.
Warning
Warnings like this will highlight combatibility problems between different web browsers (or other software), or between SVG as an XML file versus SVG in HTML pages.
About the Examples
(Where to download sample files or view online, compatibility info)
(OReilly boilerplate on copyright & permissions)
How to Contact Us
(OReilly boilerplate)
Acknowledgements
(Thank you, thank you very much)
Chapter 1. Understanding Text Layout
The history of human writing includes etchings in stone and wood, impressions in clay tablets, ink applied with brushes, and ink applied with quill pens. The different means of writing have each influenced the visual appearance of the text that results.
As technology has changed, first with the printing press, then the typewriter, then computer displays, so has the appearance of text. In addition, geopolitical history has had its influence on writing, spreading scripts from one part of the world to another, where the written form is adapted to different spoken languages.
This chapter reviews the core concepts common to text layout in all web documents. It starts with an introduction to the terminology used to describe letters and writing systems. It then looks at how text content, fonts, and text-rendering software combine to create text on computer displays. In particular, we focus on how markup languages like HTML, XML, and SVG interact with styling rules in CSS to define text layout within web browsers. Finally, we review the main features of SVG text layout, as a big-picture introduction to the rest of the book.