text anti-aliasing on semi-transparent background

[Roderik]

Hi,

On my website I implemented tooltip alike layers when you hover the
category items in the sidebar on the right.

See: http://www.roderik.net/

The layers that become visible have a opacity value of .8 and contain a
background image. The effect is as expexted.
However, the anti-aliasing is very poor in both Internet Explorer 7 and
Opera 9 (and prob. for other versions), in Firefox 3 the anti-aliasing
works fairly well.
Is there something I can change to the style definitions to improve the
anti-aliasing of the text in these layers in browsers other than FF?

Kind regards,

Roderik

[Steve Swift]

Re: text anti-aliasing on semi-transparent background

Roderik wrote:

The layers that become visible have a opacity value of .8 and contain a
background image. The effect is as expexted.
However, the anti-aliasing is very poor in both Internet Explorer 7 and
Opera 9 (and prob. for other versions), in Firefox 3 the anti-aliasing
works fairly well.

I don't see much of a problem with my Opera 9.27 but that may be down to
my display resolution and font size restrictions. There's hardly
anything to anti-alias!

For corporate reasons, I still have IE6. I got a couple of Javascript
errors, and the category menus don't work at all. There may be more IE6
users around than you think.

My Firefox 2.0.0.12 looks identical to Opera.

I don't know if you can make the text solid against the 80% transparency
background, but seeing the underlying black text through the category
white text was rather unsettling.

--
Steve Swift

http://www.swiftys.org.uk/swifty.html

http://www.ringers.org.uk

[Roderik]

Re: text anti-aliasing on semi-transparent background

Steve Swift schreef:

Roderik wrote:

>The layers that become visible have a opacity value of .8 and contain
>a background image. The effect is as expexted.
>However, the anti-aliasing is very poor in both Internet Explorer 7
>and Opera 9 (and prob. for other versions), in Firefox 3 the
>anti-aliasing works fairly well.

>
I don't see much of a problem with my Opera 9.27 but that may be down to
my display resolution and font size restrictions. There's hardly
anything to anti-alias!

Just upgraded from 9.26 to 9.27, but the same result, not properly
anti-aliased. E.g. the A's and V's are very wiggly. However I downloaded
version 1.50b2 and there the anti-aliasing worked well. So there is hope
for the future.

For corporate reasons, I still have IE6. I got a couple of Javascript
errors, and the category menus don't work at all. There may be more IE6
users around than you think.

It doesn't use javascript for that purpose however. All javascript is
generated by WordPress (plugins). I also noticed there is an error when
using internet explorer however but it was not very informative, it said
error on line 545 character 3. However that line reads:

<li class="cat-item cat-item-5"><a
href="http://www.roderik.net/category/education/"

>education<span >Articles related to my Artificial Intelligence course,

my former Electrical Engineering course and my current course
Computational Intelligence and Robotics and whatever is going on at
uni.</span></a>

And there is no javascript there. Nor is this line considerably
different to the previous menu items. However this group might not be
appropriate to discuss that issue.

My Firefox 2.0.0.12 looks identical to Opera.

Ouch what a shame.

I don't know if you can make the text solid against the 80% transparency
background, but seeing the underlying black text through the category
white text was rather unsettling.

In that case there is no aim in making it semi-transparent. However I
preferred it that way, and I hope the majority of my visitors also does.

[Bergamot]

Re: text anti-aliasing on semi-transparent background


Roderik wrote:

Steve Swift schreef:

>Roderik wrote:

>>The layers that become visible have a opacity value of .8 and contain
>>a background image. The effect is as expexted.

>>
>seeing the underlying black text through the category
>white text was rather unsettling.

>
In that case there is no aim in making it semi-transparent. However I
preferred it that way, and I hope the majority of my visitors also does.

The transparency impairs readability. Why would that be preferred?

BTW, the bg image doesn't stretch vertically to accommodate enlarged
text sizes, so the text looks like it's chopped off at the bottom.
That's what happens with white text on a white background, and is what
you get here with image loading disabled, too.

--
Berg

[Gregor Kofler]

Re: text anti-aliasing on semi-transparent background

Roderik meinte:

Steve Swift schreef:

>For corporate reasons, I still have IE6. I got a couple of Javascript
>errors, and the category menus don't work at all. There may be more
>IE6 users around than you think.

>
It doesn't use javascript for that purpose however. All javascript is
generated by WordPress (plugins). I also noticed there is an error when
using internet explorer however but it was not very informative, it said
error on line 545 character 3. However that line reads:
>
<li class="cat-item cat-item-5"><a
href="http://www.roderik.net/category/education/"

>education<span >Articles related to my Artificial Intelligence course,

my former Electrical Engineering course and my current course
Computational Intelligence and Robotics and whatever is going on at
uni.</span></a>

