Why not perfect alignment?

Can't think of any good reason for the text not to be as crisp for both
*visible* paragraphs at:

<http://dorayme.netweaver.com.au/alt/indexAlignment.html>

Here is an even purer case:

<http://dorayme.netweaver.com.au/alt/indexAlignment2.html>

Notice that the background is not set (the phenomena is dependent on the
transparency of the backgrounds to the elements).

It is mildly surprising that blurring occurs, that there is not perfect
registration.

The only theory that comes to my mind does not *quite* satisfy me:
elements are on layers in a fluid which has a refractive index different
to a vacuum.

--
dorayme

dorayme wrote:

Can't think of any good reason for the text not to be as crisp for both
*visible* paragraphs at:

http://dorayme.netweaver.com.au/alt/indexAlignment.html

Here is an even purer case:

http://dorayme.netweaver.com.au/alt/indexAlignment2.html

Notice that the background is not set (the phenomena is dependent on the
transparency of the backgrounds to the elements).

It is mildly surprising that blurring occurs, that there is not perfect
registration.

The only theory that comes to my mind does not *quite* satisfy me:
elements are on layers in a fluid which has a refractive index different
to a vacuum.

Kind of looks like ClearType gone awry. If you disable ClearType, the
problem disappears.

dorayme wrote:

Can't think of any good reason for the text not to be as crisp for both
*visible* paragraphs at:

http://dorayme.netweaver.com.au/alt/indexAlignment.html

Here is an even purer case:

http://dorayme.netweaver.com.au/alt/indexAlignment2.html

Notice that the background is not set (the phenomena is dependent on the
transparency of the backgrounds to the elements).

It is mildly surprising that blurring occurs, that there is not perfect
registration.

The only theory that comes to my mind does not *quite* satisfy me:
elements are on layers in a fluid which has a refractive index different
to a vacuum.

The same thing happens if you style all three paragraphs with position:
absolute; left: 100px; top: 100px; (using 100px just to get it out of
the corner to see if that changes anything).

In article <7ki2heF393oisU1 (AT) mid (DOT) individual.net>,
Harlan Messinger <hmessinger.removethis (AT) comcast (DOT) net> wrote:

dorayme wrote:
Can't think of any good reason for the text not to be as crisp for both
*visible* paragraphs at:

http://dorayme.netweaver.com.au/alt/indexAlignment.html

Here is an even purer case:

http://dorayme.netweaver.com.au/alt/indexAlignment2.html

Notice that the background is not set (the phenomena is dependent on the
transparency of the backgrounds to the elements).

It is mildly surprising that blurring occurs, that there is not perfect
registration.

The only theory that comes to my mind does not *quite* satisfy me:
elements are on layers in a fluid which has a refractive index different
to a vacuum.

The same thing happens if you style all three paragraphs with position:
absolute; left: 100px; top: 100px; (using 100px just to get it out of
the corner to see if that changes anything).

OK. I guess the relevant bit of the browser-supplied (default)
stylesheet or even the implementation of whatever is the top left (be it
0 and O or 100px and 100px) applies to all four absolutely positioned
divs in my second URL, so this is not too surprising.

Queer business though! There is something else: on my machine and Mac
browsers, the black gets blacker, no matter if it is specified #000 for
each paragraph when layering one paragraph over another. Up to a point
though: just one makes for a black enough but *just* slightly grey text.
It looks blacker the bigger one sets the text. But at small text size,
this not-deepest of blacks really quickly goes total black after just
another spray of text via absolute positioning.

Both aspects of this phenomena (the blackness and the interference
jaggies) depends, as I said, on leaving the default transparency for the
elements. But it is curious to reflect that somehow the transparency
acts through the text paint itself.

Here is one theory that suggests itself from Upsdell's observation: I am
seeing an attempt by my OS to do smoothy things with the edges of the
type but it gets confused by doing it in one spot. Or does it do it to
two sets of identical text but somehow the browser itself gets confused
when summing the two sets?

