Mac OS • 1:02:54
What do you do when DrawThemeText isn't enough? This session covers drawing Unicode text beyond the basics. Learn to draw text using ATSUI features, such as vertical text, and Core Graphics features, such as transform matrices. Participants will see how the Finder, Menu Manager, Sherlock, Help Viewer, and Cocoa take advantage of ATSUI capabilities.
Speakers: John Jenkins, Peter Edberg
Unlisted on Apple Developer site
Transcript
This transcript was generated using Whisper, it has known transcription errors. We are working on an improved version.
My name is Xavier Legro, and I'm the Text and International Technology Manager for Apple Computer in WWDR. And I'd like to welcome you to session 110, Drawing UniCode Text with ATSUI. ATSUI on Mac OS X, which is Apple's type of services for UniCode imaging, has evolved a lot and is actually the heart of text rendering on Mac OS X. We'll talk in detail about the UniCode support today and how ATSUI fits in this overall picture of Mac OS X. In order to do that, I'd like to introduce John Jenkins, who is actually our Mr. UniCode and who has been working on ATSUI.
Okay, so first to just give a sense as to what we'll be talking about here throughout the session. We'll start out by a brief discussion as to what ATSUI 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, where 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 APIs 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 ATSUI. 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 Carbon.
This is something fairly new with ATSUI on OS X, 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 ATSUI would be, of course, to draw UniCode text, as the name implies.
Finally, you might want to use ATSUI in order to provide access to high-end typography. The Mac was, of course, one of the original platforms 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. ATSUI allows you to change that.
And of course, if you want to do any one of these three things, you get the other two basically for free. If you want to draw UniCode text, you can use ATSUI. You will get Quartz and High-End Typography for free. If you want to do Quartz with your text, you use ATSUI. You get all of UniCode and High-End Typography for free. And if you want to do the type, you use ATSUI, and you get the other two for free. So, fundamentally, ATSUI is the way to draw text on Mac OS X. It is the preferred system for drawing text.
Okay, a little bit about ATSUI and Quartz. ATSUI is fully integrated with Quartz. It respects the settings in a CG context. If you have, basically if you wanted to use Quartz, you create a CG context, you hand it off to ATSUI, ATSUI 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, it's 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 ATSUI with Quartz, and you will get the correct thing on a Carbon application.
As for UniCode, ATSUI 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 49,000 characters, I believe, and WorldScript covers about 40-50% of those. So there are tens of thousands of characters that you can get through ATSUI that you could not get through WorldScript. Moreover, ATSUI automatically handles all of 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 ATSUI. And of course, there are in UniCode more complex scripts: Arabic, Devanagari, all of the scripts of South Asia. and SUI 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 1, and you would have to rewrite it again for World Script 2. You don't need to do that with ATSUI.
If you adopt ATSUI, 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.0, 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 than I want to think about, actually, in UniCode. You get all of the CJK ideographs, which again is a far larger set than is available through Mac Japanese, Korean, Simplified, and Traditional Chinese put together, as well as KANA, both Katakana and Hiragana, Hangul, and so on. There are literally dozens of scripts that you can take advantage of. of without SUI.
As for typography, one of the nice things about ATSUI 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 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 and FL ligatures in MacRoman 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 and FL ligatures in my text, my spell checker is going to get confused because the words are changing their spellings. If you use ATSUI, this will not happen. You will have the ligatures. They will look gorgeous. But they won't screw up anything. anything else.
You also get through ATSUI 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 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 appearance. Sophisticated justification. All of these are available through ATSUI. 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 ATSUI. 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 Inuktitut and some Georgian. Inuktitut is a series of languages that are spoken in Native American languages spoken in Canada and the 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 WorldScript. Inuktitut and Georgian, 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 ATSUI.
You're not limited to the particular line angle for the text. And if you look closely, in this particular example, it is, in fact, using quartz. 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 appropriate for the angle of the text.
Now this is an example of Zapfino. Zapfino is a new typeface. It is available on Mac OS X. It is based on the handwriting of Hermann Zapf. Zapf 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 in Zapfino. 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 FIs, several FLs, 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 used 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 ATSUI, and everything is going through it for text rendering on Mac OS X.
You, the developer, are writing a Carbon application or you're writing a Cocoa application. Some examples here of applications which are Carbon apps and are using ATSUI, the Finder, Sherlock, Help Viewer. If you're 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 ThemeText APIs. You might be using Multilingual Text Engine.
You might be using the HTML rendering APIs. 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 the HTML rendering APIs. Cocoa is similar. If you're writing a Cocoa application, you almost certainly will be using the app kit for most of, if 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 ATSUI directly. So it's there, no matter what you're doing. So that's the first thing.
Now, ATSUI 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 used in Quartz. And down at the bottom, we have Apple Type Services. This is what gives ATSUI 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 has gone on, it has become more and more central. So ATSUI is using ATS, and other people are using ATSUI to get to text.
Namely, Large number of list of people who are using ATSUI 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 "yee," which is a new script in UniCode 3.0. We have some "oem." We have "runic." We have "Cherokee," "Cyrillic," and the last one I know is a Mongolian letter.
um 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 HI text for both Carbon and Cocoa is going through ATSUI. Menus, Window Title Bars, Dialog Box Elements are all being drawn with ATSUI. So the entire UI that you're experiencing on Mac OS X 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 CFString, you're creating a UniCode text. When you draw it on Cocoa, you're drawing it through ATSUI. The Help Viewer is using ATSUI. Sherlock, when it brings back results to you, is using ATSUI. We have the Multilingual Text Engine, MLTE. This is our text edit replacement. It will be discussed in some detail tomorrow. That's using ATSUI. And of course, the list is continuing to grow. Fundamentally, UniCode is Mac OS X's native character set. Think of all text as being UniCode.
And ATSUI is the way to draw. Unicode Text on OS X. Now given the fact that there are a large number of APIs that are available that themselves take advantage of ATSUI, 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 ATSUI 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 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 There may be certain features of ATSUI which other APIs do not make available. Vertical text is an example. Not all of the ATSUI clients themselves support vertical text. So in this sort of a case, you would want to use ATSUI yourself.
More sophisticated control over justification. This is available in ATSUI, may not be available in a client, so you would use ATSUI 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 MLTE, 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.
All right, so what does it provide you? Again, everything in UniCode 3.0. With one caveat, and that caveat is fonts. ATSUI is limited by the set of installed fonts. Although we have a very rich set of fonts on OS X, some really beautiful fonts on OS X, we do not have... A font that covers all of UniCode 3.0. Well, we have the last resort font, but that's... ATSUI does support vertical text. This is enormously 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 and other publications are using this sort of thing all the time.
ATSUI supports advanced typography, kerning, letters shifting relative to each other to get the optimum appearance, optical alignment, letters 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 literature. 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 through ATSUI. You can have a font that has a continuous variation in weight or width or something like that.
ATSUI has APIs to help you if you are writing an editor, highlighting, Hit mapping, cursor positioning, things of this sort are available through ATSUI APIs. And, relatively new, ATSUI 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 that ATSUI deals with must be UniCode. This was a decision we made to simplify the design enormously. We have the Text Encoding 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, and then there's UTF-32, which is fairly new and is quadruple-word-oriented. Everything is exactly four 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 away to ATSUI. You keep it. You tell ATSUI where it is in memory. You tell ATSUI what part of it you want to draw. ATSUI 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 ATSUI, and these are the core of how ATSUI works. The first is the ATSU style, and the second is the ATSU text layout. An ATSUI style is an opaque structure that contains, basically, all of the style information for the text.
The font, this is an ATSUI 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 QuickDraw 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 QuickDrawText. 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 font's 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 an ATSUI style. It's a long list of things that are set up--setable in an ATSUI style, and in point of fact, it is possible for you to create your own style information that you can attach.
ATSUI 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 ATSUI 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 ATSUI 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 of the work.
Now, one important thing, and this is different from QuickDrawText, is that ATSUI 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 bidirectional 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 it's going right to left across the page. Okay, when you try to mix those together, it can get a little bit more complicated. UniCode has a standard bidirectional algorithm for handling these sorts of situations. In order to use it, ATSUI needs to have an entire paragraph of text to work with.
So you hand ATSUI 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 ATSUI text layout and you've associated the styles with the text, there are other things you can add to it.
You can add to the layout object other bits and pieces of information. Line attributes, this is where justification is controlled. This is where rotation is controlled. This is where the direction of the individual letters is controlled. And it is the ATSUI text layout object which owns or which knows about the CGE context if you're going to be using Quartz.
You should be caching these if you at all can to take advantage of them later. So, some examples again. 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 superscripts or subscripts. 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 done with variation fonts. And of course, line layout controls, rotation, justification, flushness, baseline, your CG context, things like this. Okay.
So, that's an overview of how Atsui works. Now we're going to go through some more detailed examples. We're going to bring up Peter Edberg, senior software engineer at Apple, who is responsible for much of the work being done on Atsui, 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 quartz drawing with ATSUI, 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 with ATSUI.
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 go through the first example in the greatest detail, and that's the one that illustrates the fundamentals of this code idiom that we're referring to. Okay, so the first example is ATSUI with CG. The first thing that you need to do is create a style object. These are 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 into 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 that specifies the size of the data for that tag.
And then the third value is a pointer to the actual data 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. order.
[Transcript missing]
And finally, then, you set your layout controls in the Layout object. In this case, we've only got one, which 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 Core Graphics, in 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, that will show you how to get a CG Context, for example, from a GraphPort, 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 specify on 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 draw it. Now, as was mentioned earlier, Atsui 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.
The example call here is 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 Cort's 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 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 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 all look pretty familiar, because they're all based on 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 superscripts. 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 text, subscripts or superscripts, etc.
So you could create one for your basic equation text, say a norm style. You could create one for your subscripted text, and again, it would differ in that it would have a smaller font size. It would be shifted down below the baseline. and something parallel to that for superscripts.
In this case, the features that you're going to use are, the two features are both style features. One is the CrossStream Shift tag, which we're going to use for the superscripting or subscripting. And then the Font Size tag to get the smaller size for the super or subscript.
Again, you would need to create a style. Typically, you would start out with the normal style, and you would set up your font and size as described before, and use the bulk setter to set those. Now, there's a new call here, Create and 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 in points. 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 substyle, your subscript 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 single length. Now, you could, in this one call, if you wanted to, specify which runs of text are subscripted. 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 width 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 summation limits. And bonus points to whoever can come up and tell Debra afterward what this equation is.
Fewer bonus points if you're a physics major. Okay, the next example is vertical text. And again, this is one of the special things that you would have to use ATSUI 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 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 could use Core Graphics for that.
You could use Quartz for that. But if you want to use the ATSUI editing APIs 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 tag, 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 force it to be vertical.
Okay, so we're going to 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. Now, you don't need to do that, and we'll show some more sophisticated examples later on, where you apply that vertical style only to some of the characters in the layout.
Okay, now if you want to use ATSUI rotation, again you would use the layout attribute or 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 going to 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 session. Okay, so 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 in 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 and the kanji are rotated, but the parentheses have adopted a vertical form, which, when the line is rotated, will be the proper orientation. So that's the rotation 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 last example, the right side of the vertical section, has both of them going on at once.
There are some more sophisticated things that one can 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. In this example, we've rotated the line, but we've only applied the vertical style to the katakana portion of the line. That's a common example of how some typesetting might be done for vertical text in Japan. There are some more sophisticated examples, like the Tate-Chu Yoko example here.
To achieve this effect, and this is a little bit more complex, 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 is 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 would be three different lines from ATSUI's point of view.
So you would rotate the first and 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 going to 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 two for the demo, please.
I'm not used to looking down on my screen. This is just kind of weird. 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 X 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 file names. So I'm going to create here a new folder, and I can start typing, and of course I can give it a very, oops, if I can type, very, very, very, very, very long name, which is nice. 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 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 Coto-Array 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. Anyway, 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 inferred and inserted the Snowman character, which is Unicode 2603, into my--which I just happen to know. So I'm able to use arbitrary Unicode here in my file names, and that's really, really an enormously wonderful thing. Let me think.
[Transcript missing]
Okay, well, I got the last resort glyph for... I mentioned the last resort font. 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 the user sees that, they'll say, oh, I need to go get a Cherokee font. And they run out and they get a Cherokee font and they install it. This provides much, much less system overhead.
than 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 text editing 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.app, I can see what you can see what I am about to show you. If you are using OmniWeb, which is using Cocoa, anything which is using Hi.
Anything which is using Cocoa is going to do this. And we get some really nice stuff here. Now, again, I've switched the font to Zapfino. Zapfino, this is Herman Zapf's handwriting. Fortunately, no one will ever make a font based on my handwriting. So now watch what's happening as I'm typing, OK? I'm typing along.
Notice what's happening to that P. That phenol happens to have a PP ligature. This is not the sort of thing that you typically expect a font to have. Hermann Zeth has one. or if I type F-I again, is forming automatically. This is the important thing, is that it's happening automatically. Alright, the type designer has put it into the font.
ATSUI 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. There, 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 size here, so let's give it a shot and see. Well, nah, let's not.
Straight out of the box text edit. It can handle all of UniCode 3.0. It is, of course, taking advantage of Quartz since it's 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. And this is a slightly modified version. We are cheating here. A version of WorldText. WorldText is something that is carefully hidden away.
It is available if you install all of the developer stuff. And it's inside developer applications extras. And this is a simple MLTE application. MLTE is used elsewhere in the system. For example, the Finder is using MLTE. 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 size really big. We're going to start off with a little bit of control. off with Heffler text.
Now, Heffler Text is not, this will be discussed a little bit more on Thursday, Heffler 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 X applications as well as your Classic applications.
So, we're switching to Heffler Text. We've made the point size really big. Now, 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 MLTE, well, MLTE is a little bit more of a feature. WorldText is asking MLTE, who is asking ATSUI, who is asking the font, Give me a list of all of the font's features. And so we're getting the answer back from the font to ATSUI to MLTE 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 actually has small caps designed for it, and Heffler does.
So here I've changed to small caps. I have not changed the text stream. 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 ligatures. So as I go typing along, here's FI, here's FL, big deal, FFI. Notice, by the way, we have an FF ligature here.
FFL, FJ 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 S.
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 going to have to cheat here because there's a Unicode I want, and it's 5293. Okay. I'm going to add this just to show the fact. Unicode hex input. What did I say it was? 5293. Ooh. It's not in that font. Suppose, however, I change now to one of the Hiragino fonts. These are the new Japanese fonts that we are providing with OS X. There we go.
Okay, this is to illustrate the fact that we are now covering more than just ShiftJIS 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 font. 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 italicizing, not the kanji or the kana. Somewhere in here, let me see, what else do we have? 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... I need to go back to Coda Airey here. Now this is, I mentioned this is a modified version of WorldText. It's modified What am I typing after Neko? Huh? Kony? Kuny. Thus? 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, only in that it uses Core Graphics.
and David It happens to be using Quartz for the anti-aliasing, and 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 on stage, 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, private. It had to be French. Actually, I don't know if we're going to have time. How many of you are interested, actually, in seeing the integration of Core Graphics with ATSUI? It's a very basic demo. I wrote that yesterday night. I don't know if you can raise your hand. Are you interested in seeing that? OK. That gives me an idea.
It's super easy, but like-- It really shows the integration between Core Graphics and ATSUI. ATSUI is a very powerful UniCode layout engine. And as you saw in these demos before, the whole Finder, the whole Mac OS X actually uses that to display text. But then, when you combine the power of the UniCode layout plus the great rendering engine that we have on 10, which is Quartz, you get things that are super cool. I'm going to show you something very, very basic right now.
And I'm going to show you actually, if you're coming from Quick Draw, there are many differences between Quartz and Quick Draw. And I'm going to show you just the way things just fit together. CG is based on what we call the CG context. A CG context is going to have all your information for the drawing. It's going to have the clipping, the transformation matrix, and all these things.
And I have only two minutes left. So here, for instance, I'm going to 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 pass my CG context to the layout, and I draw a text. Boom. That's it.
So that looks very nice actually on the screen. The text isn't used 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, that was difficult. And of course, you can do that with ATSUI, but here I just want to show you how it is. I just rotate the text. Here I bleed the text every time.
Remember, with Quartz, the text is double buffered, which means you can call ATSUI DrawText 100 times and then call CG Context Flash. And that's kind of cool because you don't want to bleed your text every time line by line. You can bleed it after 10 paragraphs, like when the page is drawn. So with Quartz and ATSUI, you can do that. And here it's actually three lines of code. I just have a loop. I say, "Rotate the context," and that's it. And every time I call the same routine to draw the text.
A nice thing is Quartz, respect transparency and things like that. And for instance, here I'm going to save the context, which means save all the data that you have in the current CG context. And here I'm going to change what I call the k, which is the coefficient for transparency.
In order to set that, it's just one call to Core Graphics. And I'll give you pointers on how to get this information in this session that we're going to have during the week. So here I'm just going to change the transparency in the CG context. And I'm going to just draw the text again.
Here you can see the text. I don't know if it's very easy, but you can see the text is transparent. A nice way to put it is, 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, I'm just going to draw my text.
I don't know if you can see, but below the text you can see the PDF. Once again, these are little tricks, little details, but just to show you how powerful the integration between ATSUI, the UniCode layout engine, and Quartz is. And you know, of course, I can just rotate the text and boom, that's it. And you get, of course, the text is NTIDAS correctly rotated. And once again, these are three lines of code to do that.
You all know too that from a CG context, what you can do is that you create a PDF file. And actually from here, with my same drawing, so using ATSUI and passing a CG context to ATSUI, I could create actually just the PDF file and save it like that.
And then after that, 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 ATSUI, because use ATSUI for all your drawing, and then use all the power of Quartz to do whatever you want. save to a PDF file, do the transparency, apply the transformation metrics.
I have another example. Actually, I'm going to restore the context here and re-save 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 a zoom effect on your text, right now you have to change the font size or you have to use the bottleneck with Quick Draw. Well, with Core Graphics, you don't need to do that. Oh, and we are running late. So very quickly, I save the context. I draw the 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 call I do to ATSUI. But Core Graphics actually rescales completely this context, and I get actually just the same nice anti-aliasing, and the text is drawn. OK, could we switch quickly to the slides to finish up and do a wrap-up? Great.
OK, very quickly, the summary. ATSUI is at the heart of the drawing of Mac OS X. And this is just the way things are. Mac OS X is really a truly international system. And in order to be really international, you need to use UniCode. ATSUI is the 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 John, use it directly when DrawThemeTextBox is not enough. We'll talk about these APIs tomorrow in the text session. When you need fine control on the text, and when you need smooth integration with Quartz. If you're doing DTP applications, or you need to do high rendering, high end typography, use ATSUI and Quartz. They are great to use together. And of course, if you're writing your own word processor, you just have to use Quartz and ATSUI.
To find out more very quickly, there is a great sample code that you should all check out if you want to use ATSUI. It's the QA that is written there, QA 1027. It's actually the same way that DrawThemeTextBox works. So we put here 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 as DrawThemeTextBox. And it's going to give you more power on manipulating the layout if you want to do vertical text and stuff. And of course, we'll show you how to pass a CG context to X3.
So where to go from there? Text on Mac OS X tomorrow, we'll talk about the layers on top of ATSUI. So we'll talk about MLT. We'll talk about the DrawTheme APIs. And we'll try to show the integration of all these things. MLT, multi-lingual text engine. Session 128, we'll talk about font management of Mac OS X.
Font management has been doing a lot of improvement in this new version of Mac OS X. 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 you use APIs, what's missing, what you'd like to see. You can always contact me, Xavier Legro, [email protected], for all your questions, if you need sample code, if you're blocked, APIs that are missing, things you want to see, or just questions.