Archive for the ‘HTML5’ Category

No Comments

Google webfonts for everyday use?

Tuesday, October 19th, 2010

Let’s try some webfonts again from the Google Webfont api. Tangerine and Canterell. I like the webfont idea from Google. Read more about it on their blogpost.

This text is Tangerine

This text is Tangerine italic

This text is Tangerine bold

This text is Cantarell

This text is Cantarell italic

This text is Cantarell bold

A tad small compared to the default font. And Opera 10.63 renders all font-styles bold and italic as normal. Weird, for  the inventors of the webfont.

No Comments

The shadow of the invisible: AKA How to create fuzzy fonts with pure CSS

Thursday, October 7th, 2010

No, I wasn’t drunk writing this post, just had a long hot shower.

No, you don’t need new specs, this text is slightly blurred.

Scrubbing my back I was thinking about the new CSS3 stuff, and what you can do about spicing up the layout.

After my hot shower, steam filling my bathroom, I looked at myself in the mirror, razor-blade in hand to deliver a fast and clean shave.

Stop!

No shaving in the mist, no blood in the tub, but EUREKA
Fuzzy fonts with CSS!

How? (more…)

No Comments

Will Microsoft add SVG support to Internet Explorer in the near future?

Sunday, January 10th, 2010

Microsoft has applied to join the World Wide Web Consortium (W3C) Scalable Vector Graphics working group. I would say ten years to late, but they did it. So will all the examples on this site work in Explorer soon. I hope, but I fear not. Let’s explain that to you.

Animated SVG Logo Webonomic

One of the reasons I write critically about Microsoft is that they’re trying to slowdown internet innovation, probably best illustrated by the so called Embrace, extend and extinguish strategy, which had the purpose to extend open standards with proprietary capabilities, and then using those differences to disadvantage its competitors.

As a consequence, and another big reason I don’t like Microsoft, they push the time and costs of developing websites by approximately 40%. Simply because you have to write your JavaScript twice, can’t use modern CSS and lose a lot of time fixing lay-out bugs. That’s the price the world is paying for the Microsoft dominance in the browser market. Other estimations go about 20-30%, the well know Dutch developer PPK on quirksmode “Want a site that works perfectly in IE6? Fine, but it’ll cost you about 20 to 30% extra.”. (Costs of JavaScript libraries are excluded here).

I think Microsoft used that strategy and I think they were successful. Actually Microsoft stopped developing their browser form 2001 till 2007. Second thought: there is only one way that Microsoft will change that strategy, loss of market share. That didn’t really happen, at least not on a big scale, seems that most consumers don’t even know the word browser, Explorer worked out of the box, the blue e on your windows desktop was a synonym for internet, and Opera or Firefox a program for hackers or activists. Most sites used Activex, or other proprietary JavaScript, so a lot of sites didn’t work in Opera, actually they were designed (deliberately) to only work in Internet Explorer.

Now Google (and to a lesser extent Apple) entered the browser-market, things are starting to change. At least the web is gonna change: sites do not longer contain information, they contain applications.

And when you use web-applications, you don’t need them as a stand-alone program. That’s the danger for Microsoft. It’s not new, it has always been there and Microsoft knew. That’s why they made their browser `a critical part of their operating system`, technically nonsense, but they reached their goal. I took the EC a few years to refute that claim, a few years Microsoft made a lot of money.

Why didn’t Microsoft embrace SVG earlier. Well they developed Vector Markup Language (VML) during the nineties. That didn’t became a standard, so I guess they decided to stop doing anything for 5 years. Now Microsoft gained some substantial marketshare with Silverlight, a Flash/SVG comparable technology, which it’s used a lot for streaming Media lately, they probably think let’s join the SVG working group to – these are my wordssee if we can slowdown their activities.

Will we see SVG support in Explorer 9. I bet not!

UPDATE

I was totally wrong. There is SVG support in Explorer 9.

I can take my loss, it makes me happy to see Microsoft embrace webstandards 🙂

No Comments

HTML5 Webfonts woes: redefining standard fonts

Tuesday, September 29th, 2009

What happens if you redefine a standard font with a new html5 webfonts font-face css property?

Second question: is it case-sensitive?

Answer: as you could guess, it depends of the implementation of vendors. Defining standards is one thing, defining  error handling is a bigger and perhaps even more important challenge.

Here we gonna redefine the verdana font with the Pinewoord webfont, and define a Pinewood and a pinewood font based on different fonts:


