[MUSIC]

Thank you.

Thank you everyone.

It's good to be here.

You look remarkably alert this morning.

Sometimes it's hard to give the first talk of the day but

thanks to the generous supply of caffeine out there.

I think we'll be fine for the next 40 minutes.

I'm gonna show you some pictures.

I'm gonna tell you my story.

I'm gonna tell you a little about the origins of CSS.

I think sometimes it's important to understand why things were invented.

So when you work those long hours at night hacking CSS code perhaps or

to wondering why is it like this and not like that and things.

Maybe some of this will help you and maybe not.

But my focus isn't really backwards looking.

I'm also going to be looking to the future, see what are the stuff we miss.

What's the stuff we're gonna do?

I mean after all the web isn't that old, right?

So talking about the history of this stuff,

it's barely out of its teenage years.

So, we can look a bit back, but we should also look forward, I think we have

the longer history, the longer timeline in front of us than looking backward.

So my last question to you will be, how long is this web thing going to last?

That's my last slide.

In between there, I am going to be breaking the law.

So you have been warned.

I will be breaking the law onstage today.

My story starts here.

This is from CERN.

It's a physics laboratory in Switzerland, on the border of Switzerland and

France, actually, and it's dug underneath the ground,

where you find this remarkable machine.

It's the world's biggest machine, actually.

And what we're looking at here is one of the detectors for

seeing when these small particles, it's part of a particle accelerator.

When these collided at high speed they sometimes emit these things and

I can't really explain it to you because I'm not a physicist.

That's not why I was at Cern.

But I can still be amazed by the scale of this and

you can see the guy standing in front here.

And this is underneath the ground in an otherwise very picturesque area of Europe.

You see the cows grazing in the fields there.

Not knowing what lies underneath them.

And in the background you have the Dura mountains.

And if I'd turned the camera I would have seen the Alps.

It's very beautiful there.

If you go inside the CERN offices,

this is the corridor where the web was invented actually.

It's not quite as picturesque.

This was built in the 50's after the war and

building aesthetics wasn't very high on the list.

But it's a very organized community.

And I think this also shows, you know, what are the worlds you're dealing with?

The real world has beautiful pictures.

The worlds we're creating are somewhat more structured,

somewhat more organized, and can we make this thing work together?

And the guy who sat down to try to solve that problem is of course

I came to work with him in 1994.

We shared office for some time then.

An amazing time, the web was still young.

We could do things.

Here's a picture from the from just outside that corridor where

again I don't know much about physics.

I don't know what goes through those pipes there but I do know that the computer

we installed in the corner there was the first public web terminal.

It was a sub work station, we put it up there for everyone to use, so

that the students, those that didn't have their own computers to install Mosaic or

some other browser on, that they could still sample this web thing.

And here's our marketing campaign.

World Wide Web,you click and we do the rest and I think we can conclude

here that it wasn't really the maketing that made the web succeed.

We could have done better but in the end it probably didn't matter.

What was important was that we had a sound technical foundation.

And this was made available to everyone for free.

And that's one of the great things about Tim and

CERN that they were actually making open standards out of what they did.

Think about this.

When you work those long hours and you stare at browsers that don't work,

it could have been a whole lot worse.

This thing could have been owned by one company.

It could have been France Telecom that had the minitel, it could have been Microsoft.

It could've been one private owner of this thing instead we have,

a web which is slightly disorganized,you know,

there's a lot rubbish out there, but there's also a wonderful place that

reflects humanity, as it should be and it's free for everyone to use.

Of course, those who started making websites early on,

they basically borrowed tags, borrowed documents from others.

And one of the first thing they got to see,

when they looked at the source code was this, things like this.

A small HTML element there, starting with a headline, H1.

Then comes the headline itself, and then comes the end tag,

which is almost the same as the start tag, except it has the slash.

I can explain that to you in 30 seconds, and

that's all it takes, basically, to get the grips, get the starting point of HTML.

It's very, very simple.

It has semantics, though.

