Archive for the ‘Webtechnology’ Category

« Older Entries Newer Entries »
No Comments

Google Chrome joins Opera in SVG background image support

Thursday, 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.

Tags: ,
Posted in browser, SVG, Webtechnology | No Comments »

No Comments

SVG – background image

Tuesday, 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.

Tags: ,
Posted in Webtechnology | No Comments »

No Comments

HTML5 Webfonts woes II: redefining generic fonts

Tuesday, 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.

Tags: ,
Posted in Webtechnology | No Comments »

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.

Tags: ,
Posted in HTML5, Webtechnology | No Comments »

No Comments

Dual Monitor setup for Dell 5150, Ubuntu 9.04 with ATI X600

Wednesday, September 9th, 2009

We need to see a lot these days now the Golden Age of Television meets the Platinum Age of Internet; hundreds of television channels and billions of webpages. Sure I have a remote control and started tabbed browsing since ages (Opera in 2000), but we’re absolute in the need of dual screens now: better, easier and they will raise productivity!

My old 17 inch CRT died. I took the step and bought a 22 inch 1920×1080 TFT to replace it . My first 19 inch 1280×1024 became second. A hefty 3200×1080 desktop in sight. Wow!

But could I get it working on my ordinary Dell with ATI X600 and Ubuntu?

A quick look on the ATI website said, that 1920×1080 was only supported under Windows (XP/Vista). I didn’t take that serious.

Never knew why all hardware vendors are promoting Windows, but it’s a fact, they probably get paid for it. Of course they lie: 3200×1080 is supported out of the box by Ubuntu 9.04 with default drivers, no extra proprietary ATI drivers needed.

Setting up was quite easy but not 100% trivial, here is how I did it:

  • delete all settings in /etc/X11/xorg.conf. It’s a textfile and can be understood by humans, there isn’t much in it these days, just some virtual desktop settings, you can’t get wrong.
  • enable both screens in `system -> preferences -> display` and drag them to right position.
  • uncheck `mirror screens`

Somehow my second monitor was still black. I could mirror the screens but a virtual desktop did not work. If the same happens to you, a few extra steps.:

  • edit /etc/X11/xorg.conf
    [sourcecode language=’shell’]
    sudo gedit /etc/X11/xorg.conf
    [/sourcecode]
  • Make your file look like:
    [sourcecode language=’shell’]
    Section “Screen”
    Identifier “Configured Screen Device”
    Device “Configured Video Device”
    SubSection “Display”
    Virtual 3200 1080
    EndSubSection
    EndSection
    [/sourcecode]
  • Open a terminal and run: [sourcecode language=’bash’] xrandr [/sourcecode]
  • Note the ID of your monitors (in my case DVI-0 and second VGA-0). Run
    [sourcecode language=’shell’]
    xrandr –output VGA-0 –mode 1280×1024 –right-of DVI-0
    [/sourcecode]

The second monitor got active and did after rebooting. That was all. Only desktop eye candy by Compiz is not supported because 3D rendering is hardware limited by ATI to max 2054px. I can live with it; no shades or transparency makes my computer faster.

Tags:
Posted in Webtechnology | No Comments »

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.

Tags: ,
Posted in CSS3, HTML5, Webtechnology | No Comments »

« Older Entries Newer Entries »