No Comments

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 | No Comments

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

No Comments

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 | No Comments

No Comments

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 | No Comments

No Comments

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

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

Posted in Webtechnology | No Comments

No Comments

HTML 5 and internal datepicker

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

Posted in CSS3, HTML5, Webtechnology | No Comments

« Older Entries Newer Entries »