IE reports the erroneous line in one of the *JavaScript* files, not your
main HTML page. And since some of these JS files are "packed" (why on
earth did they ever come up with this idiotic "packing"), you might have
extra problems to track it down with a MS script debugger. At least some
of the used JS "libraries" are of questionable quality (to put it
nicely), and the overall usage of those JS files give the impression,
that a script kiddie has thrown in everything, but the kitchen sink.
Gives a good idea about the "professionalit y" of wordpress plugin
"developers ".

Sorry, I got carried away. JS is an issue in c.l.javascript


Gregor


--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum

[Roderik]

Re: text anti-aliasing on semi-transparent background

Gregor Kofler schreef:

Roderik meinte:
>

>Steve Swift schreef:

>

>>For corporate reasons, I still have IE6. I got a couple of Javascript
>>errors, and the category menus don't work at all. There may be more
>>IE6 users around than you think.

>>
>It doesn't use javascript for that purpose however. All javascript is
>generated by WordPress (plugins). I also noticed there is an error
>when using internet explorer however but it was not very informative,
>it said error on line 545 character 3. However that line reads:
>>
><li class="cat-item cat-item-5"><a
>href="http://www.roderik.net/category/education/"

> >education<span >Articles related to my Artificial Intelligence

>course, my former Electrical Engineering course and my current course
>Computationa l Intelligence and Robotics and whatever is going on at
>uni.</span></a>

>
IE reports the erroneous line in one of the *JavaScript* files, not your
main HTML page. And since some of these JS files are "packed" (why on
earth did they ever come up with this idiotic "packing"), you might have
extra problems to track it down with a MS script debugger. At least some
of the used JS "libraries" are of questionable quality (to put it
nicely), and the overall usage of those JS files give the impression,
that a script kiddie has thrown in everything, but the kitchen sink.
Gives a good idea about the "professionalit y" of wordpress plugin
"developers ".
>
Sorry, I got carried away. JS is an issue in c.l.javascript

Well the scriptaculous library is quite well known, although I prefer
ext these days. It is my personal web site and therefore a test place of
those things. I throw those sing in and if it doesn't work well of if it
doesn't add value IMO I remove them (after some time). Sometimes I
rewrite plugins, like the language switcher which needed a lot of
adjustments to make it work the way I wanted it. I submitted it to the
developer and the community might gain from it. I wrote web sites a long
time w/o using plugins and prebuild scripts and it took me a lot of
effort. The advance is that the plugins get updated and you don't have
to look after it so much. Although I agree if it is for a commercial
site and the budget is affordable custom code gives you much more grip
on the result. I wrote my own custom CMS for some sites but it usually
takes me a lot of time as well.
The thread was however about improving the rendering of the text on the
semi-transparent layer. Other than rejecting the assumptions there were
no to the point answers yet. It seems to be a question of time then and
not a stylesheet issue apparently.

[Bergamot]

Re: text anti-aliasing on semi-transparent background


Roderik wrote:

Bergamot schreef:

>>
>The transparency impairs readability. Why would that be preferred?

>
Because it improves the experience (at least for me)

That's fine if you're the only one using the site. But what about your
visitors?

if we all wanted
websites to transmit information in the most efficient way the web would
have been pretty much black and white.

[rolls eyes]

Strawman arguments will get you nowhere.

>BTW, the bg image doesn't stretch vertically to accommodate enlarged
>text sizes, so the text looks like it's chopped off at the bottom.

>
On default text size only Opera chops off
text, but only a bit.

And what about those of us who don't use the default text size? We don't
count?

A fixed height was estitically better than a box
than resizes vertically IMO.

So you aren't concerned with readability of your site, just how kewl it
looks?

I know that especially web developers resize
their text quite often

In my case, it's only so text is actually readable. Thank &deity; for
minimum font size preferences.

I just tested, even for
Firefox the whole thing becomes resized when using CTLR++.

Don't need CTRL+ when using minimum font size. Try it sometime. Mine's
at 17px.

Initially I defined a black background color apart from the
background-image, however since that impairs the transparency effect I
had to take it out.

So impaired transparency is bad but impaired readability is OK... :-\

I know that all these usability issues are to be taken into
consideration,

But you have chosen to ignore them.

but the outcome is not necceseraly that the site needs to
reach the widest audience and best usability.

It appears to be a personal site, so you can do whatever you like.

Especially not when there
is an experience trade-off

I don't see how that transparency, which is hardly noticeable except for
the black text bleeding through the white lettering, is a positive user
experience.

that involves usually a much bigger group
than those that keep turning off their images or browse with lynx or
those few disabled people with a speech browser, however those can use
the mobile alternative of the site.

It's so much easier to just disable stylesheets, or hit the 'back'
button and go somewhere else.

--
Berg