It doesn't say anything about the presentation.

It says something about the semantics of the element.

That the headline is a headline.

It says something about the role of that.

And that means we can present that HTML element on a screen or

in a speech synthesizer.

In many different ways.

It's not tied to a PC screen or a phone screen.

It's universal.

And as I mentioned the fact that it's an open standard is also very,

very, very important.

So using those first HTML tags, we could write web pages like this one.

This is a screenshot from an early browser.

Mosaic I think I already mentioned, anyone use Mosaic in the room?

Yeah there are some, not many.

Thank you. [LAUGH] Those were the days.

It was released in January 1993.

And it sort of, this was the first time we were able to actually demonstrate what

the web could do.

Because this you could install on people's PCs and

web stations and they would get up in running in a couple of minutes.

And people started putting out documents on those early web servers.

Here is one example, using a semi random screen shot.

It was incredible, you had this document, then you had these things and

underlines and then you could click and you would get somewhere else, maybe up to

another computer in another country, in America even.

Suddenly you were there.

It was just fantastic so there was sort of a euphoria amongst the you know,

in the scientific community in the early internet days there.

Of course that attracted other people and it attracted designers and when

the designers came in they said okay, this is pretty cool, but the font is terrible.

And the color, the gray background, can't have a gray background!

I want a white background.

And I want 20 point Helvetica red,

and they couldn't get that, because HTML only gave them semantics.

It only gave them the rules of the element, and not the presentation.

Aesthetics of course is truly, truly important.

Our minds,

our visual system, is much more geared towards looking at beautiful landscapes,

like this one, than it is to looking at very structured, scientific data.

And I think if the web were to succeed

in the bigger world I thought we need something else.

We needed sort of a bridge between those two worlds.

So then came CSS along.

This was the beginning.

We wanted people to use HTML.

But we also wanted to allow them to say something about font size and colors and

typography and layout and margins on the side and shadows and such.

Because otherwise they wouldn't use HTML.

I think if you hadn't been able to develop CSS and give designers that tool chest,

that tool box they craved for, they would have maybe gone to somewhere else.

Maybe HTML would have turned into a page description language,

more like PostScript or PDF.

Or maybe it would turned into a fax machine.

I mean, people started making pictures out of their documents, because if you take

a picture, then of course you can control every pixel in there.

So you could get the fonts you need, the colors you needed.

So people started making those one image pages.

You see some of them around still.

Not so much, thank goodness.

But, you saw sort of, yeah,

we're gonna turn this thing into a picture swapping device, a giant fax machine.

We could have ended up with the web being a.

You still remember fax machines, do you?

Yeah, yeah?

I'm not going to ask if you used them.

But yes, you know what I mean.

So instead we wanted no, we want to keep HTML around and

to do so we need to give people the design choices they need.

So the primary reason for

doing CSS wasn't really to do cool presentation it was to save HTML.

We wanted to,

to make sure that we had a text-based semantic-based language underneath there.

Not that the presentation isn't interesting I think it's very interesting

and you know, looking at the way CSS has developed, I'm fairly happy.

There is a few things that should have been done differently.

We're gonna go through some of them.

So just to wrap up on the code side here.

CSS and HTML, they're sort of like brothers or cousins,

where they live next to each other.

You have the HTML element on top there, and

you have a little bit of CSS code underneath.

And the selector, the h1, the common h1 there ties them together so

that we make sure that the headline comes out 14 pixel red.

Can you read that code?

Is everyone here familiar with that kind of code?

Yeah, I see nods.

Yeah.

And if you're not, you can learn it in 30 seconds.

As I said, it's easy stuff.

So, let's go through some of the properties.

Okay, so, we start out with some text.

And then, we set the font size.

And you can see the code up here.

And this is of course, very basic.

We can set the font style to italic.

We can set font family, we can set the color of the background.

And we can even set the border around it.

I mean, this looks very simple now and of course it is.

But, in 1996, this was pretty hot.

Setting backgrounds and borders, wow.

