WWDC2001 Session 110

Transcript

Kind: captions
Language: en
my name is Xavier ago and I'm the text
and international technology manager for
Apple computer in WWD R and I'd like to
welcome you to session 110 join Unicode
text without Suri I'd see on Mac OS 10
which is at word type services for legal
imaging has evolved a lot and is
actually the heart of a text rendering
on Mac OS 10 we'll talk in detail about
the unicode support today and how atsui
fits in this overall picture of Mac OS
10 in order to do that I'd like to
introduce second phonetic John Jenkins
who is actually or mr. Unicode and who
has been working on that C John okay so
first to just give a sense as to what
we'll be talking about here throughout
the session well start out by a brief
discussion as to what X who he is and
what it does what services it provides
we'll go into a little bit about who is
using it right now that is who in the
system we're in the system it's being
used we will discuss when you as a
developer might want to use it directly
in one of your applications we'll cover
some of the basics of how Atsui works
and then we'll go through some detailed
examples of how you actually use Atsui
so to start off with what is it well as
Xavier said it is an acronym it stands
for Apple type services for unicode
imaging it also happens to be the way
you say hot in Japanese although that is
a sheer coincidence
it is a set of text drawing api's and
it's available either directly or
indirectly you as an application
developer have the option of either
calling Atsui yourself or you can call
other parts of the system which
themselves call that soui so it's
available in more than one way and there
are three basic uses that you might want
to put it to the first would be to
access quartz when you're drawing text
on
urban this is something fairly new with
that soui on OS 10 and it's something
really really wonderful it gets you a
great deal of visual power that wasn't
available before the second reason that
you might want to call that Suey would
be of course to draw a Unicode text as
the name implies finally you might want
to use that Suey in order to provide
access to high-end typography the Mac
was of course one of the original
platforms was the original platform for
desktop publishing and really went a
long way towards making it possible to
do really beautiful type on a personal
computer one of the problems of course
has been that most applications don't
really provide access to the full beauty
of typography and soui allows you to
change that and of course if you want to
do any one of these the three things you
get the other two basically for free if
you want to draw a Unicode text you can
use that Suey you will get courts and
high-end typography for free if you want
to do courts with your text you use that
Suey you get all of Unicode and high in
typography for free and if you want to
do the type you use that Suey and you
get the other two for free so
fundamentally Atsui is the way to draw
text on Mac os10 it is the preferred
system for drawing text okay a little
bit about Atsui in quartz and soui is
fully integrated with quartz it respects
the settings in ECG context if you have
basically if you wanted to use quartz
you create a CT context you hand it off
to ETSU a s we will then be using it to
render the text and it will take
advantage of whatever is in that CG
context if you have transparency set its
there if you have rotation or skewing or
some other matrix that's put in there it
is there and of course this means that
you get the quartz anti-aliasing for
text if that's what you really want so
at the very least if you simply want
improved anti-aliasing for your text
display you can use that su a with
quartz and you will get the correct
thing on a carbon
application as for Unicode and soui
currently supports everything which is
in unicode 3.0 this is a version of the
standard which was published last spring
in book form for most of us what that
means is that you get access to a large
number of scripts and characters that
are not available in world script so
unicode 3.0 has roughly forty nine
thousand characters i believe and world
script covers about forty to fifty
percent of those so there are tens of
thousands of characters that you can get
through at SRI that you could not get
through world script moreover Atsui
automatically handles all the problems
associated with each of these scripts
now even if you're only doing something
very basic or something very simple like
Latin Greek and Cyrillic you may have to
deal with accented letters these are
handled automatically by an suing and of
course there are in Unicode more complex
scripts Arabic daven augury all of these
scripts of South Asia and soui handles
these automatically for you
this is a big advantage for a developer
in the past you would write your
application to provide basic text
rendering and then you would have to
rewrite it for world script one and you
would have to rewrite it again for world
script - you don't need to do that
without soui if you adopt that Suey you
get everything all at once and there's
no rewriting involved so if we just go
through some of the scripts in unicode 3
o we have Latin this is a much larger
set of Latin characters than you get
either in Latin 1 or in Mac Roman there
are more Latin characters and I want to
think about actually in Unicode you get
all of the CGA ideographs which again is
a far larger set than is available
through Mac Japanese Korean simplified
traditional Chinese put together as well
as kana both both katakana and hiragana
Hangul and so on
there are literally dozens of scripts
that you can take advantage of with that
Tsui as for typography
one of the nice things about at Hsu is
that it takes advantage of the data that
is in the font that it doesn't need to
have any particular information itself
about typography all of that is built
into the font so the font is
automatically taken advantage of by the
system it is possible for you the
developer to override the default
settings of what the font provides and
it of course is it possible for you to
allow the user to override the settings
of the font so for example you can have
a large set of ligatures in your font
we've had the FI + FL ligatures and Mac
Roman since the beginning you can have
more ligatures than that you can have
swashes in alternate forms letters can
change their shapes that can be done by
the user they can deliberately choose a
different shape for the letter or these
shape changes can be context-sensitive
and one of the advantages of doing it
this way is it means that the text is
not changing in order to get these
visual effects right now if I try to use
the FI + FL ligatures in my text my
spell checker is going to get confused
because the words are changing their
spellings if you use that soui this will
not happen you will have the ligatures
they will look gorgeous
but they won't screw up anything else
you also get through at SRI some
advanced features that used to be
limited to really high end applications
these are things that most of us are not
particularly aware of when we when we
run into them optical alignment this is
where letters will not be flush with the
margin to create the illusion that they
are flush with the margin hanging
punctuation is similar the punctuation
is allowed to stick out over the margin
because the eye is not particularly
focused on the punctuation kerning and
tracking where letters are allowed to
shift their positions relative to one
another again to improve a parent's
sophisticated justification all of these
are available through at Sooey
you don't have to be a typographer in
order to take advantage of them so here
we have a couple of examples here of
text being rendered with that Sooey
this first one shows a number of things
right off the bat this is all being
drawn with a single typeface and we have
a mixture of Latin letters CJK
ideographs then we have some inductor to
it and some Georgian and nuke titute is
a series of languages that are spoken in
Native American languages spoken in
Canada northern United States and
Georgian is of course spoken on the
southeastern corner of the United States
these are all being rendered together
now the Latin and the Japanese you would
have been able to do of course with
world script and Newt isn't in Georgia
not at least not properly so here we
have them all they're all with one font
and in addition we have this cute little
spirograph sort of effect which is being
done with hat suey you're not limited to
the the particularly line angle for the
text and if you look closely in this
particular example it is in fact using
courts so we get much better
anti-aliasing than would have been the
case otherwise in particular as the text
is slanted the anti-aliasing is is
appropriate for the angle of the text
now this is an example of Zaffino is
that Fino is a new typeface it is
available on Mac OS 10 it is based on
the handwriting of Hermann Zapf ZAF is
one of the foremost typographers and
calligraphers of the 20th century he has
designed a number of typefaces which we
have used extensively in the past and
this is based on his handwriting and as
such it is a very typographically
sophisticated font the letters have a
large number of shapes
there's more than one F there's more
than one o ends at Fino there's at least
four copies of each of the individual
letters there is moreover an unusually
large set of unusual ligatures it has
more than f it has several Fi several FL
s and a large number of other ones it is
a beautiful face if you use it correctly
and one of the things that we have done
is that we have wired it up so that the
default behavior you get is more
beautiful than if we just use the
letters plain and simple we'll be
showing that in a little bit so this is
how it all fits together at the middle
is that Sooey
and everything is going through it for
text rendering on Mac os10
you the developer are writing a carbon
application or you're writing a cocoa
application some examples here of
applications which are carbon amps and
are using atsui
the finder Sherlock help viewer if your
carbon you might be going through the
carbon UI text handling routines that is
to say you might be taking advantage of
something such as the theme text api's
you might be using multilingual text
engine you might be using the HTML
rendering api's if you're using those
you are using atsui
because they're all calling into it or
you might decide that you want to use
that so yourself
cocoa is similar if you're writing a
cocoa application you almost certainly
will be using the app kit for most of
not all of your text handling if you do
that again it's using atsui or it's
possible that you might want to access
that Sri directly so it's there no
matter what you're doing now ad Suey
itself is calling into a number of
different systems it can use quick-draw
text in order to draw the text or if you
prefer it can be using quartz and down
at the bottom we have Apple type
services this is what gives answering
most of its typographic power this is a
very sophisticated text layout engine it
has been available on the Macintosh for
a number of years and as time is going
on it has become more and more central
so at SU is using ATS and other people
are using Atsui to get to text namely
large number of lists of people who are
using ads to you right now and again
this is something very important we are
shifting the system over to Atsui
ourselves we have shifted it the finder
is using Atsui this is not true on OS 9
this is true on OS 10
this means that all of the
sophistication of Unicode is available
to file and folder names HFS+ has
allowed this for some time the finder is
now allowing us to see these things to
draw them correctly to see them
correctly here we have an example it's
rather hard to see unfortunately we have
Latin we have Japanese we have a number
of smudges towards the end of these
smudges we do have some Yi which is a
new script in Unicode 300 we have some
om we have runic we have Cherokee
Cyrillic and the last one i know is a
mongolian letter and this is possible to
type in any file name in any folder name
you can just use these and they will
work automatically because the finder is
using atsui for file and folder names
all the h i text for both carbon and
cocoa is going through atsui menus
window title bars dialog box elements
are all being drawn with that soui so
the entire UI that you're experiencing
on Mac os10 is going through atsui
can use all of Unicode cocoa of course
cocoa is calling into atsui Unicode is
the character set internally for cocoa
when you create a CF string you're
creating a Unicode text when you draw it
on cocoa you're drawing it through ETSU
e the help viewer is using Atsui
Sherlock when it brings back results to
you is using that Sooey
we have the multilingual text engine ml
te this is our text edit replacement it
will be discussed in some detail
tomorrow and that's using that Suey and
of course the list is continuing to grow
fundamentally Unicode is Mac OS 10s
native character set think of all text
as being Unicode and Atsui is the way to
draw Unicode text on OS 10 now given the
fact that there are a large number of
api's that are available that themselves
take advantage have
the natural question is when do I want
to do it myself why might I want to do
it myself there are a number of
situations where you might want to call
that sewer yourself first of all you may
need fine control over the display of
the text for example you might want to
tweak the positions of the glyphs
manually above and beyond what Atsui
does you might want to draw text as a
Ning at an angle or along a path one
very prominent example would be to have
control over the exact positioning of
individual lines you want text to wrap
around a graphic for those sorts of
situations you would be using atsui
directly there may be certain features
of Atsui
which other api's do not make available
vertical text is an example not all of
the ads suid clients themselves to
support vertical text so in this sort of
a case you would want to use that
through yourself more sophisticated
control over justification this is
available in that so we may not be
available in a client so you would use
that through yourself optical alignment
things like that finally of course you
may be somebody who is writing your own
text editing engine you don't want to
use an MLT e you're writing your own and
in that case the best thing to do would
be to call into Atsui that way you get
all of its power and you get all of
Unicode alright so what does it provide
you again everything in unicode 3.0 with
one caveat and that caveat is font
satsui is limited by the set of
installed fonts although we have a very
rich set of fonts on OS 10 some really
beautiful fonts on OS 10 will you not
have a font that covers all of Unicode 3
oh well we have the last resort font but
that's not really to read so you have to
install fonts to get all of to get all
of these these characters
and soui does support vertical text this
is enormous ly important in East Asia
traditionally East Asian text was
displayed vertically with the lines
going right to left across the page or
in Mongolia left to right across the
page this is something which is
supported by Atsui and it is something
which is still required in East Asia
newspapers other publications are using
this sort of thing all the time had Tsui
supports advanced typography kerning
letter shifting relative to each other
to get the optimum appearance optical
alignment letter shifting relative to
the margin to create the illusion of a
smooth margin it's a strange fact of
human psychology that artists have been
exploiting for literally millennia for
some reason a straight line does not
look straight to human beings so we can
adjust the actual margin to make it look
like it's straight variation fonts this
is similar to the multiple master
technology which has been available in
the past font can have alterations in
something over a continuous range you
can have a font that has a continuous
variation in weight or width or
something like that this is available
throughout sorry again rich set of
ligatures alternate glyphs baseline
adjustment things like this and so he
has api's to help you if you are writing
an editor highlighting hit mapping
cursor positioning things of this sort
are available threats through api's and
relatively new and so he also provides
now low-level access to glyph outlines
and to the details of the glyph array
that it's going to draw this allows you
the developer to do fancy things with
the glyph outlines if you want or it
allows you to have fine control over the
display of the glyphs so how does it
work
point number one it uses Unicode all
text to that soui deals with must be
unicode this was a decision we made to
simplify the design enormous Lee we have
the texting
coding converter which is a very
powerful conversion engine for various
text encodings you can use that if
necessary to turn the text into Unicode
now when we say Unicode we mean what is
called utf-16 there are three ways of
representing Unicode on computers what
are called encoding forms there's utf-8
which is byte oriented and this is very
popular on the web because utf-8 has the
advantage that old text editors and UNIX
tools will work with it
there's utf-16 which is double byte
oriented in them there is utf-32 which
is fairly new and is quadruple word
oriented everything is exactly 4 bytes
utf-16 is the encoding form for Atsui
use the TEC if you need to in order to
convert and you own the text you do not
give it a way to answer where you keep
it you tell atsui where it is in memory
you tell Atsui what part of it you want
to draw and so he takes care of all of
that but you are the owner of the text
the text buffer is yours beyond that
there are two opaque classes two objects
that are used in ETSU and these are the
core of how ensui works the first is the
Otsu style and the second is the answer
text layout an ad su style is an opaque
structure that contains basically all of
the style information for the text the
font this is an ass who font ID this is
identical to the IDS that you're getting
back from the new font manager these are
however different from what you would
have gotten in the past from the old
quick-draw font manager however there
are routines to do the conversion so we
have the font ID we have things like the
point size the point size is now a fixed
it is not an int as was the case with
quick-draw text again this is one reason
why you might want to migrate color is
settable font features font features are
inside of the fonts this is basically
the fonts list of all the fancy things
that it can do
so you get that list you find out what's
available you ask the user which ones
they want to use and then you can set
those in a Natsu style it's a long list
of things that are set up edible in a
Natsu style and in point of fact it is
possible for you to to create your own
style information that you can attach an
su styles are reusable so if you have a
particular style which is used in two
different places in your text you can
use the same style object for them and
it's recommended that you keep these
around these are lightweight objects
they're easy to use they're cheap to
keep so use them share them do whatever
you want with them
now the answer text layout is the real
workhorse of atsui
this is where all the layout information
is stored this is where all of the work
is being done this is an opaque
structure it ties the text together and
it ties the runs of a Tzu style so you
tell it where the text is in memory you
tell it how you want styles to be
associated with that text and then it
does all the work now one important
thing and this is different from
quick-draw text is that answer text
layouts work on a per paragraph basis
well not a per paragraph on at least a
paragraph level one of the features of
Unicode is that it has what are called
bi-directional problems instances where
part of the text is going I have to make
sure I do this correctly from your point
of view left to right across the page
and some of its going right to left
across the page okay when you try to mix
those together it can get very
complicated Unicode has a standard
bi-directional algorithm for handling
these sorts of situations in order to
use it and so he needs to have an entire
paragraph of text to work with so you
hand out suet an entire paragraph you
can tell it where you want to break the
lines you can ask it where it thinks you
should break the lines it's all very
simple to do but you are working on the
paragraph level once you have your
answer text cloud and you've associated
the styles with the text there are other
things you can add to the layout object
other bits and pieces of information
line attributes this is where
justification is controlled the
is where rotation is controlled this is
where the direction of the individual
letters is controlled and it is the
attitude line layout answer text layout
object which owns or which knows about
the cg context if you're going to be
using quartz you should be cashing these
if you at all can to take advantage of
them later so some examples again we've
we've gone over these the font the point
size the color verticality width and
cross stream shifting that is you might
be moving the letters back and forth or
up and down this is for example very
handy if you're trying to do superscript
or subscript kerning control not only
are you taking advantage of the kerning
which is built into the fonts but you
can override it optical alignment
hanging punctuation and so on font
features again this is the set of
ligatures that is in the font this is
the set of swashes which is in the font
these are the variant glyphs which are
available in the font and again font
variations continuously varying weight
width you could have slant angle there
have been some really cute things down
with variation fonts and of course line
layout controls rotation justification
flushing us baseline your cg context
things like this okay so that's an
overview of how Atsui works now we're
gonna go through some more detailed
examples we're going to bring up Peter
ed bird senior software engineer at
Apple who is responsible for much of the
work being done on that Suey even as we
speak okay thanks he'll be back
okay the way we're going to discuss this
is in the context of three specific
examples we have three case studies one
for use of CG or courts drawing with
that soui one for equation drawing and
one for vertical text you'll notice a
lot of parallelism among these examples
and that's one of the key points we want
to illustrate which is that there's a
particular code idiom that you use for
setting up styles and layouts without
soui and once you've got the code to do
these things then basically everything
you do is using the same code idiom just
with variations in what particular tags
you use and the particular values you
associate with them but basically almost
all the effects are done in the same way
we'll we'll go through the the first
example in the greatest detail and
that's the one that illustrates the the
fundamentals of this this code idiom
that we're referring to okay so the
first example is a 2 e with CG the first
thing that you need to do is create a
style object these are you know what
John described then you need to add the
attributes to the styles and we have
bulk setters that can do this so you can
set a whole bunch of attributes in to
the style with a single call so we have
triples of basically a tag that
specifies the type of thing that you're
trying to set in the style another value
specifies the size of the data for that
tag and then the third value is a
pointer to the actual data that that you
want to associate with that tag and this
way you can have variable size data
elements associated with the tag so for
example an RGB color would be three
16-bit values others would be longer
others would be shorter so you create
your style you set the attributes into
your style okay you create your layout
object and you associate text with that
and then you apply you specify which
Styles apply to which runs of text in
that layout object and again you can do
a bulk setter there so that with a
single call you can specify a whole
bunch of runs at one time finally you
would add the line or layout controls
the layout object itself and again it's
a bulk setter so again using the same
kind of triple of a tag size and a
pointer to the data okay the particular
ones that we're going to use here in the
style of the font and the size and for
the layout we're going to use the cg
context tag okay and once you've got
this all done then you can draw and all
the examples are going to follow the
same pattern okay so these are the
particular tags that we're using in this
example the font and the size for the
style and the context for the layout
okay well creating a style is pretty
easy one called to create that okay now
for the bulk setters for the style there
are two things you need one is the
actual data you want to set into the
style and so you need the the variables
that store that information in this case
we've got an out su font ID and we've
got a font size and they've got
particular sizes associated with in
particular types and then you need the
arrays of three values that we need for
the bulk setting again our tags our
array of tags or parallel array of sizes
and our parallel array of pointers to
the data values themselves you also need
a count of how many values are in those
arrays for a particular call okay so
let's assume that you get a font ID
somehow and that's somehow is something
that we're not going to clarify in this
session the session there's a session on
Thursday about font management which is
really where all the details for that
will be provided font size is affixed
okay the next thing you need to do is
set up these arrays of bulk values so we
would say 0 F element of our array would
be the font the font ID value so you
pass the font tag in the tag array the
size of the font ID and the size array
and the pointer remember it's a pointer
it's not the value itself a pointer to
the font ID in the value pointers array
okay and same thing exactly parallel for
the next element to the array which is
where you specify the size our tag count
is two and you pass these values into
the bulk setter which is a two set
attributes
okay now similar to this you create a
layout and in the create call you can
specify the pointer to the text there
are several flavors of the create call
in this particular flavor you pass a
pointer to the text and you can also
pass your arrays of style runs and the
array of lengths that go along with the
style runs in this case we've just got a
single style so you just pass the length
of the text and that the pointer to that
style and finally then you set your
layout controls in the layout object in
this case we've only got one which is
the Otsu kanto is the cg context now
where you get that cg context from is
again the subject of a couple of other
sessions if you're working purely in in
core graphics and quartz the approach
was discussed in the session this
morning on 2d graphics if you're working
in a mixture of quick-draw and core
graphics there's a session Friday
graphics tips and tricks they will show
you how to get a CG context for example
from a graph board etc anyway that's not
the subject of this session let's assume
you get a CG context from somewhere what
you do is again you set that into your
layout now that's something that would
apply to the entire layout there are
some other tags that you can set specify
in a line by line basis in the layout
and we'll talk about that a little bit
later okay and then the final thing you
can do is is draw it now as was
mentioned earlier that's who he is
integrated with the CG context effects
and so before drawing you could set up
those effects so if you wanted to do
rotation with core graphics or any of
the other effects you would set those
into the CG context of the example call
here as the CG context rotate CTM you go
ahead and draw the text also if you went
to the 2d graphics session this morning
you'll remember that quartz drawing is
double buffered so if you want your text
to appear on the screen immediately you
need to call the CG context flush call
okay and this is this is the result that
you would get again you would get
rotated text with a nice anti-aliasing
okay now for the next two examples we'll
will
go through them in a little bit more
abbreviated fashion just to give you the
flavor of them but again you'll notice
that they they're all look pretty
familiar because they're all based on
the same the same sequence of calls
sometimes repeated a little bit more
often okay suppose we wanted to do some
equation display where you had
subscripts or super scripts and this
could get fairly sophisticated if you
have limits for integrals or summations
and things like that typically what you
would do is you could create multiple
style objects as John mentioned you
could keep these around so you don't
need to create them for a particular
drawing call and dispose of them you
would keep them around for whenever you
needed to draw subscripted tax
subscripts or superscript etc so you
could create one for your basic equation
text say an enormous tile you could
create one for your sub scripted text
and again they would differ in that it
would have a smaller font size and it
would be shifted down below the baseline
and something parallel to that for super
scripts okay in this case the features
that you're going to use are the two
features are both style features one is
the cross stream Shift tag which we're
going to use for the super scripting or
sub scripting and then the font size tag
to get the smaller size for the super
sub script again you would need to
create a style typically it would start
out with the normal style and you would
set up your font and size that's
described before and use the bulk setter
to set those now there's a new call here
creating copy style so you could create
a second style that would inherit the
font and size from your original style
and then you could override or add
specific style features in this case
what we want to specify is the cross
stream shift and you would specify a
particular value for the cross stream
shift endpoints you would specify the
size which would be smaller in this case
and then you would again use the bulk
setter to set those values into your sub
style your sub script style you could
again as described before create your
text layout and initially you could set
the style for all the text to be your
normal style
again here we're using the bulk setter
but we've only got a single style
initially and a a single length now you
could in this one call if you wanted to
specify which runs of text are sub
scripted so then you could do that all
with the create call because it has this
bulk setting attribute in this example
we've chosen to do it a little bit
differently you could have a separate
call to specify a particular style a
different style for particular runs of
the text in the layout so you would just
specify the beginning and ending offset
of the text for that run okay and then
this is an example of what you could get
again for more sophisticated examples
you could use with stream shifting which
for horizontal text would shift in the
left right direction and you might want
to do that for something like integral
limits and in summation limits and bonus
points to whoever can come up and tell
Deborah afterward what what this
equation is fewer bonus points if you
are a physics major okay the the next
example is vertical text and again this
is one of the special things that you
would have to use that soui directly to
achieve again you would create the
layout and style objects as usual now
there are two things going on here
there's going to be a style and there's
going to be a line or a layout control
first of all you have to set the style
to use the vertical form now the
vertical form of a glyph for many glyphs
will just be rotated by 90 degrees in
some cases there will be alternate forms
particularly for things like parentheses
and brackets and so on then you have to
rotate the line or the layout and you
would use you could use car graphics for
that you could use courts for that but
if you want to use the Atsui editing
api's for hit testing for example for
highlighting and so on it's more
convenient to use those if you use the
Atsui rotation because then you don't
have to do the back transformation of
the points yourself
okay again the features we're going to
use are the vertical character tag which
is a style tag and the line rotation tag
which is a layout tag so as usual you've
seen this before we set up a style
object we set the vertical character tag
now the the tag a vertical character tag
can be associated with several values
and one of them would be strongly
horizontal another one of them would be
strongly vertical so in this case the
tag that we're specifying is vertical
character and the value that we're
specifying is the strongly vertical
value so just specifying the tag doesn't
doesn't force it to be vertical okay so
we're gonna set up a style with that and
then we're going to apply it in this
particular in this first example to all
the text in the layout okay now that you
don't need to do that and we'll saw some
more sophisticated examples later on
where you apply that vertical style only
to some of the glyphs that some of the
characters in the layout okay now if you
want to use that soui rotation again you
would use the layout attribute of the
line attribute we're using a
right-handed coordinate system so you
want to rotate 90 degrees to get your
starting point at the top okay so you're
gonna use minus 90 degrees and the tag
for the layout attribute is the line
rotation tag the value is a fixed and
again we're going to apply this to all
the text in the layout
okay the result would be something like
this now this is just one way to do
vertical text and there are a lot of
different options for vertical text that
we're going to go into in the next slide
kindzi as I alluded to there are really
two things going on here and now we're
going to separate them so you can see in
a little bit more detail what's going on
first there are the vertical forms okay
and you see in the second line and the
top left that we have applied just the
vertical forms style to the text without
rotating the line and as you see the
letters in the con jia rotated but the
parentheses have adopted a vertical form
which when the line is rotated will be
the proper orientation for vertical text
okay you could also not use the vertical
style of the glyph and just rotate the
line and then you see the example on the
left side of the vertical section that's
just the minus 90 degree rotation okay
and the third the last example the right
side of the vertical section has both of
them going on at once okay now there are
some more sophisticated things that one
could do as I mentioned you don't need
to apply the vertical form style to all
the glyphs you can apply it to just a
particular run so in this example we've
rotated on the first example we've
rotated the line but we've only applied
the vertical style to the katakana
portion of the line and that's that's a
common example of how some type
typesetting might be done for vertical
text in Japan there are some more
sophisticated examples like the tattoo -
yoko example here to achieve this effect
and this is a little bit more complex
since since rotation has to be done on a
line basis what you have to do is tell
atsui that each of the segments that
you're going to separately rotate as a
separate line and so you could set a
soft line break into the line before and
after the 58 and then you would apply
rotations for three different segments
there which would be three different
lines from at Zooey's point of view okay
so you would rotate the first in the end
the third portion by 90 degrees but not
the second portion and again the
starting points for each of those
segments are going to have to be
different so there's gonna be a little
bit of calculation involved there now
there are a large number of tags we've
only gone through a few examples here
but there are about a little over 10
tags that you can specify for layouts or
lines and there are over 25 tags that
you can specify for styles and so with
these you can achieve a large number of
different effects all by using the same
approach and now to illustrate some of
this and show you how the system is
making use of these techniques I'd like
to ask John to come back up here and we
need Machine 2 for the demo please
I'm not used to looking down on my
screen this is just kind of weird when
did that one really nice thing actually
this year is you know we've been giving
Atsui demos for some time one thing
that's really nice is that we can
actually be showing it using all kinds
of different parts of the system which
we haven't been able to do before OS 10
came out and we're going to start with
our favorite app the finder we mentioned
that the finder is now using Atsui this
is really a marvelous marvelous thing
that allows us to take advantage of the
full multilingual power of Unicode in
filenames so I'm going to create here a
new folder and I can start typing and of
course I can give it a very hoops if I
can type very very very very very long
name which is nice
I've is that more than 31 letters okay
well I'll make it that way
copy/paste okay so that's nice right
there
it's nice to be able to get away from
that limit but at the same time now ever
since system 9 came out we have had
Unicode input which is available and the
way you know whether a portion an
application or a portion of the system
is taking advantage of Unicode when you
edit is are the Unicode editors enabled
and they are here so I can use the
extended Roman keyboard or I can use the
Unicode hex input I can switch to koto
era for a minute here and I can type
what was the second word
anyway I don't know I can't even read
that from where I am I hope you can read
it from where you are hey is that right
okay it sounds French
okay everything sounds French if you say
it correctly and here we have a quick
and dirty little input method that
allows us to enter arbitrary Unicode so
I can type a Unicode letter like snowman
and convert and there we go so I've
infer and inserted the Snowman character
which is Unicode to 603 into my which I
just happened to know so I'm able to use
arbitrary Unicode here in my file names
and that's really really an enormous ly
wonderful thing let me think
Cherokee letter Wow okay well I got the
last resort glyph for I mentioned the
last resort funny I don't know how
familiar people are with it Apple does
in fact ship a font that covers all of
Unicode it's called the last resort font
the last resort font is not meant for
reading the purpose of the last resort
font is that it is a way for the system
or an application to say hey I don't
have a font for this in this particular
case it's using the last resort
character for Cherokee and the goal is
that if a user sees that they'll say oh
I need to go get a Cherokee phone they
run out and they get a Cherokee finally
install it this provides much much less
system overhead then would be the case
with a full pan unicode font or series
of fonts and it has the advantage of you
know basically for those of us who don't
read and write Yi we don't need to have
a Yi font installed that we're never
going to be using so this is the finder
a marvelous demo app for Atsui now we're
going to move to another marvelous demo
app for Atsui TextEdit now we're using
TextEdit here as a sample of a TextEdit
application that is written in cocoa
basically what I'm about to show is
going to be true of any text editor that
is using cocoa so if I'm using mail dot
app I can see well you you can see what
I win them about to show you if you are
using Omni web which is using cocoa
anything which is using hi anything
which is using cocoa is going to do this
and this we get some really nice stuff
here now again I've switched the font is
that fee no that fee no this is Herman
zaps handwriting fortunately no one will
ever make a font based on my handwriting
so now watch what's happening is I'm
typing okay I'm typing along notice
what's happening to that P that Fino
happens to have a PP ligature this is
not the sort of thing that you typically
expect a font to have hair Mon SAP has
fun or if I type fi again is forming
automatically this is the important
thing is that it's happening
automatically all right the type
designer has put it into the font and
soui is taking advantage of the
information in the font you the cocoa
application developer have to do nothing
and you're getting these ligatures
forming automatically now what happens
if you don't want them to form
automatically fine you can turn them off
so if I go to my font menu here I can
turn off ligatures they're they're gone
so this is straight out of the box this
is totally unmodified text edit we have
done absolutely nothing to it and we're
getting all of Unicode I mean if I
really wanted to I can go back I don't
really want to do I well I've got a big
point sizer so let's give it a shot and
see well now that's not straight out of
the box TextEdit it can handle all of
Unicode three oh it is of course taking
advantage of courts since its cocoa it's
using Atsui
we're getting everything that's built
into the font and nothing has to be done
on the part of the app developer okay so
this is a cocoa application and now
we're going to turn our attention to
a carbon application of this is a
slightly modified version we are
cheating here a version of world text
world text is something that is
carefully hidden away it is available if
you install all of the developers stuff
and it's inside developer applications
extras and this is a simple ml te
application ml te is used elsewhere in
the system for example if the finder is
using ml te but this is one that gives
you some control so this time we're
going to start off again we're going to
make the point so it's really big we're
going to start off with Hoefler text now
half of our text is not this will be
discussed a little bit more on Thursday
Hoefler text is not actually part of the
system 10 install however it comes with
classic and since it comes with classic
it is visible to all of your OS 10
applications as well as your Canton
classic applications so we're switching
to Hoefler text we've made the point
size really big and one of the things
we're going to do is we're going to show
the typography palette and here we have
styles and this is the kind of thing
that we're used to and we're familiar
with but we also have this features tab
now what's happened is ml te
all right well world text is asking ml
te who is asking Atsui who is asking the
font give me a list of all of the fonts
features and so we're getting the answer
back from the font to Atsui to ml to e
to us so I can start typing hello world
and I notice I have some interesting
features here for example small caps
small caps this is something that you
see in a lot of word processors the way
that word processors nowadays typically
provide support for small caps makes
typographers cringe they hate it because
what they do is they take the regular
capital letters and they make them a
little bit smaller and that's not
correct because what happens then is the
weight of the letters changes as well as
the size it is best to have a font that
actual
has small caps designed for it and
Hoefler does so here I've changed to
small caps I have not changed the text
ring it is still the same set of letters
it was before I can make them all caps
again I haven't changed the text just
the way I'm seeing the text I can turn
on well let's turn this one off for a
second I'm going to turn on rare and
diphthong ligature so as I go typing
along here's fi
here's FL big deal FF I notice by the
way we have an F F ligature here f FL f
j if you're going to Norway and you're
talking about the fjords I think there's
an FK ligature there's a CT ligature
this used to be fairly common in western
typography thankfully it is rare now I
have a book at home that uses the CT
ligature everywhere and it drives me
insane to try to read it now I'm going
to turn on the archaic long s swash now
those of us who have looked at old
documents we've seen this sort of thing
and it tends to confuse us you know we
talk about Congress like that and it
looks like an F it's not an F it's
actually a long ass and notice I'm not
doing anything but the letter is
changing shape automatically again this
is information that's built into the
font and I'm not having to do anything
to take advantage of it okay well now we
have these things and let's just go back
to hello world and let's type some
numbers because we're going to change
the font and I'm going to do some
Japanese and now I'm not sure I remember
dang
I don't speak Japanese myself so I'm
just kind of typing at random here there
we go okay so here's my sample Japanese
text and while I'm at it I'm gonna have
to cheat here because there's a Unicode
I want and it's five two nine three okay
I'm gonna add this just to show the fact
Unicode hex input what did I say it was
five two nine three ooh
it's not in that font suppose however I
changed now to one of the hiragana fonts
these are the new Japanese fonts that we
are providing with OS 10 there we go
okay this is to illustrate the fact that
we are now covering more than just shift
just with our Japanese installed fonts
and we've got some very interesting
effects up there but you'll notice our
feature palette is also getting rather
interesting for example let me see we
have traditional four oh okay well I
can't do anything with that hey I can
slash my zero cool okay this is built
into the font I have had to do nothing
in order to take advantage of it this is
just percolating through I can turn
italics on and you'll notice that only
the Latin and not the script L even the
Latin is italicized not the kanji or the
kana somewhere in here let me see what
else do you oh this is the fun stuff
okay I can start clicking on these
things and I get all kinds of fun little
effects that I can put in I'm not
changing my text these glyphs are in the
font I can put them wherever I want in
my document but I don't have to change
the text in order to get to them let me
see now what was if I wanted to show
that as am i stealing I need to go back
to coda area here now this is I
mentioned this is a modified version of
world text it's modified what am i
typing after Necco huh Koni Kuni bus
except it's not doing it correctly ah
there we go
okay the land of cats so now if I can go
to my traditional forms there we go
okay I'm switching back and forth
between an older form that's not used
much in modern Japanese and the form
that would be currently used in Japanese
this is a slightly modified version of
world text the only in that it uses core
graphics it happens to be using quartz
for the end for the anti-aliasing and
that's that's the only difference with
the regular one that you see and so if
you look closely you would be able to
tell the difference in the anti-aliasing
however xavier is going to come back
onstage and he will give us a somewhat
more robust demonstration i think of
using core graphics with atsui and wrap
things up great demo I wonder who wrote
this application by the way sorry it had
to be French actually I know if we're
gonna have time how many of you are
interested actually in seeing the
integration of core graphics with that
so it's a very basic demo about that
yesterday night I know if you can raise
your hand I'm interested in seeing that
okay but give me an idea
it's super easy but like it really shows
me integration between actually core
graphics and Atsui I'd sue is a very
very powerful unicode layout engine and
as you serve it like in these demos
before like the hole finder of a whole
Mac os10 actually uses that to display
text but then when you combine the power
of a unicode layout plus the great
rendering engine that we have on 10
which is quartz you get things that are
like super cool I'm going to show you
something very very basic right now and
I'm going to show it to me like you know
if you're coming from quick-draw they're
like many differences between quartz and
quick-draw and I'm going to show you
just like you know the way things like
you know just feel together
CGT is based on that you know what we
call the cg context cg context is going
to have all your information from a
drawing it's gonna have like the
clipping the transformation matrix and
all these feelings huh and I have only
two minutes left
so here what for instant gonna just draw
some basic text what's happening here I
just followed the example that was given
by actually Peter I create a text layout
I put the really nice text you know the
text inside my layout I create a style
I place my cg context touval out and I
draw a text boom that's it so that looks
very nice like tony on the screen the
text isn't yes correctly the nice thing
here is that i can just call core
graphics and make a quick loop and just
say rotate the cg context for me and you
know with quick draw it was difficult
and of course you can do that without
sweet but here just want to show you how
easy it is address rotate the text here
i believe the text every time remember
with quartz the text is double Burford
which means you can call that sweet draw
text 100 times and then call cg context
flash and that's kind of cool because
you know you don't want to beat your
text you know every time line by line
you can like beat it you know by after
10 paragraphs or like when your webpage
is drawn so with quads and that's how
you can do that and here it's like you
know to the three lines of code i just
have a loop i say
rotate the context and that's it and
every time I call you know the same
routine to draw a text a nice thing is
like quartz you know respect
transparency and things like that and
for instance I'm going to save the
context which means like you know save
all the data that you have in the
current cg context and here I'm going to
change what I call you know over K which
is like the coefficient for transparency
in order to set that it's just one call
to call graphics and I'll give you
pointers on how to get actually all this
information in this session that we're
gonna have during the week so here I'm
just going to change like you know the
transparency in the CG context and I'm
going to just draw a text again and here
you can see the text I know if it's very
easy but you can see actually the text
it's transparent well actually a nice
way to put it is actually I'm just going
to draw a PDF with CG context this PDF
is one megabyte it's one call to display
that and then on top of that well I'm
just going to draw my texture and I know
if you can see but you know be over
so you can see the PDF once again these
are like little tricks little details
but just to show you how powerful the
integration between atsui unicode layout
engine and quartz is and you know of
course I can just rotate the text and
boom that's it you know and you get a
you know of course with text is any
ideas correctly even rotated and once
again this I like you know three lines
of code to do that you'll know too that
you know from a CG context what you can
use that you create a PDF file and
actually from here with my same drawing
okay so using Atsui and passing a court
a CG context to atsui I could create
activate just with PDF file and save it
like that and then after that you know
you can put it on the net or do whatever
you want that's why it's great to have
such a great integration between at 3
because use that 3 for all your drawing
and then you know use all the power of
quartz to do whatever you want save to a
PDF file do the transparency apply the
transformation matrix I have another
example actually I'm going to restore a
context here and receive it and I'm
going to do something which is like you
know what we call the scaling that's
kind of cool because you know for
instance if you want to do is zoom
effect on your texture right now you
have to change the font size or you have
to use a bottleneck with quick-draw well
with core graphics you don't need to do
that and we are running late so very
quickly I set the context
I drove a text here I'm going to erase
it I'm going to change the scaling and
here hmm
oh I draw a rectangle my mistake basic
text and here it's the same code I do to
add three but core graphics actually
rescale completely is context and I get
actually just the same nice interesting
and the text is drawn ok could we switch
quickly to the slides to finish up and
do a wrap-up great
okay very quickly mr. Murray I'd series
at the heart of a drink of Mac os10 oh
and this is like you know just the way
things are Mac os10
is really a truly international system
and you know do b2b really international
you need to use Unicode I'd series with
solution at that point all the pieces
built in the system on top of atsui use
Unicode to render the text once again as
we explained today with Peter and
journal use it directly when draw theme
text box is not enough and we'll talk
about like you know VCRs tomorrow in the
text session when you need fine control
on the text and when you need of course
move integration with quartz if you're
doing like you know DTP applications or
you need to do like you know I rendering
height and I and typography use Atsui
and quartz they are great to use
together and of course if you're using
you're writing your own word processor
you just have to use quads and to find
out more very quickly there is a great
sample code that you should all check
out if you want to use that tree it's
the QA that is written where Q at 10:27
it's actually the same waiver draw theme
text box work so we put here like a
bunch of sample code that shows you how
to create a style how to create the
layout you just take it compile it put
it in your code and you'll see it's the
same result but your theme text box and
it's going to give you more power on
actually on like manipulating the layout
if you want to do like you know vertical
text and stuff and of course we'll show
you how to pass like you know CG context
to it so where to go from there
text on Mac os10 tomorrow we'll talk
about the layers on top of that so we'll
talk about
MLT we'll talk about like the draw theme
API so and we try to shove integration
of all these things on em LGBTQ lingual
text angina session 128 we'll talk about
font management of Mac OS 10 fault
management has been like you know doing
like rate of improvement in this new
version of Mac OS 10 you should check it
out if you manipulate fonts and of
course the feedback forum it's always a
great way for us to get feedback from
you guys on how use VP is what's missing
what you'd like to see
you can always contact me Xavier Xavier
at apple.com for all your questions if
you need sample code if you're blocked
API SATA missing things you want to see
or just questions
you