--
dorayme

In article <hc09pc$lo8$1 (AT) news (DOT) eternal-september.org>,
C A Upsdell <cupsdell (AT) nospam (DOT) not> wrote:

dorayme wrote:
Can't think of any good reason for the text not to be as crisp for both
*visible* paragraphs at:

http://dorayme.netweaver.com.au/alt/indexAlignment.html

Here is an even purer case:

http://dorayme.netweaver.com.au/alt/indexAlignment2.html

Notice that the background is not set (the phenomena is dependent on the
transparency of the backgrounds to the elements).

It is mildly surprising that blurring occurs, that there is not perfect
registration.

The only theory that comes to my mind does not *quite* satisfy me:
elements are on layers in a fluid which has a refractive index different
to a vacuum.

Kind of looks like ClearType gone awry. If you disable ClearType, the
problem disappears.

Interesting. I do not get any noticeable differences when I alter the
font-smoothing settings in my Mac Tiger OS control panel but it may not
kick in auto without restarting browsers or the whole machine which I
have not yet fully tested.

--
dorayme

dorayme wrote:

In article <hc09pc$lo8$1 (AT) news (DOT) eternal-september.org>,
C A Upsdell <cupsdell (AT) nospam (DOT) not> wrote:

dorayme wrote:
Can't think of any good reason for the text not to be as crisp for both
*visible* paragraphs at:

http://dorayme.netweaver.com.au/alt/indexAlignment.html

Here is an even purer case:

http://dorayme.netweaver.com.au/alt/indexAlignment2.html

Notice that the background is not set (the phenomena is dependent on the
transparency of the backgrounds to the elements).

It is mildly surprising that blurring occurs, that there is not perfect
registration.

The only theory that comes to my mind does not *quite* satisfy me:
elements are on layers in a fluid which has a refractive index different
to a vacuum.
Kind of looks like ClearType gone awry. If you disable ClearType, the
problem disappears.

Interesting. I do not get any noticeable differences when I alter the
font-smoothing settings in my Mac Tiger OS control panel but it may not
kick in auto without restarting browsers or the whole machine which I
have not yet fully tested.

I have Windows XP with an LCD monitor. I don't know what you see when
you view the pages you cited, but what I see with FF 3.5 is fat dark
grey text with coloured fringes where you overlaid the text. Turning
off ClearType immediately transformed the text to its normal appearance.

In article <hc17as$3ik$1 (AT) news (DOT) eternal-september.org>,
C A Upsdell <cupsdell (AT) nospam (DOT) not> wrote:

dorayme wrote:
In article <hc09pc$lo8$1 (AT) news (DOT) eternal-september.org>,
C A Upsdell <cupsdell (AT) nospam (DOT) not> wrote:

dorayme wrote:
Can't think of any good reason for the text not to be as crisp for both
*visible* paragraphs at:

http://dorayme.netweaver.com.au/alt/indexAlignment.html

Here is an even purer case:

http://dorayme.netweaver.com.au/alt/indexAlignment2.html

Notice that the background is not set (the phenomena is dependent on the
transparency of the backgrounds to the elements).

It is mildly surprising that blurring occurs, that there is not perfect
registration.

....
Kind of looks like ClearType gone awry. If you disable ClearType, the
problem disappears.

Interesting. I do not get any noticeable differences when I alter the
font-smoothing settings in my Mac Tiger OS control panel but it may not
kick in auto without restarting browsers or the whole machine which I
have not yet fully tested.

I have Windows XP with an LCD monitor. I don't know what you see when
you view the pages you cited, but what I see with FF 3.5 is fat dark
grey text with coloured fringes where you overlaid the text. Turning
off ClearType immediately transformed the text to its normal appearance.