Colors and borders, incredible stuff.

We added these things, and we had discussions.

What to add, and what to not add.

This was one of the more ambitious properties that got in early,

but it wasn't really used, because it wasn't implemented in browsers.

IE4 did not have it, so people could not use it.

And therefore, it was left unused.

It is ambitious in the sense that it tries to

do something that people used Photoshop for.

So, getting these shadow effects is easy in Photoshop,

but that requires you to make an image of text, which we don't want.

That's the starting point.

We don't want to make images out of text.

That's bad for many reasons.

It's for compression, it's bigger, you can't index it.

We couldn't have had a Google if it was all images.

And you can't read out loud in a speech synthesizer.

So, we wanted people to to do shadow effects without

doing Photoshop, or other image manipulation programs.

So, we added this small property, text-shadows, and it's quite easy.

You set a offset, x and y offset, and

you say what the color should be, of the shadow.

And then you could add a little more.

You add a third parameter.

And you give it a slightly more risky color there.

But then you get these Gaussian blurs.

So, it's not obvious.

The syntax here isn't obvious.

You actually had to consult the spec or

read it from somebody else who wrote up on this.

What is the third Number here?

And what is this RGB code, this hash?

That's not something you can just understand for yourself.

On the other hand, it's not that hard either.

Once you've written one of these, you pretty much get it.

And you can continue to make more of a advanced text-shadow effect.

Here's one where we actually set the color of the element itself to be white,

to be the same as the background.

And we just give the shadow a color.

So you get this spray paint effect.

Again, the motivation is, don't make images out of text.

Then CSS3 comes along,

and this is one of the things we added in CSS3, border-radius.

It was actually proposed earlier on.

I was very much against adding border-radius.

I thought, you could only do so much in one spec.

You can only advance the world that much.

So I thought, border-radius we shouldn't put in because nobody really wanted to do

border-radius anymore, do they?

I mean this was really a 70s design thing and

we have gone beyond that point now, haven't we?

Yeah, do we really wanna do that kind of stuff?

Well, it turns out a lot of people want to do border-radius stuff.

So, border-radius got in and now I am pretty happy about it.

First, its very easy to use.

Again, its starting point is very simple.

You can understand it immediately.

Here you set the border-radius of all four corners to 40 pixels and

then you can add some more effects by adding.

>> It's not an obvious syntax maybe, but

if you're told that here's the horizontal radius and here's the vertical radius,

then you can make these things and here by adding a slash.

Again, not obvious, but still easy.

You can set different bordering radiuses in different corners of the element.

And this is just visual fluff.

It's not important.

Google won't do anything differently with

your document whether it has this border-radius or this one.

But for the human eye, this is very important.

It changes the perception totally.

And designers want these kind of things.

They set these kind of things to get that kind of effect they want,

to get that kind of visual language they want.

They need tools like this.

Then we have CSS3 transitions.

Which was a way of doing things in CSS that

was probably beyond what we were thinking from the beginning.

But it sort of naturally fit in, and

it allows you to do things in three lines that you would otherwise have to write

JavaScript 100 lines, maybe, or write a library of JavaScript to import.

You can do animations in JavaScript.

And we saw a lot of people wanting to do animations and struggling with JavaScript.

I mean, programming is hard.

Programming can only be done by a few select people, really.

So we thought, let's put it in CSS and see what we can do.

And here we see an image element pointing to an SVG element.

You get that src= and then you have the two properties set.

One is the transition, 1s, one second.

And the other one is to transform it.

And if I hover over that, and that was me breaking the law.

Did you see that?

No, you didn't catch that?

Okay, so in Norwegian, this is the coat of arms in Norway.

And according to Norwegian law,

the lion must always be placed at the top of the document which it is and straight.

So, having him spin around is not legal actually.

>> [LAUGH] >> So, it's very powerful.

You can write CSS code to break the law.

[LAUGH] I'm very happy with that.

And also, I think it is quite easy to understand the code here.

If you wanted to change this, for example, if you want it to go faster or slower, you

