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