Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Intro To Flex Typography 360|Flex
1. Intro to Flex Typography
Matt Guest
360|Flex San Jose
March 8, 2010
2. About me
Matt Guest
Lead Flex developer for Nxtbook Media, Lancaster PA
• Programming and working in the web for around 12 years
• Flash developer since Flash 3
• Flex developer since Flex 2
3. What we will be covering
New text features built into the Flash 10 player
Flash Text Engine (FTE)
Text Layout Framework (TLF)
4. What we won’t be covering
Eastern, bidi, TCY text
This is an introduction to FTE and FTL. There is always
more to learn
5. Text in previous Flash players
Previous versions of Flash used TextField to render text
Still available in Flash 10 player and used by MX
controls
Very limited use of Font data
Fairly primitive text formatting capabilities
Changing the alpha or rotation of text required
embedded fonts
Difficult to meet designers’ needs, especially in Flex
6. Text in Flash player 10
Vasty improved OpenType font support for embedded
and device fonts
7. Text in Flash player 10
Vasty improved OpenType font support for embedded
and device fonts
Real Kerning
9. Text in Flash player 10
Vasty improved OpenType font support for embedded
and device fonts
Real Kerning
Improved antialiasing and pixel snapping with CFF
10. Compact Font Format
Fonts are converted to CFF when embedded in a swf
using the embedAsCFF option
@font-face {
src:url("/fonts/Baskerville.otf");
fontFamily: BaskervilleCFF;
advancedAntiAliasing: true;
embedAsCFF: true;
}
[Embed(source="/fonts/Baskerville.otf",
fontFamily="FranklinGothicStdBook",
mimeType="application/x-font",
embedAsCFF="true")]
11. Text in Flash player 10
Vasty improved OpenType font support for embedded
and device fonts
Real Kerning
Improved antialiasing and pixel snapping with CFF
Baseline snapping
12. Baselines
Ideographic top Ascent
Ideographic center
Roman
Ideographic bottom
Descent
Dominant baseline
baseline to use as the “y=0” of the text.
Alignment baseline
baseline to snap the dominant baseline to.
13. Text in Flash player 10
Vasty improved OpenType font support for embedded
and device fonts
Real Kerning
Improved antialiasing and pixel snapping with CFF
Baseline snapping
Digit case and width
14. Digit case and width
Old Style, Proportional Lining, Tabular
1234567890 1234567890
4958372639 4958372639
9384750128 9384750128
0987654321 0987654321
15. Text in Flash player 10
Vasty improved OpenType font support for embedded
and device fonts
Real Kerning
Improved antialiasing and pixel snapping with CFF
Baseline snapping
Digit case and width
Ligatures
17. Text in Flash player 10
Vasty improved OpenType font support for embedded
and device fonts
Real Kerning
Improved antialiasing and pixel snapping with CFF
Baseline snapping
Digit case and width
Ligatures
18. Great!
So, how do we use it?
FTE TLF
Flash Text Engine Text Layout Framework
19. Flash Text Engine (FTE)
Built into Flash player 10
Provides low level text layout and rendering
Meant to be extended with higher level frameworks, like
the Text Layout Framework
Provides low-level access to text metrics used to
position character glyphs
Spark Label component is based on FTE
All classes located in the flash.text.engine package
20. FTE - Important classes
ContentElement
Defines the content to be displayed.
Text, Graphic, or a Group containing a
FontDescription
mix of ContentElements.
TextBlock
Defines font to be used. TextElement Factory class that creates TextLine
objects of a given width using its
Family, weight, posture, etc. Defines text. assigned ContentElement.
GraphicElement
ElementFormat Defines a DisplayObject. TextLine
Defines the text format. The DisplayObject containing the
Color, Font Size, etc. rendered text.
GroupElement
Defines a collection of Text,
Graphic and other Group
elements.
23. Text Layout Framework (TLF)
High level framework for rendering structured,
formatted text
Open source, 100% Actionscript 3
Spark RichText and RichEditableText components
based on TLF
All classes located in the flashx.textlayout package
24. Text Layout Format
Hierarchical data model for storing structured text
Can be defined in MXML or imported from other
formats
Importers provided for XML, FXG, HTML and Plain text
Can be used directly within a RichText or
RichEditableText component to display and edit.
25. Text Layout Format
‣TextFlow ‣SpanElement
base element for TLF text. defines a run of text for styling.
‣DivElement ‣InlineGraphicElement
groups paragraphs for style display object (image, Sprite,
inheritance. UIComponet, etc)
‣ParagraphElement ‣LinkElement
groups elements together display object (image, Sprite,
into a single block.
‣TCYElement
Represents Tate-Chu-Yoko
text run.
27. Multicolumn TextFlows
TextFlows support multicolumn text, which RichText
and RichEditable components can display
It’s as simple as setting the columnCount or
columnWidth property
Demo
Multicolumn TextFlow with the RichText component
28. Breaking out of the box
Sometimes a RichText component won’t do and you
need more control over the containers that text is
flowing over
FlowComposer
Uses ContainerController objects to fill Sprites with
TextLines, allowing you much more control over how
the text is displayed
29. Flow composer
TextFlow
IFlowComposer Stage
Sprite
IContainerController
(Takes a Sprite & fills it with TextLines) TextLine TextLine
Sprite
IContainerController
(Takes a Sprite & fills it with TextLines)
TextLine TextLine
30. Flow composer
Demo
Using FlowCompser to display multi-column text
text text text
column column column
text text text
column column column
31. Interacting with TextFlows
Interaction Managers
SelectionManager
EditManager
RichText component does not support Interaction
managers
RichEditableText uses its own managers, depending on
the setting of its selectable and editable properties.
34. More Information
Adobe TLF Blog
http://blogs.adobe.com/tlf
TLF Text Editor Demo
http://labs.adobe.com/technologies/textlayout/demos
Official OpenSource Adobe TLF Site
http://opensource.adobe.com/wiki/display/tlf
Matt Guest
mattguest.com mattguest@gmail.com @mguest