would have immediately understood that you just need to change that one parameter.

You don't have to go into a JavaScript thing.

I am not trying to diss JavaScript.

JavaScript is very important.

It's sort of important in a sense that it's one of the foundations of the web.

But it should only be used when you really, really need to.

We should try to find better ways to do it, easier ways to do it.

And this I think is an easier way to do it.

You would immediately understand how to make it longer or shorter, or

how to rotate it in a different direction.

If you wanted it to spin the other way, I'm sure all of you would have known that

you, let's try changing that minus into a plus.

Then things would have gone the other way.

So, it's pretty easy stuff.

You can do a lot of stuff with it.

And we are constantly looking for more stuff to put in.

I must say, though, that the stuff we are putting in,

the stuff that gets into the specifications, it goes slower now

than it did in the 90s because it's a more complex world.

We need to make sure everything works together.

We need to test everything and

we also need to make sure that it runs on the mobile phone at 60 frames per second.

And if you add complex stuff then that takes more time, typically.

So, things are a bit slower today.

Anyway, one of the things that did get in was web fonts.

For awhile in the 90s we sorta were stuck with these fonts.

Ten or so fonts that Microsoft generously donated to, to the web.

They donated it in the sense that you could use these on Windows, but

also on the Mac and on Linux.

So their license was very liberal.

And that was helpful, because in order for CSS to work, you need fonts.

You need to be able to have some font material to set those font style and

font family properties on.

And these are well-designed.

They cover a fair range of the Unicode spectrum,

and people have used them to great effect.

Still, it's only ten or so of them.

And after a while, they became kind of boring and we needed more.

So we had in CSS2, the spec from 1998, we had the mechanism for

linking two font files on the web.

Just like you link to an image, you can link to a font file.

The problem was that we didn't have an agreement on the font format.

There was some reluctance to linking straight to Truetype files because people

were thinking, oh, the font industry will die if we do that.

There's gonna be piracy.

There's gonna be all sorts of things.

So, some browsers want you to do Truetype, some didn't.

And then we found the compromise where we said

we're gonna have this font specific format which is better for compression.

And that it's not encrypted, there's no DRM or anything,

but it needs a conversion.

You need to convert it from Truetype to this other format.

So they said okay that's probably good enough, let's try that.

And I think what we've seen is that we've had a resurgence of fonts.

The font industry has had, we've had lots of small companies coming up,

doing interesting designs.

Doing bespoke fonts.

And also putting them out for free for anyone to use.

This is, I'm gonna showcase some of the Fonts made by Dieter Steffman,

a German designer.

Using this is very easy.

Basically you import a style sheet that lists all of his fonts.

That's one line.

And then you can start using these in your code.

Like just set font-family Angel.

And this is actually letters.

It's not a picture.

This is just loading his font in the browser.

I'm using the Opera browser here to give my talk.

Becker Inline.

Broadcast Titling.

I mean, some of these fonts, they're more showcase, right?

I would not write my CD using this font only.

That's probably not gonna get you anywhere.

But for a birthday invitation, maybe.

Or for that marketing campaign you want to set yourself a little bit

apart from the Times Roman world.

And using Broadcast Titling or Cardiff makes some sense.

So there's definitely a design element to using those fonts.

There is another angle too, though.

Which is even more important I think.

At least for some people.

A few billions of people that don't live in

places that are well served by, western phones.

Here's a message though sent out to the Wikipedia mailing list in 2011.

When they turned on web fonts for 11 Indic languages.

So India is complex, language wise, and

it's hard to find fonts that cover all of the languages.

But using web fonts you can actually make these letters, the missing letters, or

the missing alphabets.

You can encode them yourself.

You don't have to lobby Microsoft or

the Lynx people to include this in your distribution, you can just do it yourself.

It's sort of democratizing the whole font distribution mechanism.

So using those fonts in this Indic language, you can now read Wikipedia

with good looking fonts in your local language which I think is very important.

I mean Wikipedia is one of those fantastic projects, right?