OK, in indexAlignment.html above, you are getting *no difference*
between the two visible paragraphs, I assume, when you turn off
ClearType. And you are getting no difference between the visible
paragraph in indexAlignment2.html and either para in indexAlignment.html.

I am not getting *coloured* fringes (on any of my LCD displays) but that
may simply be that I have monitors calibrated differently to you
(probably less contrasty):

<http://dorayme.netweaver.com.au/justPics/indexAlignment.png>

and

<http://dorayme.netweaver.com.au/justPics/indexAlignment2.png>>

--
dorayme

In article <hc17as$3ik$1 (AT) news (DOT) eternal-september.org>,
C A Upsdell <cupsdell (AT) nospam (DOT) not> wrote:

....

I have Windows XP with an LCD monitor. I don't know what you see when
you view the pages you cited, but what I see with FF 3.5 is fat dark
grey text with coloured fringes where you overlaid the text. Turning
off ClearType immediately transformed the text to its normal appearance.

In fact, I did not test in my Opera 9.64. In Opera, there is no fringing
or extra blackening. So, the browser is obviously some important factor.

--
dorayme

dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

Here is one theory that suggests itself from Upsdell's observation: I am
seeing an attempt by my OS to do smoothy things with the edges of the
type but it gets confused by doing it in one spot. Or does it do it to
two sets of identical text but somehow the browser itself gets confused
when summing the two sets?

Here's a theory. Text at small sizes isn't pure black due to Mac OSX
font smoothing. Instead the pixels forming the characters have various
degrees of transparency. When you overlay two identical characters, a
semi-transparent pixel will become darker (like overlaying two
semi-transparent layers in photoshop). The lighter edge pixels become
darker and make the font look jaggy.

To see this more clearly (on a Mac), press Cmd-Opt-8 to switch on Zoom,
then press Cmd-Opt-+ repeatedly to zoom in (you may need to alter the
zoom settings in the Universal Access control panel).

dorayme wrote:

In article <hc17as$3ik$1 (AT) news (DOT) eternal-september.org>,
C A Upsdell <cupsdell (AT) nospam (DOT) not> wrote:

dorayme wrote:
In article <hc09pc$lo8$1 (AT) news (DOT) eternal-september.org>,
C A Upsdell <cupsdell (AT) nospam (DOT) not> wrote:

dorayme wrote:
Can't think of any good reason for the text not to be as crisp for both
*visible* paragraphs at:

http://dorayme.netweaver.com.au/alt/indexAlignment.html

Here is an even purer case:

http://dorayme.netweaver.com.au/alt/indexAlignment2.html

Notice that the background is not set (the phenomena is dependent on the
transparency of the backgrounds to the elements).

It is mildly surprising that blurring occurs, that there is not perfect
registration.

...
Kind of looks like ClearType gone awry. If you disable ClearType, the
problem disappears.

Interesting. I do not get any noticeable differences when I alter the
font-smoothing settings in my Mac Tiger OS control panel but it may not
kick in auto without restarting browsers or the whole machine which I
have not yet fully tested.

I have Windows XP with an LCD monitor. I don't know what you see when
you view the pages you cited, but what I see with FF 3.5 is fat dark
grey text with coloured fringes where you overlaid the text. Turning
off ClearType immediately transformed the text to its normal appearance.

OK, in indexAlignment.html above, you are getting *no difference*
between the two visible paragraphs, I assume, when you turn off
ClearType. And you are getting no difference between the visible
paragraph in indexAlignment2.html and either para in indexAlignment.html.

I am not getting *coloured* fringes (on any of my LCD displays) but that
may simply be that I have monitors calibrated differently to you
(probably less contrasty):

http://dorayme.netweaver.com.au/justPics/indexAlignment.png

and

http://dorayme.netweaver.com.au/justPics/indexAlignment2.png

This is what we see.
http://www.evandervaart.nl/news/indexAlignment.png [1920x1080 205kB]
--
Edwin van der Vaart