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

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

{}
 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 words – see 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 🙂

Posted in HTML5, SVG | Comments Off on Will Microsoft add SVG support to Internet Explorer in the near future?

Comments Off on Google Chrome joins Opera in SVG background image support

Google Chrome joins Opera in SVG background image support

{,}
 December 10th, 2009

I always liked Opera’s support for SVG, and I really welcomed their initiative to treat SVG as any other image type, like jpg or gif or png. After all SVG (Scalable Vector Graphics) is a vector-image  mark up language (XML), like Flash or Silverlight but free and it’s an Open Standard.

Round corners, gradients, multi-image background, watermarks, nearly everything (animation?) can be handled by SVG, so it’s quite a powerful feature. Creating a dataURL of SVG is possible, so creating a CSS file with several gradient backgrounds, round borders is indeed a very efficient way of designing webpages. It’s cached, and although the initial css file is a bit heavier, no extra server requests are needed  to load additional images. It’s fast, lean and flexible.

I’m glad to see Google Chrome as the first other main browser join Opera in support for SVG images as backgrounds in CSS declarations.

SVG support as background image in Google Chrome

SVG support as background image in Google Chrome

Chrome’s implementation isn’t without errors, see what happens if you start scrolling the webpage in the brand new Chrome for Linux beta, but is a start. I hope Mozilla/Firefox and Apple/Webkit will follow soon.

Google Chrome rendering issues SVG background

Google Chrome rendering issues SVG background

I’ve given up expectations for Microsoft Explorer, see my other post. To be short: they wanna sell their Silverlight.

I’m not without any hope, :), I hope Internet Explorer users will start using other webstandard compliant browsers and consequently MS marketshare will drop significantly. Only then they probably will convert to an attitude of supporting and promoting open standards.

Posted in browser, SVG, Webtechnology | Comments Off on Google Chrome joins Opera in SVG background image support

Comments Off on SVG – background image

SVG – background image

{,}
 December 8th, 2009

Another example of using SVG-object as background-images for HTML elements.

Lorem ipsum dolor sit amet consectetuer nibh tellus Nulla ut tortor. Mauris nisl sem parturient urna amet Nam orci pretium Morbi nunc. Id pellentesque sed sed et et nunc Nam Vestibulum tincidunt penatibus. Nibh quis eu dolor tellus nulla malesuada condimentum sed Curabitur sed. Urna metus senectus Phasellus justo et Nulla leo tincidunt Curabitur turpis. Enim mauris eu sit lacus Ut Phasellus molestie eros nascetur tincidunt. Justo pretium cursus.

Metus massa eros ipsum consequat et dui id ligula sem nibh. Et ut malesuada Maecenas pede Cum fames Ut non convallis Quisque. Vitae nibh porttitor orci nisl semper vitae justo orci Curabitur eu. Elit quis condimentum ridiculus dictumst quis laoreet tempus consectetuer lacus vel. Lorem wisi porttitor sollicitudin auctor id ipsum tempus libero nec.

Posted in Webtechnology | Comments Off on SVG – background image

2 Comments

What about Microsoft Internet Explorer 6?

December 4th, 2009

Use it at your own risk!

Consider yourself lucky if it serves any accessible and well-formatted content on the web and always be aware you could miss something: you can’t expect seeing colors on a black and white TV.

Internet Explorer 7 is a bit better, and 8 is a bit better again, although it’s compatibility setting is a big lie. Designers don’t design websites for browsers, they program following rules and  according to international webstandards. Unfortunately sometimes (=always in case of Internet Explorer)) you have to patch a site to work well in browsers. Historically Internet Explorer doesn’t comply to those web-standards.

IMHO the costs of website-design is raised by approximately 50% due to weak standards support by Internet Explorer. I guess that worldwide loss is bigger than the cost of the financial crises in autumn 2009. Billions of euros.

Compare it with an added translation in Microsofts gibberish of several pages to every plain English written book, magazine or newspaper. Nobody wants that, but on the web it’s a fact.

Microsoft is selling an Operating System, they don’t like advanced web-applications: it makes their core business obsolete. So they try to slowdown innovation. And they try to push proprietary standards as Video-encoding techniques and Silverlight: we can use it only if we pay Microsoft and buy their software.

You wonder why sensible people are using Explorer at all. Probably they’re ignorant. It’s simply pre-installed. The same reason the crisis hit that hard: My bank offered me a mortgage, I thought I could trust my bank. Well, they make money and we pay the bill.

Posted in browser | 2 Comments

Comments Off on HTML5 Webfonts woes II: redefining generic fonts

HTML5 Webfonts woes II: redefining generic fonts

{,}
 September 29th, 2009

Lets try to redefine the generic fonts with a webfont @font-face definition.
We change:

  1. serif
  2. sans-serif
  3. monospace
  4. fantasy


<style>
@font-face {
src: url(http://dev.webonomic.nl/fonts/Pinewood.ttf);
font-family: 'serif';
}
@font-face {
src: url(http://dev.webonomic.nl/fonts/Pinocchio.ttf);
font-family: 'sans-serif';
}
@font-face {
src: url(http://dev.webonomic.nl/fonts/rothenbg.ttf);
font-family: monospace;
}
@font-face {
src: url(http://dev.webonomic.nl/fonts/DevinneSwash.ttf);
font-family: 'fantasy';
}
</style>

Paragraph with serif 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 sans-serif 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 fantasy font

style=”font-family:fantasy” 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 monospace 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.

It seems we were successful: Firefox 3.5 and Safari 4.0 will redefine generic fonts! But we cheated, it happens only when they’re quoted.

Although font-family names are strings and strings should be handled the same if they are unquoted, double or single quoted, it’s different for generic families.

Generic font names aren’t string but keywords, quoted keywords are strings, so generic font names should never be quoted.

Unquoted generic names are not redefined as is shown by monospace

Opera does not redefine the fonts in any case. Chrome and Safari are right here. Firefox behavior is wrong. It let redefine generic fonts by type string, but called as keywords.

Update: Somehow there is inconsistent behavior. Firefox 3.5.3 acts diffently on Linux or XP. Also caching seems to be confusing.

Posted in Webtechnology | Comments Off on HTML5 Webfonts woes II: redefining generic fonts

Comments Off on HTML5 Webfonts woes: redefining standard fonts

HTML5 Webfonts woes: redefining standard fonts

{,}
 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.

Posted in HTML5, Webtechnology | Comments Off on HTML5 Webfonts woes: redefining standard fonts

« Older Entries Newer Entries »