I were to name one project that's come out of the Internet web thing that is

truly worth discussing, it's Wikipedia.

The fact that we can all have a dictionary,

an encyclopedia in our pockets.

It's just incredible.

There's been a lot of work on testing as well.

We've had some trouble making sure that the browsers show things the same way.

But we had a very active community forum on that, because one thing was

the specification, which was done inside the World Wide Web consortium.

But then we needed sort of a grassroots organizations too,

to lobby for browser makers to actually follow the rules.

And Microsoft I must say were particularly challenging.

Because they got to a stage where they had monopoly power on the web.

They had more than 90% of the users use Internet Explorer.

And at that point they basically lost interest

in doing anything standards related.

They effectively closed down the Internet the IE team.

So the early 2000s were very hard.

When they said, I think this was in 2005,

they said they would do another version of Internet Explorer, IE7.

Then some of us sat down and said, okay, they're gonna make a new version of IE.

We need to make sure that that version corrects some of the mistakes,

and improves support for standards.

Otherwise we've lost.

So we made a page called the Acid 2,

which it was inspired by another, an early test,

called the Acid test, that had done some things but basically had limited coverage.

Acid you had much bigger coverage and

when rendered correctly in the browser it would look like this.

So you can immediately see that this looks correct.

He's smiling.

He's cheerful.

And every little pixel here every black or yellow bit has a test underneath it.

So it's quite complex the underlying code.

But anyone can see whether this is right or wrong.

And when we launched this it showcased bugs in all browsers.

But especially it was bad in Internet Explorer.

>> [LAUGH].

>> This is what it looked like.

And you can kind of make out that it is a face there you know?

You have, you have two eyes, but

it's kinda bloody and there's something dripping underneath here.

Not sure what that is really.

And then IE7 came along and oh, have they improved it?

They had done something, it's harder to make out that it's a face actually

although there are two dots at the top there, and the drooling is even worse.

So, we thought oh darn, they're not listening.

But then the fantastic thing was that the community rised up and

on every conference like this one if there was a Microsoft representative there,

he would be asked, so when are you gonna do the acid test?

That will really help my life as a designer if you could fix those problems,

fix the bugs.

So, I think at some point somebody inside must have said,

all right, we just have to do this.

There's no way around this.

They're gonna keep bothering us, so let's make my life easier.

So when I8 came around, this is what it looked like.

Truly magic.

They fixed all the problems, well not all of them, there's still problems on

the web but they fixed all the problems that they asked it to try to show.

So I think that shows the power of one web page can change

the course of the web if it has an active community around it.

So I'm very happy that we have conferences like this where designers can meet

discuss problems and even maybe start lobbying campaigns.

Personally I went to Opera to work there.

We had Netscape and Internet fight against each other.

Opera was the sort of the lone little browser from the Nordic areas.

We made browsers that made browsers and we still do.

We make browsers that make their way into many types of devices.

A lot of phones, a lot of TV sets, and a lot of desktop computers.

We have had especially success with our Opera Mini service,

which is a way of compressing it's a service more than a program really.

It compresses the web pages in the fixed network.

And then hands it over to the handsets.

That may be over a slow line it may be in a congested area.

It may be there are many reasons why I think compression still

will be around with us for a long time.

So, today we do web compression and also video compression.

When we started this,

we had some interesting articles being written about it.

Especially in Chicago these things started coming up.

Norway's number one.

So, the bus system in Chicago CTA it's called.

They had early on a very advanced tracking of buses,

they had these GPS devices and they sent the position, so

you could see on the map where all the buses in Chicago were.

And it turned out that some journalists got to see the access logs for

these webpages and they found that most of the requests actually came from Norway.

So this article, this journalist wrote, Norwegians are either utterly

fascinated with the goings and comings of CTA buses or there just are not

enough recreational activities in the land of fjords and Viking ships.

>> [LAUGH] >> So they had seen that most of

those who follow the buses were actually coming from Norway.

They thought that they were Norwegian.