<style scoped>
@font-face {
font-family: verdana;
src: url(http://dev.webonomic.nl/fonts/Pinewood.ttf);
}

@font-face {
src: url(http://dev.webonomic.nl/fonts/Pinewood.ttf);
font-family: 'pinewood';
}
@font-face {
src: url(http://dev.webonomic.nl/fonts/Pinocchio.ttf);
font-family: 'pinewood';
}

</style>

Paragraph with Verdana font

Nec tristique scelerisque, fringilla, cras eget proin. Fames, justo. Dui nisl ad nisi orci lectus curabitur scelerisque vitae. Metus tortor, scelerisque. Adipiscing tellus orci, magnis. Maecenas nullam. Eleifend. In, at enim habitasse dictum, lacinia, auctor.

Paragraph with Pinewood font

Nec tristique scelerisque, fringilla, cras eget proin. Fames, justo. Dui nisl ad nisi orci lectus curabitur scelerisque vitae. Metus tortor, scelerisque. Adipiscing tellus orci, magnis. Maecenas nullam. Eleifend. In, at enim habitasse dictum, lacinia, auctor.

Paragraph with pinewood font

Nec tristique scelerisque, fringilla, cras eget proin. Fames, justo. Dui nisl ad nisi orci lectus curabitur scelerisque vitae. Metus tortor, scelerisque. Adipiscing tellus orci, magnis. Maecenas nullam. Eleifend. In, at enim habitasse dictum, lacinia, auctor.

Firefox 3.5 and Safari 4.0 will redefine the Verdana font and render the Verdana and Pinewood font the same.

Opera 10 will stick to the standard font Verdana and will ignore the new definition.

All browsers treat the font-face case-insensitive, there are no differences in the rendering of both Pinewood paragraphs.

Chrome doesn’t render any webfonts in this example by default.
It should be started with the commandline switch: –enable-remote-fonts

I would say Opera’s behaviour is wrong:
Specs state:

If the font family name is the same as a font family available in a given user’s environment, it effectively hides the underlying font for documents that use the stylesheet. This permits a web author to freely choose font-family names without worrying about conflicts with font family names present in a given user’s environment.

No Comments

HTML 5 and internal datepicker

Sunday, August 2nd, 2009

As pointed out in an earlier post, HTML5 and the webfont CSS @fontface property will phase out the need for font replacement techniques like sIFR or Cufon.

And another popular javascript driven UI-aid is gonna deprecate soon. The date-picker or calendar tool.

HTML5 that now incorporates the Webform2 specification which has internal support for a calendar tool, range slider and number spinners.

HTML5 datepicker rendered by Opera 10

HTML5 datepicker rendered by Opera 10


Opera is the only browser that has support for Webform now for several years. I made some internal tools that used it.

It so simpel and powerful. And no more localisation issues.

Some examples (need Opera 9+ to see)
With other HTML5 nonsupporting browsers it will degrade to an ordinary input field.

Datepicker

[sourcecode language=’xhtml’]

[/sourcecode]

Email

[sourcecode language=’xhtml’]

[/sourcecode]
*Note the automatically added special email icon in Opera

Number (with automatic spinner)

[sourcecode language=’xhtml’]

[/sourcecode]

Range (slider)

[sourcecode language=’xhtml’]

[/sourcecode]
Default range: 0 – 100. I guess this will be another UI favourite.

3 Comments

Webfonts easy to use: no need for sIFR

Thursday, April 2nd, 2009

Webfonts is a technique for defining a variety of fonts to be displayed in a web browser.

In CSS authors typically specify font characteristics via a font property (font-family). In CSS1, all fonts were assumed to be present on the client system and were identified solely by name. Designers of webpages had no way to propose other fonts to the user other than generic default fonts installed on the client computer.

Now with CSS3 the situation, when there is no matching font on the client, has been expanded. Fonts can be downloaded over the web by the browser and used on the client. This gives the author much more control over the typography and design of the page, because it’s not longer dependend of locally stored fonts.

This means this is no need anymore for flash based work-arounds like sIFR. The other good thing is that browsers can fall back to more generic fonts, when they don’t support the webfonts.

So there is no reason at all to wait using them.

Like for most web-innovations based on open standards, Microsoft is NOT supporting it. They have there own implementation based on a proprietary standard EOT. This is not a W3C recommendation nor is it supported by any other company. I think we have to wait till Internet Explorers` marketshare is dropping under 30% before Microsoft is starting to support open standards Web Fonts.

To see this paragraph in a different font, try the appropriate buttons.



You need a webfont supporting browser: Safari 3.1+, Opera 10 +, Firefox 3.1 + or Chrome 2 +.