Create Professional HTML Invoices with the Ultimate Invoice Generator for Product Quality

Html invoice generator for Product quality

okay welcome everyone we're going to be talking about printing here today more specifically about prints the product that Michael and his colleagues in Australia have been developing and my name is Hakim villa I'll start by saying a few words about CSS and and how we we came to to use CSS and HTML in the printing world then Michael will go through some of the technicalities there's probably a lot of technical people in the audience we're going to go through some of the issues that that you get when you try to do printing from the web and then I'm gonna run some demos at the end again I've been CSS sort of has been part of my life for 15 years now in in 1994 I first proposed the concept of CSS I was then working at the at CERN with Tim berners-lee there and he'd come up with HTML and it was wonderful and everyone loved it except authors who wanted to to be able to style their documents and say something about fonts and colors and HTML wasn't meant to do that and we didn't really want to make to turn HTML into a formatting language so we said you know we're gonna do style sheets on the side here they're gonna live next to to HTML and determine the styling for for HTML and this was the initial proposal from 1994 and printing was actually a part of that we had the concept of media types so you can do style sheets for speech for screens for printing etc now it took us a few years to get from this initial proposal and to a recommendation which is w3c s name for for a standard in 1994 the 1996 the the first CSS standard was there and in 1998 came CSS 2 which added the concept of media specific style sheet which allows you to write a print specific style sheet for example so from then on you could really really do do printing and we've continued this work in specifications to talk to to you know to to add features that are needed in printing but not necessarily on the screen and we have two specifications being worked on css3 for which media and css3 generated compton four-page media and you'll be seeing lots of examples today about what kind of functionality is in those specifications the reason I came to get to know Michael and his company was when burt boss and myself Burt bosses the co-author of the initial CSS specifications we have a book we wrote a book about CSS and the first edition of that book was written in Microsoft Word I think and the second edition was written in frame-maker and for the third edition which we started working on in 2003 we said hey we're gonna write this book in HTML and CSS now you gotta see these things you know what we're preaching here does it really work and if it doesn't work what's stopping us what does the functionality needed so we sat down and you know we quite easy to import the text from from those framemaker and word files and the figures as well and ideally then you should have just been able to create an HTML page and press print in your browser unfortunately browsers and I have to say very unfortunately since I also represent one browser maker opera software we're not very good at great at printing documents printing has never been the most important issue for users so therefore it's been put off to decide a little and and browsers have never really gotten to doing printing well so we couldn't use the browser to print this book but we needed to provide a PDF to the publisher to the printer that's the accepted exchange formats for printed documents so we had to have a HTML plus CSS to PDF converter so we started looking and we came across Michael and his colleagues and this wonderful product they were doing called called prints which enabled us to to actually do exactly what we what we wanted to to take our our files there were maybe 20 we had one HTML file one for each chapter concatenate all of this information with figures with CSS stylesheets and to get one PDF file out of there and and that's that's what we sent to the printer and and this is this is what we got back now books is sort of the high end of the printing market and I don't think that's representative for the kind of work that that prints is being used for but it just shows you know what what is the possible is there a limit up there and I think you know books we can do so that's good news another example I've been working on is PDF newspapers a lot of newspapers and I started to publish PDF this is the Guardian in in Britain who's sort of every every hour or so they publish a new version of this PDF newspapers that they want people to print out and take with them on their commute back back on the subway in London or something and we looked at the PDF they were generating and we saw it was made by InDesign and that means there's probably a guy sitting there you know with the layout and doing all the clicking in and and and you know it's it's you can get quite beautiful documents out of there but I think I think InDesign is gonna be you know you know these people who worked with lead in the old days and then computers came and they were sort of sitting in the corner still doing lead for a while I think InDesign is going to be like that you're gonna have that one InDesign guy in the corner and they're probably gonna have a union but really everything is gonna everything is going to come off the web the web is going to be the master copy of all information and you're gonna press print and you're going to get something out of there and I think what you're going to get in the foreseeable future is PDF I think PDF has established itself as as the means of exchanging information when you want to print or archive something so what we did here was to take their PDF document which is on the right and then I created I recreated a HTML document with CSS and I used prints to convert it into PDF again and that's what you see on the left and if you look very carefully you'll see there are some minor difficulty minor differences between the two but they're pretty much the same which means the Guardian could have used the web asked their master copy they didn't need to go too an expensive InDesign human being that's another high-end example I'm going to point you're going to select you just show briefly one more one more example before I let Michael continue and that's my own PhD thesis which of course was also written in HTML and CSS and I had to adhere by the rules of the University of Oslo they had certain requirements some especially the printed version of this but I wanted to use again the same master copy the same HTML files in the same CSS file should be used both for the on screen version and for the printed version so that's what I did and there's the resulting document the the theme of my thesis is CSS I said it's been part of my life and and here's here's the PDF version which which complies with the with the rules of the university and we think there's lots of cases like this where authors want to write documents and they want to inherit by some style rules that have been set put forward by others and they just had to follow those rules and it should be easy to do that and you shouldn't have to import template in Word and and make all these manual changes yourself it should be just print the button from the web and on that note I'm gonna let Michael continue and talk talk more about the technicalities underlying this Thank You Hana right so CSS I'm assuming most of you now have some idea of CSS what it is what it's used for but just as a refresher here's a really basic CSS rule used for setting heading styles the h1 elements being the main heading of HTML document usually and we want to set a font in the typical typesetting fashion the syntax its bold 24-point Palatino and aligned to the center now you can imagine this kind of rule being in a corporate style sheet if you want to keep a consistent printout style for all your documents and you have this rule and you can combine it with other styles it's because CSS rules cascade that's the cascading the see in CSS and you can combine different style sheets and they will intelligently merge and the rules will all be applied to the document so that's a simple rule and it applies to our HTML element now I'm not going to go into detail about CSS there's thankfully plenty of tutorials on the web about how to use it mostly for websites of course but what we're interested in is CSS for printing something that still many people don't realize can be done even though some of these features were in their stars such as page breaking in CSS 2 dating back to 1998 page breaking is usually about pagination generally is usually the first request people have it's how to create page breaks where you want them and inhibit page breaks where you don't want them I'm gonna come back to this in a second actually and it's very very simple so we have two rules here and again this is pure CSS too so you can do this since 1998 which is quite a long time h2 is your second level heading maybe your chapter headings and you probably want to start them on a new page a fresh page so we use the page break before property to say that we're always going to have a page break before a chapter level heading so it starts at the beginning of a new page that's handy but then your section headings you don't want to start those on a new page they can occur anywhere but what you do want to say is that they don't appear at the end of a page the last thing of a page I mean it's bad form to start a new section with a heading at the bottom and no text following it and then that the text begins on the next page that's ugly so we say avoid breaking pages after a section heading so principle then moves a heading to the next page so that it starts immediately before its content it just makes it easier for the reader css3 also adds page break inside where you can avoid splitting objects for example small tables that you want to keep together you can make sure that it's displayed on one page in one piece so it gives you some control over the way your document is paginate 'add now just to go back here this is this is what we call the magic document it's a contrived sample document that includes as many of the print specific features of prints that we can find and I'm going to be going through how some of these are implemented you can just see some of the things like crop marks and cross marks for alignment now it's a fairly high-end printing feature but some of our customers are using it as I mean they they're doing batch jobs on industrial printers and things and it's it's handy for them they print on bigger pieces of paper and it gets trimmed to the right size now it's funny actually because when we first implemented crop marks and we wanted to test it out so we made the magic document and a hawk on had it printed he sent it to the printer as a PDF file and we got it back and we looked at it and the first thing we thought is where are the crop marks they disappeared and of course we asked the ask the printer and they had cropped them I mean they are crop marks that's what they're for they had trimmed it exactly where the crop marks were so they worked perfectly but it wasn't quite what we were expecting now in fact there's also metadata inside the PDF file giving the paper size that corresponds with the crop marks and intelligent printers will look at that so the actual visible crop marks are more for humans to double check so a couple of things there you can see that there's two columns of text if you look closely you can see a few things a table of contents with page numbers and we're going to talk about where those come from and a few other things CMYK called CMYK colors and things hyphenation so we'll get into some of those now once you've taken control of page breaking and pagination you also want to know what is what is your page I mean how do you select your page it's not it's not an element in the document but you want to apply properties to it so CSS to introduce the app page rule which gives you a way to specify page properties like the page size and orientation and the margins around the page and this is really a starting point for creating a page template you know what what size paper are we working on what are margins and later what are headers and footers so this rule is fairly straightforward we want a two centimeter margin on every side and it's an a4 landscape page now you can actually mix the landscape and portrait pages a common use of that is to have a document on portrait oriented pages and at the end perhaps a landscape page for a large table that wouldn't fit on a portrait page and this is where we're getting two headers and footers which is where it gets interesting when we define the page margins that created margin boxes every margin creates a margin box on the page they can contain content either generated by the stylesheet as we see here we've created a a header with a fixed text my document that comes from the stylesheet and a footer with a with a running page number it's using the page counter so it'll just be page 1 page 2 page 3 as you go through the document you can also get the inner page 1 of in we're design and framemaker are not part of the web so obviously we want to provide the features for headers and footers and things that people are accustomed to working with other systems I mean you might as well ask him what way he's worth duplicating InDesign is InDesign duplicating word I think we can talk more about that later I mean it's this is then an attempt to bring printing to the web so that web content can be printed out in a way that's consistent with printing tradition yeah yes I don't know about all the stuff that they do through the user interface I mean I haven't looked at every aspect of InDesign and seeing if there's a CSS property for every one but that's getting adorable there you go well generic typesetting systems that the human can go in and actually drag things around will always be able to do fairly arbitrary complicated random things I mean there's an 80% of documents of of everything from book reports invoices articles up to books which a generic automatic typesetting system can handle fine running off style sheets without human intervention sort of going in and sort of actually clicking on something and saying move these two pixels to the left and that's really what we're targeting here in the same way that the browser lays out pages without human intervention right it's not an image editor it's not the you have to go in and move it left and right we want to do automatic typesetting yeah and I just to add to that I think you're right in pointing out these other products they have a long tradition of typography printing has evolved over hundreds of years and one has a certain features than one is used to mike harrison theorists like page numbers etc and I think we all trying to to implement this in design and word are doing it in manual way where you have to point and click and type when you're trying to do this in an automated fashion here by putting this these into this text goes into a CSS style sheet that you can then apply to all the web documents yeah this is part of css3 yeah well actually CSS yeah yes I mean yes but yeah and of course you could build a GUI on top of it I mean you know it's easy to generate CSS from a GUI in the same way that you generate HTML for doing okay I'll get back to you when I get back and check every one of those features but we want to handle the sensible 80% that covers most documents yeah I mean we are aiming to provide something that's gonna be usable for a lot of things right so it's also possible to take content from the document and move it to the headers and footers which is quite handy you can take chapter titles so just text from the document take it there or you can take whole elements like tables and put them in the headers and footers and repeat them and there's control over where the headers and footers are displayed you can disable them for the first page of the document or first page of the chapter which is a common use you can also create duplex page layouts and I've just sort of hinted at that at the bottom where you have the the two-page spread with a left and right page intended for sort of being bound and they usually have different margins on the left and right pages and different headers and footers so there is support for that and they're fairly flexible in what you can do now we saw a multi-column layout in the magic document and this is a rather exciting thing it's being implemented in some of the browsers as well some of it and you have builds of Firefox and it degrades nicely of course in the browser if you don't have columns it just displays in one call now in print columns of course have a long history and they can be accessed in two ways you can specify the number of columns and it'll just divide up the space into that many columns and you can do balanced columns where the height matches and all the columns or latex style columns or it fills each one in turn there's lots of options and you can just specify a column width so you say well I don't know how much space there is but I know how wide I want my columns to be so just divide it up into columns of this width and it does the best job it can and you put rules between the columns have little lines gaps between the columns it's quite configurable and yeah that's out of the multi-column layout css3 module which has achieved some implementation in other browsers as well as prints which is good to see okay leaders and cross-references now this is a print specific thing leaders are those little dots which is probably easier to show than tell in the table of contents the leader is the line of dots that leads your eye to the page cross-reference corresponding to that chapter now of course they can't be in the input document because you don't know how many dots you have to put there so that's part of CSS generated content and it's easy to access that functionality you just say well I wanted a leader and put it dot there and repeat it to take up all the available space so that's that's handy it's neat but cross references are really the first form of hypertext I mean that's that's hypertext do you want an internal link in the document see page 17 or you can reference the the title you can see see chapter one you know cascading style sheets on page 17 so regular internal links in the document can using generated content be written as cross references with page numbers section numbers and titles if you're feeling in a web browser that's fine you can put this rule and I've written it here yeah I mean we've said after a link put a leader and a cross references target counter so the value of the page counter at the element of the link points to now Hawkeye mentioned media specific stylesheets that's basically at media print or in HTML when you reference the stylesheet you can specify a media attribute and that says only apply this stylesheet if we're printing and you got media screen and of course the default is media all we've got Star Wars that you want to apply in every situation so it's quite easy to make documents and Hawkins PhD thesis was an example of that where it had a menu down the side that doesn't display in the printed version it's quite easy to make documents where you can take advantage of print specific features when printing and web specific features when on the web I mean maybe you want a little pop-up or some absolutely physician floating thing when the user Mouse's over that can't be expressed in print but does make sense on the screen and you can have both of that with CSS so I mean we see the web as Hawkins said and we keep repeating we see the web as being the way of distributing information in the world I mean it's the global information platform for Humanity and output devices from laptops to phones to printers I just should come from the web and you shouldn't have to rewrite your document just because someone wants to print it they should be able to print it and get high-quality output from what you've written there there are two properties I haven't got a slide for that actually but there are two properties widows and orphans both of which take a number now in the context of CSS they actually both refer to lines one is the the number of lines that can appear orphaned on the next page so if you have a single line of a paragraph and one is the number of lines that can be widowed possibly it's the other way around at the end of the previous page so if you begin a paragraph but you only have room for one line of it so I think we by default we set it to two or three something like that so we do support that now you also mention the word widowed or generated it's a bit unfortunate to have a line with a single word alone now that comes down to a line breaking and justification there's some algorithms were working on I mean later has done this where if it sees a single word at the end of a paragraph it will say oops backtrack a little bit maybe try to tighten up some of the earlier lines and and move them back now that's an algorithmic thing and we've got to work on that but yeah I mean we definitely are paying attention to those kind of issues because they are important I mean the browser should do those too in my opinion it's very difficult actually this is a great example where it looks horrible where essentially you have one line of text that wraps and has like two words on it yeah whereas in like the fewer number of lines more important is for them to have like a substantial way of like you know equal length yeah yeah yeah so yeah I'm not sure if we will have any properties directly to control that maybe just a not basically to control the quality I mean how hard should the algorithm work to make things look good you know what's the tolerance for sort of sloppiness in in the line breaking but yeah we do have widows and orphans on a line basis and we definitely plan to add it on a word basis as well at least I think I think Tech has standard sort of a minimize the least-squares badness of the of the line variation and things like that yeah we should be able to get to the point where we can handle most things well and you know any bookmarks is a PDF specific feature actually that doesn't show up when you print the document but if you load a PDF file it actually has a bookmark list down the side a hierarchical sort of a document map an outline map generated from the document and there are CSS properties to control how that outline map is generated and for HTML of course it works very nicely because the h1 h2 h3 heading elements just mapped to a a nested bookmark level so if you run prints on a HTML document it will automatically generate an outline for the document that maps to the hierarchical structure of your document as expressed with these elements but you can control that and you can override the bookmark label so if you want to you for handy navigation in long PDF documents you can create your own bookmark labels and nesting and things like that so more an issue when you're sending out documents that might not be printed but there are some features that are PDF specific rather than print specific like improving the quality of the generated PDF files performing font subsetting to reduce the size of the generated PDF files while still including the fonts that you've used so that you get accurate printouts when you send it to someone else footnotes are a great one notes are another sort of a primeval hypertext mechanism where there's something you want to say but not right here we'll just leave a note and link to the bottom of the page now it's fairly easy to get basic no it's as you see here this is the syntax as taken from generated content for page media the css3 module which includes a lot of these features now I think we've got yes okay so this is the bottom of the magic document where we do talk about footnotes and we use some footnotes and they show up in the footnotes area at the bottom of the page which like the margin boxes can be styled independently if you feel like doing that putting a border at the top or whatever you like there's a fair bit of flexibility for footnotes as well as there's a lot of different house styles for footnotes what kind of counters do you use do you sort of reset the counter to one on every page or maybe you don't use numbers maybe use the asterisks they go double bagger sort of sequence of symbols and that can be supported as well with generated content you can actually the like one two three and then symbols as well so you're having footnotes in the in the text and footnotes in the commentary as well yeah interesting and notes right right yeah well that's definitely achievable the endnote footnote combination the mix footnotes I don't know I'd need to look at that and think about the markup probably I've seen some horrendous horrendous ly complex with no examples that I don't want to try to replicate but it provides for three kinds of notes it's its footnotes side notes where you want to put the dilma in the margin and endnotes and I think with those three we can cover the more than 80 I think we can get up to 97 percent roughly right yeah yeah you can actually we support column foot yeah yeah we do support column footnotes actually because it was yeah fits in with the latex style as well and for terry pratchett readers we support footnotes within footnotes I don't know if there's any terry pratchet readers here but he has a habit of footnoting his footnotes and we wanted to support that usage now there's a couple of other things there actually was just snuck in an equation just because we can it's not print specific but I'll leave it there and there's another example of cross references where you have a link headers and footers are discussed on page two and cross references are used to generate the table of contents page one and again you don't know the page numbers in advance that's the whole point of automatic typesetting you don't know the page size you don't know the page numbers and so prints will fill in all the cross references there there should be more space there yeah it's a simple it is controllable you can you can actually there are pseudo elements to select the footnote call and style it the way you want to select the footnote marker and style it the way you want the font no text and the footnote area so there's actually quite a few controls you can get in and you can set up the style the way you like it and then once you've got it there the mark-up for doing footnotes is usually really easy it's usually just like span class footnote or something like that and you just put it wherever you want a footnote so yeah you set it up the way you like and stick it somewhere footnotes not CSS hmm that's that that could be a little bit tricky at the moment we're getting our welcome details yeah I mean this is the the 80/20 thing or the 97 three division that we're talking about yeah it is possible to invent arbitrary conventions like you know yeah well actually actually I think under G CPM there is a way to do that where because you've got the links to external content so you could have multiple links to the same piece of content and then we could aggregate that into yeah so actually I'm gonna say that's possible even if it's not possible today but it it's certainly possible so crop marks really easy been there since 1998 in CSS to where the first people to implement it in in a CSS user agent to my knowledge and of course we've tested it and it works which is great actually we've got some additional functionality with crop marks requested for some of our hire and printing customers of adjusting the bleed area and things like that but that might be over the top for most users but you can do it if you want you so that's the magic document and there's a few other things we haven't touched on the image resolution you can adjust the DPI of images we do we do pasta too we were perhaps the third user-agent to do so depending on whether you count conquer and Safari as different user agents of the various things we're in the top three anyway we did pasta to that there is not literally the asset to I think because the asset to has rather French are and how you can embed it but that's our output from the acid2 and we're rather proud of that and we do our best to make sure we don't break it it's very important we like it yes so is it's you know the acid to well yes we know who to blame for to he's sitting at the back but yeah so the asset to is a rather fiddly example of HTML and CSS but it's really just part of our commitment to supporting the standards to the fullest extent I mean you know they're they're their standard and we want to support them yeah so yeah that was just mentioning image resolution people often have a high resolution 300 dpi images for print that they won't use on the web because they're too big and the image resolution property is a little bit handy for adjusting those kind of things and hyphenation which you can almost make out here and there we support hyphenation using the hyphenation dictionaries from OpenOffice and you just enable it you say hey I want to automate hyphenation for this we use this hyphenation dictionary by default we just link to the English one at the moment and it will enable hyphenation and we're rather happy about that as well because that's fairly a new thing for a web user agent to do hyphenation but of course it's another one of these printing features which has a very long a long history and printing and typesetting world so it's something that needs to be there and we've got the eye candy of round borders for anyone working on web 2.0 translucent mirrored around borders on their website we can do it fancy German hyphenation we'll get to that yeah there are some language specific hyphenation issues and you know you have to chop characters or add characters yeah so that's that's more in the more in the details in the algorithms really I mean the CSS it gives you the control you know the switch hyphenation yes yeah and after that it's up to the implement the algorithms the language support to do the best job it's possible for things it's doing so we've got some examples of how prints is actually used in some more dynamic applications as these are all static PDFs that were though we've shown so far but a lot of our customers are generating PDFs dynamically when you press a button in web applications I mean that's the most common use of prints really on the server-side integrated with web applications so Hawkins going to show some of those any further issues maybe we can leave the other things after yes yes yes we do we handle the Unicode in the sense that we we read it and we look for glyphs in the fonts in practice that means we do Chinese Japanese Koreans really Greek Arabic and buy dye is something we're working on and the Indian scripts are something we're working on because they require extra special case work but definitely we want to support the world's languages that's yeah that would be fantastic which well we use the users fonts I mean we scan for fonts we say which fonts are on your system and you can use those and we don't just look for the fonts on the system we now have the web to provide us with fun I'm going to talk about how we can link you to web fonts in a minute that's quite exciting so I think there was one more question no you can do that but because we see PDF is something that you print or you email to people you archive yeah we see the web is the source format there are tools for doing that that's not us web capture does it do a good job right well right I mean that's the thing there there are other tools that do HTML to PDF but you know we haven't really found anything that is as focused on supporting the food you know it's appalling the print and typesetting worlds and supporting it from the web and with CSS and web standards most of the tools like web capture I think they're really just almost like taking screenshots of web pages and sticking them in in not literally taking screens not lead surely taking screenshots okay but I mean the pagination is not always ideal they don't support all the printing features so we haven't really been paying that much attention as most of the people that require printing from the web haven't been able to use them very effectively and come to use prints instead we found okay I have some demos to run push you out here okay so these these demos are available you can run them off the prints XML comm site these show us how you can use prints running on the server side and combine it with web applications this is a fictional order form to buy fruit and if you click on the the Apple here you will add one more to the cart and you can see the the prices being being computed dynamically as this happens and we can do the same for the other the other fruits naturally and we can type in the the name of the person the address etc and we can generate an invoice based on this information that has been generated in the web application so what happens when I press generate invoice is that the data is sent to the server side there's a instance of prints running in a server somewhere and we get back a PDF document that we can we open in in in Acrobat or whatever and and and here we see the the page which is something we think users will want to have for printing purposes for archival purposes etc so basically here we've frozen one order of fruit into this PDF document and that we've chosen to use the same kind of visual image here like the apples and pears etc but this could of course be very different depending on what style sheet you are combining with the with the data on the server side you can basically create anything you want from it another example is the menu generator when we go and eat dinner at restaurants we're always looking at of course the typography of the menu that's the most important part and there's terrible terrible I tell you terrible menus out there and we want to improve that so we created this interactive menu generator where the restaurant could go in and and type in the price of the dishes of the day and and perhaps change the spelling of something if it doesn't work many is what we say in my native Norwegian so I'm editing this and I'm can make you know a few simple choices here to like choose between us letter and a4 and I can ask for a formal font instead of an informal font and I press to generate and it comes back again with a server generated menu which uses here of a formal formal style you can see and you can see it's my it's a Norwegian spelling and I changed the price to be to be six so here you know a restaurant could go in every morning and change the text and do the things and have their favorite fonts or if they one day I want to be a little more more hip and use and informal font they can do that let's change it back so we get the spelling right for where we are and we get another document back and here we have sort of a an informal font use and it this is very easy to do the user here I think it's important the user doesn't have to make many choices we can do some intelligent things for the user on the server side and we can limit the the users have to do when these are Hugh's word you know they're presented to a gazillion number of options and I don't think users want that they want to do some you know choose a template in the beginning and thereafter it should be done fairly automatically of course if there are specific requests we need to handle that as well so we could have added easily a way to select one specific font in this in this interaction for example web fonts is what I'm going to be talking about next I think I think fonts really are core to typography on the web and we've had roughly 10 fonts on the web since 1995 when Microsoft started this project to develop what they call the core fonts for the web it was a great program actually they said you know we have typographers in-house we're going to make these fonts available so that the web will improve in aesthetical value and it will improve an interoperability because these fonts were made available for others to run on other platforms as well so Mac and Linux machine also have these these 10 fonts available and and they're high quality they're good they work in small sizes and I think more than 99% of the texts we read on our computers we use these fonts they're good but they're also quite kind of a little boring after 10 years at least designers think so so we'd like to add more fonts to the web we'd like to have a way to link to fonts because there's there's millions of fonts out there I just did a search on this site called font freak compare it to you know these are the fonts available on the user side these are the 10 10 fonts we're using today and these are the fonts available on font freak there are two thousand four hundred families available that can be linked to that it's an untapped resource that hasn't been looked at seriously from a web perspective and the only thing missing is a hyperlink and we know how to do this we can we can this was actually described in CSS 2 from 1998 where where you basically you import a style sheet that has the ties between the family and the URL and from there you can just use the font families that this person I'm using ray Larabee he's he's a great font designer I'm using his his fonts here and here are some sample I'm not sure you would use his giant Tigers for all your works your your PhD dissertation might not come through if you choose this one but there's there's so many to to choose from these are some of his fonts starting with G and some of them are very beautiful as well and we think this is this is going to really change the face of the web so prince has implemented this and and you saw this perhaps in the invitation here this invitation is written in the in the ransom note school of typography where you choose many different fonts but it shows the richness that's out there all these bumps here are made by another great designer staff man dieter staff manager Minh and and they can be used freely off the web that's very important these are freely available you can he has made them available for anyone to use for any purpose on the web so we have replay with his permission we have republish these fonts off the prints XML site naturally there are fonts that you cannot do that with if you buy a font from Adobe or somebody else your commercial vendor you can't just publish them on the web just like you can't if you buy stock photography from a site you can't republish it so you need to look at the license but even with that there are so so many free fonts that the designers just are happy to see you use yeah yes that's a good thing this this was shown here now the invitation was done in prints but we can also show this in browsers and browsers from browsers that's become very important and I think what browsers will do is to treat them as a cached resource and I'm going to show a browser that actually has supported has added support for this it's not it's not opera I'm afraid this is this is Safari the nightly builds of Safari I'm gonna try to reload this document so that you see that it's it's being there I did a reload so it went out and fetched the fonts of the prints XML site and and here I can now select the text this is real text now searchable clickable indexable text is a way to do specify checksum or some kind of security feature so that I know the font I'm downloading hasn't changed me time you know last time I downloaded it looks good at this time quite a few extra bits that will you know right we we had we haven't done that but I don't think it's that big of a problem because these fonts aren't downloaded and installed on your system they're only treated as a temporary resource so they've treated just like images right so when the the browser acquits you typically clean up the cache and the next time you start you will have to really load them but they're not that big really it shouldn't be that much of a concern to be a typical size of a font file is between hundred fifty and hundred K so it's about the size of a photograph that will be up to the application that's beyond the scope of the specification whether it whether it safari will do that or not I don't know but here here you see this here you see one the same document exactly the same document being showed in in Safari a straight from HTML and here a PDF that has been generated by by by prints so far it's only safari we are working on at the inside opera as well so much I can say and we're obviously talking to everyone about it we're trying to promote this we think it's it's time ten years says open well it the the fonts I've been using here are all true type fonts true type is more widely supported on all platforms for example on my ability machine I can use all the to type files for some reasons not all the open type files work well I think that might change with time so that we can get some of the wonderful ligatures and swash there are things that we can find in open time we'll still get access to those because with a lot of the TTFN the open type with true type outlines so we say true type can still have the open type tables there yeah yeah and we are working on supporting last night yeah right I think internationalization is another key I mean we're talking mostly about this from a design perspective but I think internalization is is very important here where you can come with a you know a small language that doesn't have the support of Microsoft Windows and you can basically add dynamically new fonts to the web as long as you have a point in Unicode you can add support for new languages there before you use an OpenType font and so if you need me with a script that Microsoft didn't support if you're using a uni scribe well I mean you have to duplicate what OpenType fonts for that script will expect that result to have done yeah good this is the last slide we have there's been a healthy round of questions along the way will be available as well for lunch and afterwards we're here the whole day so if you have more questions David is our contact point here you might want to talk to him are there more questions yeah but what if you but you know typesetter and well actually I see that I'd see that within the 80/20 point I mean you say Micro justification maybe optical character bounds and things I mean that I see that as being part of the implementation and CSS doesn't really need to do much for that and we don't need a new new property to control micro justification because the whole point is that the typesetting system should do it now obviously that takes work on our part we have to sit down and we have to implement high quality typesetting which we want to do and I think we are heading in that direction but I actually see that within the 80/20 point what I see outside the 80/20 point is if you want to do something totally random like say you're doing a visual poem in which the text flows and moves and I mean that you're not following any of the conventions traditional typesetting well then you'll you're almost getting closer to making an image or perhaps a vector graphic and I think we can support that through SVG yeah we do have support for SVG and in prints as well I don't know if we have any examples of it yeah yeah so for if you want to do boss profit on typography you know that we're happy to leave that to SVG there's several here sorry livid first here okay I just sort of have a question I mean like going back to when HTML first came out and it was sort of like the the tool for web authoring you didn't have CSS yet we've got font tags for changing our course support for presentational attributes and elements and then CSS comes around and they say okay great now we've got something we can describe our style with let's just limit our HTML to content and then someone said okay great forget HTML let's look at XML and CSS and you haven't touched on that yet and I just wonder where that sits because it's like okay if you've got your style separately now do you really need HTML XML is good for specifying content okay well HTML was in the topic of this talk so we haven't touched on the X word actually prints supports XML I mean as far as it is possible it's a products now entities TT DS X include all the XML goodness that you might be interested is there now of course there's HTML syntax and there's HTML elements the XHTML the HTML data model and so you can actually use it either way you can use HTML a HTML document and most of these documents that we've shown out our HTML is in HTML syntax you can also use XHTML and you can mix it with other with other XML vocabularies like math ml and SVG or your own invented vocabulary like writing legal contracts sometimes people invent their own tags for representing legal contracts in as part of a legal contract processing system and they style it in exactly the same way that you might start HTML and we fully support that now though the long term of HTML I mean I don't think the web is going to disappear that HTML web that we have in the moment it's it's going to be around for the long haul I think but sometimes for internal use when you do have XML content and you want to turn it to PDF we fully support that we actually have within our URL prints XML com if you give away I guess whereas you know most of the content we prove we process this as HTML I think really the future of the web is in HTML and I don't know if you won't identify yourself yeah you're right Ian Hickson is actually editing the html5 specification which will show the path for the future yeah yeah we see ourselves supporting what people ask for basically everyone uses PDF I mean of course we looked in Mars and so oh yes wouldn't have been nice if PDF was this claim from the beginning sadly it's not so we're stuck with it really yeah you know a good internal format so you're saying when you scan a document and you OCR it what should the output be from the OCR processor well I'm not we're not experts going that direction I have this fascination with the deja vu format which is used by the Internet Archive they scan that the book and they have a low res image of the background of the text and then they have a high res just do monochrome image that they put on top and then they also do the the the text as XML so they have a three layer representation of it which is really cool I think but I've basically just been reading this on slash talk so I shouldn't claim to be an authority here but it might be and maybe when we could generate these PDF documents we should prepare for people OCR in them in the yeah yeah so another thing I've seen recently on the web that I think could throw a curveball at you guys is a lot of people now are starting to use JavaScript to do like typesetting sort of things especially for once you get into people who have monitors that are you know 600 by 800 then you got other people that are like 2,000 pixels yeah and so there's you know using javascript to generate tables that have different numbers of columns for example that's unfortunate in a way they're reinventing media queries CSS media queries where you can query the device and say you know apply these style rules if we were on a widescreen and these star rules are on a mobile phone screen but it sounds like they're they're querying that with JavaScript so in a way they're doing it imperative Lee I've seen there are also supporting the CSS syntax so that they are actually reading CSS oh right true and and implement multi columns even if the browser doesn't natively support multi columns but they're basing it on the CSS syntax so the day the browser natively supports multi columns and that should work transparently I think there's gonna be some you know transition period we don't we don't have JavaScript they actually the reason we've been considering looking at a subset of JavaScript B's document dot write our old friend yeah for for documents where the content is actually not necessarily dynamically generated but you do need to go through a layer of JavaScript interpretation to get the whole document and potentially we could run that as we pass the document much like a browser obviously interactive dynamic JavaScript is not the first priority for people doing printing which is why we haven't done it yet but to support every web page out there we would need to do it yeah well partly they're compensating for browser development I guess but yeah this is what the log will look like it's only visible on screen in in the Acrobat Reader for example so when you when we print this document it's not going to be shown on the printed page there is the printed output that doesn't have it if you if you want it for interactive use and you don't want that little logo thingy then it's like $400 is it for yeah and then we have another price if you want to be int you know build it into your server to generate lots of PDFs on the server side then there's a higher price but we want to make it possible for people to play with this without really paying that's why we have it you can use this for for you know your personal documentation even commercially as long as you're happy with that little logo up in the corner following the PDF you can use it for anything you want as long as you use it interactively yeah yes okay well we've been looking at that recently right-to-left obviously we need to support by day we need to identify the directionality of Unicode characters and we need to do the layout and the nest the issues of nesting right-to-left and left-to-right text into one paragraph so that's primarily just a layout question in the layout engine I mean for Arabic specifically not just by day in general we also need to do the Arabic shaping the first middle and last glyphs look different and we need to support the glitches and OpenType all the rules in in the open type files so there's that for Arabic and for Indyk yeah I mean I haven't actually put as much effort into studying that one yet we were planning to implement Arabic first so in sort of after those the index scripts but we're not planning to do it differently to the way it's supposed to be done I mean I'm what's the scope of the question okay right yeah yeah well we tend to do this in a fairly agile way working with our customers who have particular needs so again most of our customers are in the u.s. but most of them often have to support their customers overseas in China Japan wherever and so we work with them to support what they need so you know we know it's not gonna be out to the point of printing the Quran or for example I mean you know which has very specific requirements but I think we're gonna address it on ona as needed basis really starting with Arabic yeah I think the hour is up then people are hurry so thank you for all for coming we enjoyed your questions okay