Of course as you have already guessed I'm sure, these were not Norwegians at all.

These were people standing in Chicago, probably freezing, waiting for

the bus to come, but they had a phone in their pocket.

They had the upper mini running on that phone.

And when they made the request to say where the bus was,

this was sent through our servers, which were in Oslo at the time.

So from the log sites, it looked like they were coming from Norway, but

they were actually very, very local.

I think that journalist should be a little sharper here actually.

But this was early days you know?

And you weren't used to kinda your

watch communicating with your computer over a satellite link.

Things have changed the geographic world.

All right I'm going to look a little bit more into the future now.

Apps you heard of apps yeah?

All right we have them.

And we like them.

We all use them.

And I think it's a challenge for the web.

I think we need to make sure that we can write apps using web technologies.

And we can kind of but still a lot of people write native code for their apps.

And then you have to sign up with either Apple or Google and

you have to obey by their restrictions and you can't reach all devices.

You basically have this duopoly that rule.

I'd like for there to be a way to do all the things that you can do in an app you

should be able to do through HTML and CSS and JavaScript.

In one thing for example, which I think is very important,

is the paging effects that you can do in In these apps.

Many of them do so, for example, Facebook's Paper application.

This is a bit more like books, flipping the page rather than scrolling.

There was this talk yesterday about how the future of the web is printing.

It was very inspirational to hear.

I think we can learn a lot more from book design.

And I think paging is one of these things, and

we have seen some incredible apps where you can buy books.

And you have this multi-column layout, looks beautiful looks

beautiful on your tablet, and when you switch direction,

it changes from maybe two column to one column layout.

So I think there are things we can do there.

And we've actually in Opera we've done this prototype

where we actually add pages, add paging to the web.

So this is basically a web document.

But instead of having a scroll bar on the side,

we do things by scrolling to the next page or even to the next document.

So we can go from one article to the other by pressing page down or page up.

And of course on a tablet you would do this by swiping.

It's more natural there.

I think this interaction model, so instead of sort of the point and

click that we have on the web, you have that kind of gesture based

page navigation, which I think is a good thing.

And I'm trying to get this thing into CSS.

Like I said, it's a little harder these days, it goes a little slower.

But I do think it's important for us in order to compete with the apps.

And I do think, when Amazon sells more electronic books than paper books,

we should be able to display those electronic books in browsers.

You shouldn't have to have a special app for that.

And so I want to be able to do, like Alice in Wonderland,

I want to read Alice in Wonderland in a web browser.

And I'd like for there to be kind of a paging.

When you sit with a child on your lap,

then flipping the page becomes sort of a feature.

The child will wonder what's on the next page.

I want that to be there.

All right, let's continue.

So one of the spec which is used here is the multi-column layout spec,

which is being worked on, and it's being supported in most browsers by now.

You can see it in use in Wikipedia, where you have the list of

elements there is done using multi-column layout to save space.

I think I'm gonna give you a little demonstration of what we can do with,

do I have enough time for that?

Yeah, I have a few more minutes?

Yeah, let's try that.

I'm gonna show you first a newspaper article.

Take a look at this article, okay.

It's a British headliner here about cats.

The content isn't that important, but look at the layout.

This is stuff that papers had been doing for years and

years and can we do the same things on the web?

Do we want to?

I don't know, but I think we should look into it.

This is, starting page is a normal web page where you have a scroll bar

on the right-hand side.

And in order to get to the bottom you have to use that scroll bar.

So if I go to the next page here, I've given it two columns.

So instead of one column, I have two columns.

But in order to read those columns, I had to scroll up and down.

So it's not ideal.

I can also make the, instead of saying two columns,

I can actually set the columns to be an optimal size, 14 ms.

So that you typically have the number of columns

will change with regards to the content, which is good.

But it still doesn't solve my problem of having to scroll up and down.

In order to solve that problem we had to add a thing, and this is basically

just a flip, a binary switch where you switch from a scroll view to a paged view.

I think that switch is very important,

you can do it kind of with some JavaScript libraries.

But I'd like for

this to be easily accessible in a one-liner, like the code shown up here.

So when I'm here, I can go to the next page, and

the previous page, by way of paging, flipping pages back and forth.

So you don't have to do that scrolling up and down,

instead, you go to the next page.

All right, let's move on.

Let's see what else we can do.

We can also set things to span.

So here the image spans two columns,

and the headline there is also set to span two columns.

And it floats to the top corner,

which is also a very common way of doing things in newspaper.

Here we've added another image, given it a bottom floating position.

That one, and we can add more things, make them span.

So you see where I'm heading with this one?

Yeah, you see this, yeah.

But we have better animals, you see that, yeah, yeah?

>> [LAUGH] >> All right, so

now we can pretty much replicate what the newspaper did.

But we don't really know what the newspaper would have been if

it was on a mobile screen because that newspaper article was on paper only.

So it was a fixed representation.

What would the designer have done?

We don't know, but given in this system where we basically just

attach properties to these elements, we can actually make these things scalable.

I said that we could change the number of columns based on the width.

We can also change the positioning, and you see it's a little bit jerky now.

But it still makes for a decent presentation, at any point in time,

at any width here.

I don't think people will go back and forth like this.

But, we can make this page work on wide screens,

on tablets, and on mobile phones.

And there's no media queries at all in use here.

There's no tricks for adding different stuff.

This is just one style sheet where I basically said float to the bottom,

float to the top.

And then I turn on paging.

So it's a very scalable system.

In ten lines of code, I can describe newspaper layouts as they've been done for

the last hundreds of years.

All right, continuing on the book theme, because I think books are important, and I

think like the speaker said yesterday, we can learn things from the design of book.

I've actually spent some time recently on a classic

English book from 1798, does anyone know this one?

It is not important, but could anyone guess the author of this 1798?

Malthus, yeah, does that ring a bell?

Malthusian, yeah, he was a politician, a philosopher living at the time.

He wrote about how the populations would increase faster than the food supply,

and I'm not so interested in the topic really.

But I'm very interested in the typography from 1798, can we replicate that in CSS?

It's kind of a test to make sure, do they do stuff there that we can do today?

So, I have been studying this scanned version of the document.

It's scanned at archive.org, a fantastic place, and

I have recreated this in CSS, almost down to the millimeter level.

You can see some differences, and I need to

do a little bit of tweaking on font sizes for example, but it's pretty close.

So that's a good start but that was only the first page.

Let's go to some of the text.

And here we see some interesting things, how they wrote English in 1798.

I think I may fairly make two postulata.

All right, you see they're exchanging the S in the Postulata.

Postulate, we still have that word.

They are using the long S, the one that looks like an F,

which makes it kind of hard to read.

But using CSS, we can actually do that too.

We can replace one character with another.

So here is a screenshot from the PDF that I've generated with HTML and CSS.

And I still have the, I think I may fairly make two postulata.

The line breaking is in a different place.

But I think that has to do with manual versus automatic line breaking.

I don't know.

And then there's more stuff.

First, that food is necessary for the existence of man.

Here we see the ligatures.

You see the first, the ST there is a ligature, actually.

So we need to be able to support ligatures in CSS.

We also see that they used actually capital letters where today we would

use small letters.

But that's okay.

It says secondly that the passion between the sexes is necessary and

will remain nearly in its present state.

Yeah I'm not gonna make any comment on that.

I don't know what the passion between the sexes were in 1798.

I know it exists today still, but I'm more interested in the typography like I said.

So what does the code look like?

Here's a little snapshot, a little bit of the style sheet behind that experiment.

And we're turning on font variance.

Open type fonts typically have ligatures in them.

We can turn these on in this property now.

We can also use text replacement generating PDF.

I used a program called Prince to convert the HTML to PDF,

and there I can do text replacements.

I can replace the S with the long S, the one that looks like the F.

But it's not done in all cases, like not at the end of the word.

At the end of the word and the beginning of the words, the curly s remains so

I had to make some exceptions.

So this is kind of a little set of rules that are used

to replicate the typography from 1798.

Now going back even further, we have Gutenberg's bible.

I haven't started working on that yet.

That's the ultimate challenge, because even though it was one of the very first

books to be printed, it was really why Gutenberg invented that machine.

It's still one of the most beautiful books ever made.

And the the line breaking, the hyphenation,

the multicolumn layout, it's very, very advanced.

You will not find, I think, any book that's so

big and has that same level of aesthetics in it.

So I will try to replicate that in CSS one day as well.

We'll see if that succeeds.

But more importantly, I think, when looking at this book.

This is a picture I took this recently in New York at the Morgan Library.

They have three Bibles.

There's only 70 in existence, but they have three of them there and

you can go in and see.

It's fantastic.

It's like the same feeling I get when I see the Rosetta Stone at

the museum here in London.

And you can immediately see that this is a book and we would know how to use it.

And if there hadn't been this glass around it,

I could pick it up and flick the pages.

The book metaphor has survived from Gutenberg's time until today.

The font is a little hard to read, I must admit.

It's Fractule.

And the language is Latin.

So I would struggle with that as well.

But the basic metaphor, the user interface of the book has remained the same.

So this brings me to my last page, my last question to you.

How long will the web last?

Okay, we know it's been going on for 25 years, right?

How long will the HTML codes, those H1 elements that I wrote,

how long into the future will computers be able to read those?

I mean, we know things are gonna change, right?

We're gonna add more CSS stuff, right?

And we're probably gonna add more HTML elements too.

But if we go into a computer store x number of years from now,

will that computer we buy be able to read those HTML tags?

Yeah, you know it's impossible to give an answer to that but

I think that x in the equation is 500 years.

And that's not a random number.

It's a very convenient number for me to say, because in 500 years,

I'm not going to be around, so nobody can tell me I was wrong.

But it's also not random because of the guy I mentioned, Johannes Gutenberg.

The thing he did 500 years ago, we still can read today.

And the metaphors, the user metaphors are still with us.

So I think the concept of web page is going to be with us for a very, very,

very long time.

So we must make sure that the standards we use, and

the documents we write, that they have a certain standard.

They shouldn't just be for disposable use for the minute.

I think we need to make sure that this can actually last for a long time and that we

should try to encode all of mankind's information using those standards.

And this is also why I'm so interested in recreating books out of HTML and

CSS, because I don't think books are gonna be made that much anymore.

Paper is too expensive and there's too much information.

Books should be reserved for

those very special pieces of text that we truly want to save and enjoy.

And there's nothing better.

Sitting down with a beautiful book.

Opening it up.

The paper the feeling you get, at least inside me, is very special.

So I want to make sure that the standards we can use also can be made to

create books into the future.

And the book, just my finishing note, the book was truly important in the history,

especially in Europe.

In the 1460s when Guttenberg did this invention, Europe was in a backward state.

Then the printing press came along, and it suddenly became possible

to distribute information inexpensively to a lot of people.

Then suddenly a lot of things happened.

We had the Renaissance, the Reformation,

none of those things would have happened without books,

without being able to publish information and distribute it inexpensively.

And then the Industrial Revolution, as well.

It wouldn't have happened without the printing press.

And if you look at the web today, the only thing, really,

we can compare the invention of the web with is, I think, the printing press.

But, unlike the printing press, which basically changed Europe,

the web is changing the whole world.

We're seeing it often, that the users, they were in Chicago in my examples.

Today they're more likely to be in Vietnam, or Indonesia, or Ukraine.

We have lots of users in these places, where they have mobile phones,

they have access to the web through very narrow channels.

But they actually can get Wikipedia in their pockets.

So this will be changing the world in the years to come.

And like the book, I think it will be mostly for the better, and

I hope you're with me on that.

Let's make sure we can enjoy this web for a long time.

Thank you.

>> [APPLAUSE]

[MUSIC]