Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

A css triangle.

39 views
Skip to first unread message

dorayme

unread,
Dec 28, 2011, 6:54:28 PM12/28/11
to
One day I was urgently needing a triangle but when I made a move
to grab one, they all hid. Triangles are like that, sort of
nervous, at least the small ones are. So I thought, maybe make an
artificial one, an apparition, all style and no substance (not to
upset the union bosses - of triangles, that is. O yes, there are
unions for all the geometrical shapes.)

<http://dorayme.netweaver.com.au/xmasTree/triangle.html>

Perhaps could be used in stuff like:

<http://dorayme.netweaver.com.au/xmasTree/listItemTriangleMarkers.
html>

Though be careful, as different fonts will muck up alignments.

--
dorayme

tlvp

unread,
Dec 28, 2011, 7:20:40 PM12/28/11
to
On Thu, 29 Dec 2011 10:54:28 +1100, dorayme wrote:

> One day I was urgently needing a triangle but when I made a move
> to grab one, they all hid.

<tongue-in-cheek>
Well-tuned ones do that if they sense you're not a Musician's Union member.
</tongue-in-cheek>

Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.

tlvp

unread,
Dec 28, 2011, 7:33:46 PM12/28/11
to
On Thu, 29 Dec 2011 10:54:28 +1100, dorayme wrote:

> all style and no substance ...
>
> <http://dorayme.netweaver.com.au/xmasTree/triangle.html>

Has me mystified, dorayme, on three counts:

First, when you specify 4em, for your border-top, -bottom, and -left,
what absolute font size are those ems referring to?

Second, why is no border-right (as white as -top and -bottom) needed?

Third, by what mechanism do white border-top and -bottom and black
border-left all agree to divvy up the block so triangularly, if you know?

Enlightenment on those three counts would be more than welcome :-) .
So TIA; and cheers, -- tlvp

dorayme

unread,
Dec 29, 2011, 4:23:43 AM12/29/11
to
In article <14k8mpg0gyu93$.uwvr8ma...@40tude.net>,
tlvp <mPiOsUcB...@att.net> wrote:

> On Thu, 29 Dec 2011 10:54:28 +1100, dorayme wrote:
>
> > all style and no substance ...
> >
> > <http://dorayme.netweaver.com.au/xmasTree/triangle.html>
>
> Has me mystified, dorayme, on three counts:
>
> First, when you specify 4em, for your border-top, -bottom, and -left,
> what absolute font size are those ems referring to?
>

xem means x times the font size, specifically the height of the
font. The height of the font can be thought to be the height of
the box as scaled from the original box that the designer of the
font used as his reference. Most modern fonts do not have any
particular size, they are like universals, like "red square" or
"dog" or "circle" - the platonic forms of which live in a
dimensionless world, only the instances have resolved sizes.

In a real situation, the resolved height, the actual height of
anything specified in ems depends on a few things. Sticking to
screens:

* The resolution of the monitor
* The number of ems specified in CSS
* The font size settings in browser preferences.

Let's suppose that the rare and savvy browser user has his font
size settings so that text in his favourite font is *perfectly*
comfortable to read as paragraph text when the author of the
webpage sets no text size or sets body or paragraph text to be
1em or 100%. This preference setting is the key initial frame of
reference to answer your question, whatever is set as normal for
a user determines how absolutely inch big is the em unit. If the
user decides to use Zoom and tactically ups the size on some
occasion, the frame of reference becomes a new value.

Let's suppose that a keen-eyed user sets his preference for font
size to be such that the fonts he usually sees in paragraph text
are 1/10" high on his monitor. Realism can take a holiday for the
moment, easier maths trumps. So, an em unit instanced for this
user is such that anything sized as 10em will normally be 1".
Normally, if he does not use his Zoom.

These em units are very useful for flexible designs because they
resolve up and down to suit the user's preferred font size. In
our example, an element that is widthed or heighted to be 1em
will be 1/10", 10em will be 1", and to answer your question 4em
will be 4/10"

Most people set their preferred size to be rather bigger than
1/10" and the em unit is correspondingly bigger.

On my screen and my settings the height of the 10em div on

<http://dorayme.netweaver.com.au/emSizing.html>

is about 1.7"

> Second, why is no border-right (as white as -top and -bottom) needed?
>

Perhaps you did not see my reply to Ray_Net on alt.html recently
in a thread called 'Merry Xmas folks...'? Not even sure he did?
Anyway, I will repeat the salient bits and this might help you:

Usually, borders of boxes are not very thick and not variously
coloured and rarely coloured to the same background - making them
invisible - as their element's container. But when you do assign
such thick borders, the bevelling at the corners can become
evident.

There are some examples at the beginning of

<http://netweaver.com.au/floatHouse/page1.php>

with some explanations about widths.

A DIV's content area is naturally as wide as its container, and
so even where there is no content, it still gets width. But its
height is determined by the height of its content. If there is no
content, it has no height. Of course, we can give it a height
without giving it content, but that is interfering with the
course of nature (not that this is necessarily a bad thing. As it
happens, giving height *is* generally a bad thing but let's save
why for another time).

You can see for yourself certain progressions in:

<http://dorayme.netweaver.com.au/borderBits.html>

The first div has a bit of content and so has a bit of height.
And some mildly exaggerated borders.

The second has no height, it is all width and borders.

The third is all borders!

The rest of the DIVs are simply variations, the last is of
interest because to get the black triangle one needs the
existence of the invisible white borders.


> Third, by what mechanism do white border-top and -bottom and black
> border-left all agree to divvy up the block so triangularly, if you know?
>

See the above and note the idea of bevelling when two thick
borders meet.

> Enlightenment on those three counts would be more than welcome :-) .

--
dorayme

Jukka K. Korpela

unread,
Dec 29, 2011, 7:06:45 AM12/29/11
to
2011-12-29 1:54, dorayme wrote:

> One day I was urgently needing a triangle but when I made a move
> to grab one, they all hid. Triangles are like that, sort of
> nervous, at least the small ones are. So I thought, maybe make an
> artificial one, an apparition, all style and no substance (not to
> upset the union bosses - of triangles, that is. O yes, there are
> unions for all the geometrical shapes.)
>
> <http://dorayme.netweaver.com.au/xmasTree/triangle.html>

Kewl! Somewhat along the same lines, I made a pure CSS circle, though
people using outdated browsers (such as IE 8) will see it as a rectangle:

http://www.cs.tut.fi/~jkorpela/test/css-circle.html

--
Yucca, http://www.cs.tut.fi/~jkorpela/

dorayme

unread,
Dec 29, 2011, 7:53:56 AM12/29/11
to
In article <jdhl4i$8k7$1...@dont-email.me>,
Yes, nice. One day, when all substantial human supplies are used
up, food gone, no more wood, the earth ravished, we may need all
the tricks to get something out of nothing we can lay our hands
on. <g>

--
dorayme

Ben C

unread,
Dec 29, 2011, 10:44:48 AM12/29/11
to
Have you seen this one:

http://www.infimum.dk/HTML/rotatingStar.html

(All using borders). Of course you should all be using SVG for this sort
of thing really, which, now I come to think of it, is a reason to use
XHTML, because then you can mix your SVG with your XHTML in the same
page.

tlvp

unread,
Dec 29, 2011, 12:27:00 PM12/29/11
to
On Thu, 29 Dec 2011 20:23:43 +1100, dorayme wrote:

> In article <14k8mpg0gyu93$.uwvr8ma...@40tude.net>,
> tlvp <mPiOsUcB...@att.net> wrote:
>
>> On Thu, 29 Dec 2011 10:54:28 +1100, dorayme wrote:
>>
>>> all style and no substance ...
>>>
>>> <http://dorayme.netweaver.com.au/xmasTree/triangle.html>
>>
>> Has me mystified, dorayme, on three counts:
>>
>> First, when you specify 4em, for your border-top, -bottom, and -left,
>> what absolute font size are those ems referring to?
>>
>
> xem means x times the font size, specifically the height of the
> font. The height of the font can be thought to be the height of
> the box as scaled from the original box that the designer of the
> font used as his reference. Most modern fonts do not have any
> particular size, they are like universals, like "red square" or
> "dog" or "circle" - the platonic forms of which live in a
> dimensionless world, only the instances have resolved sizes.

Right. So, no font size having yet been specified, *what* is your 4em
taken in reference *to*?

> In a real situation, the resolved height, the actual height of
> anything specified in ems depends on a few things. Sticking to
> screens:
>
> * The resolution of the monitor
> * The number of ems specified in CSS
> * The font size settings in browser preferences.
>
> Let's suppose that the rare and savvy browser user has his font
> size settings so that text in his favourite font is *perfectly*
> comfortable to read as paragraph text when the author of the
> webpage sets no text size or sets body or paragraph text to be
> 1em or 100%. This preference setting is the key initial frame of
> reference to answer your question, whatever is set as normal for
> a user determines how absolutely inch big is the em unit. If the
> user decides to use Zoom and tactically ups the size on some
> occasion, the frame of reference becomes a new value.

Nothing else having been specified yet, the point of reference is
whatever the browser *default* font size has been set up to be?
OK, that's a meaningful answer. That's what I needed :-) . Thanks.

> Let's suppose that a keen-eyed user sets his preference for font
> size to be such that the fonts he usually sees in paragraph text
> are 1/10" high on his monitor. Realism can take a holiday for the
> moment, easier maths trumps. So, an em unit instanced for this
> user is such that anything sized as 10em will normally be 1".
> Normally, if he does not use his Zoom.
>
> These em units are very useful for flexible designs because they
> resolve up and down to suit the user's preferred font size. In
> our example, an element that is widthed or heighted to be 1em
> will be 1/10", 10em will be 1", and to answer your question 4em
> will be 4/10"
>
> Most people set their preferred size to be rather bigger than
> 1/10" and the em unit is correspondingly bigger.
>
> On my screen and my settings the height of the 10em div on
>
> <http://dorayme.netweaver.com.au/emSizing.html>
>
> is about 1.7"
>
>> Second, why is no border-right (as white as -top and -bottom) needed?
>>
>
> Perhaps you did not see my reply to Ray_Net on alt.html recently

Ah, alt.html? Unaware of that group. I'll need to try to find a (free) NNTP
server that carries it :-) .

> in a thread called 'Merry Xmas folks...'? Not even sure he did?
> Anyway, I will repeat the salient bits and this might help you:

OK, thanks!

> Usually, borders of boxes are not very thick and not variously
> coloured and rarely coloured to the same background - making them
> invisible - as their element's container. But when you do assign
> such thick borders, the bevelling at the corners can become
> evident.

Ah, bevelling! Shades of what postscript often does, too, if you don't
prevent it by some ... umm ... 'astuce'.
Gotcha! Thanks very much for this nifty little intra-holiday-time lesson!
(None snipped because too valuable to leave on the cutting room floor.)

Cheers, -- tlvp

tlvp

unread,
Dec 29, 2011, 12:37:48 PM12/29/11
to
On Thu, 29 Dec 2011 09:44:48 -0600, Ben C wrote:

> On 2011-12-29, dorayme <dor...@optusnet.com.au> wrote:
>> In article <jdhl4i$8k7$1...@dont-email.me>,
>> "Jukka K. Korpela" <jkor...@cs.tut.fi> wrote:
>>
>>> 2011-12-29 1:54, dorayme wrote:
>>>
>>> > One day I was urgently needing a triangle but when I made a move
>>> > to grab one, they all hid. Triangles are like that, sort of
>>> > nervous, at least the small ones are. So I thought, maybe make an
>>> > artificial one, an apparition, all style and no substance (not to
>>> > upset the union bosses - of triangles, that is. O yes, there are
>>> > unions for all the geometrical shapes.)
>>> >
>>> > <http://dorayme.netweaver.com.au/xmasTree/triangle.html>
>>>
>>> Kewl! Somewhat along the same lines, I made a pure CSS circle, though
>>> people using outdated browsers (such as IE 8) will see it as a rectangle:
>>>
>>> http://www.cs.tut.fi/~jkorpela/test/css-circle.html
>>
>> Yes, nice. One day, when all substantial human supplies are used
>> up, food gone, no more wood, the earth ravished, we may need all
>> the tricks to get something out of nothing we can lay our hands
>> on. <g>
>
> Have you seen this one:
>
> http://www.infimum.dk/HTML/rotatingStar.html

Good one, that, and its linked

http://www.infimum.dk/HTML/slantinfo.html .

-- Many thanks! Cheers, -- tlvp

Andreas Prilop

unread,
Dec 29, 2011, 12:37:48 PM12/29/11
to
On Thu, 29 Dec 2011, tlvp wrote:

> So, no font size having yet been specified, *what* is your 4em
> taken in reference *to*?
> Nothing else having been specified yet, the point of reference is
> whatever the browser *default* font size has been set up to be?

No! It is the reader’s preferred font size — the size that
the reader has chosen in his browser.

--
In memoriam Alan J. Flavell
http://groups.google.com/groups/search?q=author:Alan.J.Flavell

Kevin Nathan

unread,
Dec 29, 2011, 2:00:07 PM12/29/11
to
On Thu, 29 Dec 2011 09:44:48 -0600
Ben C <spam...@spam.eggs> wrote:

>Have you seen this one:
>
>http://www.infimum.dk/HTML/rotatingStar.html
>

Where do you get the code for borderline.js? I've tried various web
searches with no luck...


--
Kevin Nathan (Arizona, USA)
Linux Potpourri -- http://www.project54.com/linux/

Open standards. Open source. Open minds.
The command line is the front line.
Linux 2.6.37.6-0.9-desktop
11:58am up 18 days 23:08, 14 users, load average: 0.22, 0.21, 0.15

Gus Richter

unread,
Dec 29, 2011, 3:11:22 PM12/29/11
to
On 12/29/2011 2:00 PM, Kevin Nathan wrote:
> On Thu, 29 Dec 2011 09:44:48 -0600
> Ben C<spam...@spam.eggs> wrote:
>
>> Have you seen this one:
>>
>> http://www.infimum.dk/HTML/rotatingStar.html
>>
>
> Where do you get the code for borderline.js? I've tried various web
> searches with no luck...


Look in the source:

<http://www.infimum.dk/HTML/borderline.js>

--
Gus

Kevin Nathan

unread,
Dec 29, 2011, 4:49:24 PM12/29/11
to
Thanks! I should have thought of that, but my brain is so fried from
converting a big C++ project from autotools to CMake that I cannot
think independently very well right now... :-)


--
Kevin Nathan (Arizona, USA)
Linux Potpourri -- http://www.project54.com/linux/

Open standards. Open source. Open minds.
The command line is the front line.
Linux 2.6.37.6-0.9-desktop
14:47pm up 19 days 1:57, 14 users, load average: 0.54, 0.41, 0.25

tlvp

unread,
Dec 29, 2011, 5:33:17 PM12/29/11
to
On Thu, 29 Dec 2011 18:37:48 +0100, Andreas Prilop wrote:

> On Thu, 29 Dec 2011, tlvp wrote:
>
>> So, no font size having yet been specified, *what* is your 4em
>> taken in reference *to*?
>> Nothing else having been specified yet, the point of reference is
>> whatever the browser *default* font size has been set up to be?
>
> No! It is the reader’s preferred font size — the size that
> the reader has chosen in his browser.

Forgive me, Andreas, but there are readers -- I am one, and I know at least
one other -- who've never bothered to chose a font size in their browsers.

Reader has chosen *no* preferred font size, ergo 4em in relation to *what*?
Surely in relation to some browser-default font-size, no? Or ... ?

Thanks for whatever further clarifications I obviously require, and cheers,

Jukka K. Korpela

unread,
Dec 29, 2011, 5:50:31 PM12/29/11
to
2011-12-30 0:33, tlvp wrote:

> On Thu, 29 Dec 2011 18:37:48 +0100, Andreas Prilop wrote:
[...]
>> No! It is the reader’s preferred font size — the size that
>> the reader has chosen in his browser.
>
> Forgive me, Andreas, but there are readers -- I am one, and I know at least
> one other -- who've never bothered to chose a font size in their browsers.

Then you have chosen your preferred font size by doing nothing to change
the browser settings. Similarly, I have chosen to live in Finland by not
moving elsewhere – and this would be the case even if I had never
thought the matter.

> Reader has chosen *no* preferred font size, ergo 4em in relation to *what*?
> Surely in relation to some browser-default font-size, no? Or ... ?

If the user has done nothing to set the font size, and if a page does
nothing to set the font size, then the browser default applies. But this
need not mean “factory defaults.” The size might have been set by
someone else, e.g. by a friend who installed the browser and tuned it to
work well for the user, or by the company’s IT support, or by the person
who set up a computer in public premises.

The odds are that the size is then 12 points. It could be anything, but
in popular systems, 12pt is the factory default.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

dorayme

unread,
Dec 29, 2011, 7:37:12 PM12/29/11
to
In article <1g9jlgtigm3wq$.1opceqbok4z58$.d...@40tude.net>,
tlvp <mPiOsUcB...@att.net> wrote:

> On Thu, 29 Dec 2011 18:37:48 +0100, Andreas Prilop wrote:
>
> > On Thu, 29 Dec 2011, tlvp wrote:
> >
> >> So, no font size having yet been specified, *what* is your 4em
> >> taken in reference *to*?
> >> Nothing else having been specified yet, the point of reference is
> >> whatever the browser *default* font size has been set up to be?
> >
> > No! It is the reader’s preferred font size — the size that
> > the reader has chosen in his browser.
>
> Forgive me, Andreas, but there are readers -- I am one, and I know at least
> one other -- who've never bothered to chose a font size in their browsers.
>

Of course. The point is that there is usually a preference
setting, whether *you* set it or not. Perhaps you have never
looked at this? In Safari, for example, take a look at preference
settings for Appearance (on a Mac it is under Appearance).

I have a horribly unfinished thing about all this stuff of
zooming - must finish it - that has a bit of info on it:

<http://dorayme.netweaver.com.au/differentEyesights/textSpill.html
>

--
dorayme

tlvp

unread,
Dec 29, 2011, 8:12:16 PM12/29/11
to
On Fri, 30 Dec 2011 00:50:31 +0200, Jukka K. Korpela wrote:

> 2011-12-30 0:33, tlvp wrote:
>
>> On Thu, 29 Dec 2011 18:37:48 +0100, Andreas Prilop wrote:
> [...]
>>> No! It is the reader’s preferred font size — the size that
>>> the reader has chosen in his browser.
>>
>> Forgive me, Andreas, but there are readers -- I am one, and I know at least
>> one other -- who've never bothered to chose a font size in their browsers.
>
> Then you have chosen your preferred font size by doing nothing to change
> the browser settings.

I have *chosen* it no more than Moliére's character *chose* to speak prose.

> ... Similarly, I have chosen to live in Finland by not
> moving elsewhere – and this would be the case even if I had never
> thought the matter.

I, for one, would not use the active verb phrase "I have chosen" to
describe such a passive acceptance :-) .

>> Reader has chosen *no* preferred font size, ergo 4em in relation to *what*?
>> Surely in relation to some browser-default font-size, no? Or ... ?
>
> If the user has done nothing to set the font size, and if a page does
> nothing to set the font size, then the browser default applies. But this
> need not mean “factory defaults.” The size might have been set by
> someone else, e.g. by a friend who installed the browser and tuned it to
> work well for the user, or by the company’s IT support, or by the person
> who set up a computer in public premises.

Granted. No friend of my direct acquaintance here in my home town has ever
been aware one *could* "tune" a browser, let alone known hows to do that.

> The odds are that the size is then 12 points. It could be anything, but
> in popular systems, 12pt is the factory default.

There you go. That's what I was looking for. Thanks :-) .

And "Hyvää Uutta Vuotta!" (w/ thanks to Google if that's at all right :-) )

tlvp

unread,
Dec 29, 2011, 8:43:40 PM12/29/11
to
On Fri, 30 Dec 2011 11:37:12 +1100, dorayme wrote:

> In article <1g9jlgtigm3wq$.1opceqbok4z58$.d...@40tude.net>,
> tlvp <mPiOsUcB...@att.net> wrote:
>
>> On Thu, 29 Dec 2011 18:37:48 +0100, Andreas Prilop wrote:
>>
>>> On Thu, 29 Dec 2011, tlvp wrote:
>>>
>>>> So, no font size having yet been specified, *what* is your 4em
>>>> taken in reference *to*?
>>>> Nothing else having been specified yet, the point of reference is
>>>> whatever the browser *default* font size has been set up to be?
>>>
>>> No! It is the reader’s preferred font size — the size that
>>> the reader has chosen in his browser.
>>
>> Forgive me, Andreas, but there are readers -- I am one, and I know at least
>> one other -- who've never bothered to chose a font size in their browsers.
>>
>
> Of course. The point is that there is usually a preference
> setting, whether *you* set it or not. Perhaps you have never

Indeed, never looked at it. Not in NN, not in IE 5 or 6 or 7, not in
Safari, not in FF, not in Opera 7-11. Never had any need even to
*think* to look for any such thing :-) .

> looked at this? In Safari, for example, take a look at preference
> settings for Appearance (on a Mac it is under Appearance).

Hmm ... Appearance ... no such Menu heading.
Preference ... no such Menu heading, either. OK:
Help ... Search ... appearance ... List Topics ... appearance preferences

Ah, now we're getting somewhere. <quote>
Use the Appearance pane of Safari preferences to set fonts for webpages ...
</quote>

Great. *What* "Safari preferences"?

OK, mousing around the upper reaches of the Safari screen, far from the
menu bar, I find an eight-pointed punctured asterisk -- a compass rose --
that develops a tool tip bearing the words "Display a menu of general
Safari settings" -- 'zat it? -- OK, <Click!> -- Yep, there's Preferences...

Ah, yes, how intuitive, click a compass rose, or a punctured 8-pointed
asterisk, to be able to set your appearance preferences.
What an imbecile I am not to have known that from birth :-) .

... So, OK, yes, one can express one's appearance preferences there ... if
one can figger out that there's a *there* there in the first place :-) .

> I have a horribly unfinished thing about all this stuff of
> zooming - must finish it - that has a bit of info on it:
>
> <http://dorayme.netweaver.com.au/differentEyesights/textSpill.html

Unfinished? Maybe; but not "horribly" so; indeed, quite handy as it stands.

So thanks for bringing it to my attention, and keep on fighting the good
fight :-) ! Cheers, and all the best for this coming New *Leap* Year,

tlvp

unread,
Dec 29, 2011, 8:59:39 PM12/29/11
to
> one can figger out that there's a *there* there in the first place :-) . ...
>

GrrmbleMrphht! Mousing around the Safari Help area I find:

Choose Action menu > Preferences, and then click Appearance. (The Action
menu is near the upper-right corner of the Safari window, and looks like a
gear.)

I am dumbstruck! A "menu" that is excluded from the area all other menus
are listed in, and provided not by name but by Kanji -- an icon of a "gear"
that, in my addled vision, looks for all the world like a compass rose, or
a punctured, eight-pointed asterisk. Are we to be reduced to cave-wall
drawing once again, as we were, millenia ago, before we had written
language? This is progress? Why not simply "Actions", alongside "File",
"Edit", "View", "History", et al.?

[Oh, stop it, tlvp, enough curmudgeonry for one night!]

Cheers, all, -- tlvp

dorayme

unread,
Dec 29, 2011, 9:09:49 PM12/29/11
to
In article <1rnmv6oziqj3u$.sl9vc0l9teju$.d...@40tude.net>,
tlvp <mPiOsUcB...@att.net> wrote:

> On Fri, 30 Dec 2011 11:37:12 +1100, dorayme wrote:
>
> > In article <1g9jlgtigm3wq$.1opceqbok4z58$.d...@40tude.net>,
> > tlvp <mPiOsUcB...@att.net> wrote:
> >
> >> On Thu, 29 Dec 2011 18:37:48 +0100, Andreas Prilop wrote:
> >>
> >>> On Thu, 29 Dec 2011, tlvp wrote:
> >>>
> >>>> So, no font size having yet been specified, *what* is your 4em
> >>>> taken in reference *to*?
> >>>> Nothing else having been specified yet, the point of reference is
> >>>> whatever the browser *default* font size has been set up to be?
> >>>
> >>> No! It is the reader’s preferred font size — the size that
> >>> the reader has chosen in his browser.
> >>
> >> Forgive me, Andreas, but there are readers -- I am one, and I know at least
> >> one other -- who've never bothered to chose a font size in their browsers.
> >>
> >
> > Of course. The point is that there is usually a preference
> > setting, whether *you* set it or not. Perhaps you have never
>
> Indeed, never looked at it. Not in NN, not in IE 5 or 6 or 7, not in
> Safari, not in FF, not in Opera 7-11. Never had any need even to
> *think* to look for any such thing :-)

As a browser user, this is not unusual, so do not worry. But as a
participant in these usenet groups, especially on styling, you
will find it useful and even necessary to know about these things
as they are often taken for granted and lie as background
assumptions.

--
dorayme

dorayme

unread,
Dec 29, 2011, 9:32:59 PM12/29/11
to
In article <a2ugowmu85za$.1mya2plpbzq0w$.d...@40tude.net>,
tlvp <mPiOsUcB...@att.net> wrote:

> GrrmbleMrphht! Mousing around the Safari Help area ...

I should never have mentioned Safari! It is essentially a Mac
browser. On Windows, things about IE keep coming up when looking
at options and settings.

In the Mac world, most know where preferences are as all programs
follow very similar templates for menus. I agree, on the Windows
version, it is not intuitive. You go
Help/Options/Advanced/Accessibility and well, I would have to
study all this... Pass for now.

Try Firefox, it is clearer:

Tools/Options/Content and look down to Fonts & Colors, note the
size you can set as your normal, also note the Advanced button
there.

--
dorayme

Gus Richter

unread,
Dec 29, 2011, 10:42:20 PM12/29/11
to
On 12/29/2011 10:44 AM, Ben C wrote:
> Have you seen this one:
>
> http://www.infimum.dk/HTML/rotatingStar.html
>
> (All using borders). Of course you should all be using SVG for this sort
> of thing really, which, now I come to think of it, is a reason to use
> XHTML, because then you can mix your SVG with your XHTML in the same
> page.


My understanding, from what I've read and tried with HTML5, is that SVG
'files' can be embedded into HTML pages with either <embed>, <object>,
or <iframe> and SVG 'code' can also be embedded directly into HTML pages
(with an SVG namespace).

Is there any other reason to use XHTML?

--
Gus

Martin Honnen

unread,
Dec 30, 2011, 6:15:44 AM12/30/11
to
Ben C wrote:

> Have you seen this one:
>
> http://www.infimum.dk/HTML/rotatingStar.html
>
> (All using borders). Of course you should all be using SVG for this sort
> of thing really, which, now I come to think of it, is a reason to use
> XHTML, because then you can mix your SVG with your XHTML in the same
> page.

Well all the latest browser releases that support SVG support HTML5 by
now where you can mix HTML and SVG elements in a text/html document so
you don't necessarily have to use XHTML to embed SVG.

--

Martin Honnen --- MVP Data Platform Development
http://msmvps.com/blogs/martin_honnen/

Ben C

unread,
Dec 30, 2011, 11:53:14 AM12/30/11
to
Ah, didn't know you could do that last one. How do you do it? (Sorry I'm
not very good at all this *ML namespace fu)

> Is there any other reason to use XHTML?

Not for me if you can put SVG into HTML. Although of course there are
plenty of other reasons why people like XML which I don't disrespect.

Ben C

unread,
Dec 30, 2011, 11:53:36 AM12/30/11
to
On 2011-12-30, Martin Honnen <maho...@yahoo.de> wrote:
> Ben C wrote:
>
>> Have you seen this one:
>>
>> http://www.infimum.dk/HTML/rotatingStar.html
>>
>> (All using borders). Of course you should all be using SVG for this sort
>> of thing really, which, now I come to think of it, is a reason to use
>> XHTML, because then you can mix your SVG with your XHTML in the same
>> page.
>
> Well all the latest browser releases that support SVG support HTML5 by
> now where you can mix HTML and SVG elements in a text/html document so
> you don't necessarily have to use XHTML to embed SVG.

I didn't know that, thanks.

Gus Richter

unread,
Dec 30, 2011, 1:09:44 PM12/30/11
to
On 12/30/2011 11:53 AM, Ben C wrote:
> On 2011-12-30, Gus Richter<gusri...@netscape.net> wrote:
>> On 12/29/2011 10:44 AM, Ben C wrote:
>> My understanding, from what I've read and tried with HTML5, is that SVG
>> 'files' can be embedded into HTML pages with either<embed>,<object>,
>> or<iframe> and SVG 'code' can also be embedded directly into HTML pages
>> (with an SVG namespace).
>
> Ah, didn't know you could do that last one. How do you do it? (Sorry I'm
> not very good at all this *ML namespace fu)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SVG code directly into the HTML code</title>
<style>
.wrapper {width:60%;border:1px solid;margin:auto;padding:6px;}
h1,h2,p {font-family:Arial;}
svg {background:orange;height:100px;}
span {background:orange;display:block;}
</style>
</head>
<body>
<div class="wrapper">
<h1>SVG code directly into the HTML code</h1>
<p>This is an HTML5 document. There is a heading and a paragraph, both
in HTML. Then there is SVG code following showing an SVG image (Scalable
Vector Graphics) showing which version it's using and its SVG Namespace.</p>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2"
fill="red" />
</svg>
<h2>This is the source:</h2>
<pre>
&lt;!DOCTYPE html>
&lt;html lang="en">
&lt;head>
&lt;meta charset="utf-8">
&lt;title>SVG code directly into the HTML code&lt;/title>
&lt;style>
.wrapper {width:60%;border:1px solid;margin:auto;}
h1,h2 {font-family:Arial;}
p {font-family:Arial;}
svg {background:orange;}
&lt;/style>
&lt;/head>
&lt;body>
&lt;div class="wrapper">
&lt;h1>SVG code directly into the HTML code&lt;/h1>
&lt;p>This is an HTML5 document. There is a heading and a paragraph,
both in HTML.
Then there is SVG code following showing an SVG image (Scalable Vector
Graphics)
showing which version it's using and its SVG Namespace.&lt;/p>
<span>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1">
&lt;circle cx="100" cy="50" r="40" stroke="black" stroke-width="2"
fill="red" />
&lt;/svg></span>
&lt;h2>This is the source:&lt;/h2>
&lt;pre>
------
&lt;/pre>
&lt;/div>
&lt;/body>
&lt;/html>
</pre>
<p>NOTE: Firefox, nor the W3C HTML Validator, didn't care if the
Namespace and Version were included.</p>
</div>
</body>
</html>


tlvp

unread,
Dec 30, 2011, 2:21:18 PM12/30/11
to
I'm sure you're right, dorayme, and I'm glad (temporary snit
notwithstanding) to have had my eyes opened to them.

Cheers, -- tlvp

tlvp

unread,
Dec 30, 2011, 2:28:26 PM12/30/11
to
On Fri, 30 Dec 2011 13:32:59 +1100, dorayme wrote:

> In article <a2ugowmu85za$.1mya2plpbzq0w$.d...@40tude.net>,
> tlvp <mPiOsUcB...@att.net> wrote:
>
>> GrrmbleMrphht! Mousing around the Safari Help area ...
>
> I should never have mentioned Safari! It is essentially a Mac

Still, it's the browser that I have my newsreader open for following URLs
in newsposts :-) .

> browser. On Windows, things about IE keep coming up when looking
> at options and settings.
>
> In the Mac world, most know where preferences are as all programs
> follow very similar templates for menus. I agree, on the Windows
> version, it is not intuitive. You go

Deciphering an icon is about as intuitive for a Westernedr like me as
deciphering a piece of Kanji, or an epigram in classical Arabic, i.e.,
not at all :-) . If it's a menu heading, treat it as a menu heading, I say,
don't obfuscate it by presenting an icon in its lieu :-) .

> Help/Options/Advanced/Accessibility and well, I would have to
> study all this... Pass for now.
>
> Try Firefox, it is clearer:
>
> Tools/Options/Content and look down to Fonts & Colors, note the
> size you can set as your normal, also note the Advanced button
> there.

But that snit's over with by now, and my mind cleansed again :-) .

Thanks; and cheers, -- tlvp

Ben C

unread,
Dec 31, 2011, 4:35:38 AM12/31/11
to
On 2011-12-30, Gus Richter <gusri...@netscape.net> wrote:
> On 12/30/2011 11:53 AM, Ben C wrote:
>> On 2011-12-30, Gus Richter<gusri...@netscape.net> wrote:
>>> On 12/29/2011 10:44 AM, Ben C wrote:
>>> My understanding, from what I've read and tried with HTML5, is that SVG
>>> 'files' can be embedded into HTML pages with either<embed>,<object>,
>>> or<iframe> and SVG 'code' can also be embedded directly into HTML pages
>>> (with an SVG namespace).
>>
>> Ah, didn't know you could do that last one. How do you do it? (Sorry I'm
>> not very good at all this *ML namespace fu)
>
>
><!DOCTYPE html> [...]

Thank you very much.

Gus Richter

unread,
Jan 14, 2012, 7:12:50 AM1/14/12
to
On 12/31/2011 4:35 AM, Ben C wrote:
> On 2011-12-30, Gus Richter<gusri...@netscape.net> wrote:
>> On 12/30/2011 11:53 AM, Ben C wrote:
>>> On 2011-12-30, Gus Richter<gusri...@netscape.net> wrote:
>>>> On 12/29/2011 10:44 AM, Ben C wrote:
>>>> My understanding, from what I've read and tried with HTML5, is that SVG
>>>> 'files' can be embedded into HTML pages with either<embed>,<object>,
>>>> or<iframe> and SVG 'code' can also be embedded directly into HTML pages
>>>> (with an SVG namespace).
>>>
>>> Ah, didn't know you could do that last one. How do you do it? (Sorry I'm
>>> not very good at all this *ML namespace fu)
>>
>>
>> <!DOCTYPE html> [...]
>
> Thank you very much.

It would seem that the namespace in HTML Inline SVG is not required.

<http://slides.html5rocks.com/#inline-svg>

--
Gus

Gus Richter

unread,
Jan 15, 2012, 2:22:09 PM1/15/12
to

Chris Beall

unread,
Jan 17, 2012, 12:10:30 PM1/17/12
to
On Wed, 28 Dec 2011 18:54:28 -0500, dorayme <dor...@optusnet.com.au>
wrote:

> One day I was urgently needing a triangle

I found it, hanging out with some rather shady chartacters, at
http://tantek.com/CSS/Examples/polygons.html

Chris Beall

dorayme

unread,
Jan 17, 2012, 3:49:52 PM1/17/12
to
In article <op.v78nb...@chris-bealls-imac.local>,
I felt a rush of sympathy towards his pentagon, hexagon and octogan as
they show evidence of surgical horizontal bifurcation at certain zooms
in 'zoom text only' on my browsers. On mine, there are lines,
splitting the poor figures in two sections.

I think this is caused by his using 'text-bottom' for his vertical
alignment. Not sure why he used it, maybe his browsers liked it? Using
'middle' would have been better I think.

You do realise what this sort of thing means to a geometrical figure
of the reputation and standing of a pentagon etc. These are *named*
figures and deserve respect. Being split in two (or sometimes three in
the case of his octogan) in public would be humiliating.

--
dorayme

tlvp

unread,
Jan 17, 2012, 6:59:14 PM1/17/12
to
On Wed, 18 Jan 2012 07:49:52 +1100, dorayme wrote:

> Being split in two (or sometimes three in
> the case of his octogan) in public would be humiliating.

Well, a true octagon would certainly feel humiliated.
But a mere octogan? -- meh, less so :-) .

Cheers, -- tlvp

Chris Beall

unread,
Jan 18, 2012, 5:58:40 PM1/18/12
to
On Tue, 17 Jan 2012 15:49:52 -0500, dorayme <dor...@optusnet.com.au>
wrote:

> In article <op.v78nb...@chris-bealls-imac.local>,
> "Chris Beall" <Chris...@prodigy.net> wrote:
>
>> On Wed, 28 Dec 2011 18:54:28 -0500, dorayme <dor...@optusnet.com.au>
>> wrote:
>>
>> > One day I was urgently needing a triangle
>>
>> I found it, hanging out with some rather shady chartacters, at
>> http://tantek.com/CSS/Examples/polygons.html
>>
>
(snip)
>
> You do realise what this sort of thing means to a geometrical figure
> of the reputation and standing of a pentagon etc. These are *named*
> figures and deserve respect. Being split in two (or sometimes three in
> the case of his octogan) in public would be humiliating.
>

I'm afraid your sympathy is misdirected. On Opera, Safari, and Chrome,
the figures are intact. Clearly named geometrical figures have an
animosity for Firefox (or whatever else you are using to view them) and
they are simply trying to get its goat. (Which, of course, answers the
question of how to logically get from regular polygons to hoofed animals.)

At the time of this demo, I believe Tantek had limited browsers to play
with. His employer was still touting their (in)famous IE 6...

Cheers,
Chris

dorayme

unread,
Jan 18, 2012, 6:42:31 PM1/18/12
to
In article <op.v8ax3...@chris-bealls-imac.local>,
"Chris Beall" <Chris...@prodigy.net> wrote:

> On Tue, 17 Jan 2012 15:49:52 -0500, dorayme <dor...@optusnet.com.au>
> wrote:
>
> > In article <op.v78nb...@chris-bealls-imac.local>,
> > "Chris Beall" <Chris...@prodigy.net> wrote:
> >
> >> On Wed, 28 Dec 2011 18:54:28 -0500, dorayme <dor...@optusnet.com.au>
> >> wrote:
> >>
> >> > One day I was urgently needing a triangle
> >>
> >> I found it, hanging out with some rather shady chartacters, at
> >> http://tantek.com/CSS/Examples/polygons.html
> >>
> >
> (snip)
> >
> > You do realise what this sort of thing means to a geometrical figure
> > of the reputation and standing of a pentagon etc. These are *named*
> > figures and deserve respect. Being split in two (or sometimes three in
> > the case of his octogan) in public would be humiliating.
> >
>
> I'm afraid your sympathy is misdirected.

Is it now? My sympathy is not a magic pudding and I would hate to
waste it and have it run out when I need it! Let's see if you are
right though.

> On Opera, Safari, and Chrome,
> the figures are intact.

Nope, latest Opera, Safari, Chrome on a Mac show the fault I
mentioned. I did mention a fix, suggesting vertical-align: middle;
(even top or bottom!) rather than what he had. Shall I check on a
Windows XP set up?

--
dorayme

Chris Beall

unread,
Jan 18, 2012, 7:56:55 PM1/18/12
to
On Wed, 18 Jan 2012 18:42:31 -0500, dorayme <dor...@optusnet.com.au>
wrote:

> In article <op.v8ax3...@chris-bealls-imac.local>,
> "Chris Beall" <Chris...@prodigy.net> wrote:
>
>> On Tue, 17 Jan 2012 15:49:52 -0500, dorayme <dor...@optusnet.com.au>
>> wrote:
>>
>> > In article <op.v78nb...@chris-bealls-imac.local>,
>> > "Chris Beall" <Chris...@prodigy.net> wrote:
>> >
>> >> On Wed, 28 Dec 2011 18:54:28 -0500, dorayme <dor...@optusnet.com.au>
>> >> wrote:
>> >>
>> >> > One day I was urgently needing a triangle
>> >>
>> >> I found it, hanging out with some rather shady chartacters, at
>> >> http://tantek.com/CSS/Examples/polygons.html
>> >>
>> >
>> (snip)
>> >
>> > You do realise what this sort of thing means to a geometrical figure
>> > of the reputation and standing of a pentagon etc. These are *named*
>> > figures and deserve respect. Being split in two (or sometimes three in
>> > the case of his octogan) in public would be humiliating.
>> >
(snip)
>
>> On Opera, Safari, and Chrome,
>> the figures are intact.
>
> Nope, latest Opera, Safari, Chrome on a Mac show the fault I
> mentioned. I did mention a fix, suggesting vertical-align: middle;
> (even top or bottom!) rather than what he had. Shall I check on a
> Windows XP set up?
>

Hmmm, perhaps it's one of those Twilight Zone things...

My setup:
OS X 10.6.8 (snow leopard)
Firefox 9.0.1 (fails w/horizontal lines in pentagon (1), hexagon (1),
octagon (2)).
AHA! But only fails at certain zoom values (zoom text only), including
the default.
Opera 11.60 build 1185 (no lines)
Safari Version 5.1.2 (6534.52.7) (no lines)
Chrome 16.0.912.75 (no lines)
Amaya 11.3.1 (Dec 9 2009) (cubist art) (Yes, that one is down level)

My wife's:
Windows Version 5.1 (Build 2600.xpsp_sp3_gdr.111025-1629 : Service Pack 3)
Firefox 9.0.1 (fails at certain zoom values, not including the default)
IE Version 8.0.6001.187002IC (no lines)

The two systems have (surprise!) different displays.

So from here it looks like a rounding error bug in Firefox.
That doesn't account for your results, however. Look around. Do you see
dead people?

Vertical-align: middle indeed makes the lines go away (I only checked
Firefox on OS X).

Octogan - A heavy shoe for octuplets.

Chris Beall

dorayme

unread,
Jan 18, 2012, 8:50:42 PM1/18/12
to
In article <op.v8a3k...@chris-bealls-imac.local>,
Yes.

> Opera 11.60 build 1185 (no lines)

That is what I found first and was not expecting it in Opera because
of its zooming methods (a little complex, neither zoom nor zoom text
only as in say Safari or FF). But then I saw a line in the octogan but
for some reason (I was hallucinating or not looking at Opera) I cannot
reproduce this now!

> Safari Version 5.1.2 (6534.52.7) (no lines)

I have the exact same version and also the same OS as you and see
lines in all but the triangle and square. But one thing about
triangles and squares is this. They are very old and respectable
shapes and not given to flighty showy tricks unlike the pentagon. Who
can really trust the pentagon? I could tell you stories about
pentagons and octagons and as for the hexagon... don't get me started!


> Chrome 16.0.912.75 (no lines)

I have 17.0.963.38 beta and the lines are there at all zomm levels on
all the problem shapes.

> Amaya 11.3.1 (Dec 9 2009) (cubist art) (Yes, that one is down level)
>
> My wife's:
> Windows Version 5.1 (Build 2600.xpsp_sp3_gdr.111025-1629 : Service Pack 3)
> Firefox 9.0.1 (fails at certain zoom values, not including the default)
> IE Version 8.0.6001.187002IC (no lines)
>
> The two systems have (surprise!) different displays.
>
> So from here it looks like a rounding error bug in Firefox.
> That doesn't account for your results, however. Look around. Do you see
> dead people?
>

I see two nice kookaburras from my window, so handsome, nicer than
those in other streets.

> Vertical-align: middle indeed makes the lines go away (I only checked
> Firefox on OS X).
>

I checked on a few browsers.

--
dorayme

Swifty

unread,
Jan 19, 2012, 2:46:32 AM1/19/12
to
On Thu, 19 Jan 2012 12:50:42 +1100, dorayme <dor...@optusnet.com.au>
wrote:

>That is what I found first and was not expecting it in Opera because
>of its zooming methods (a little complex, neither zoom nor zoom text
>only as in say Safari or FF). But then I saw a line in the octogan but
>for some reason (I was hallucinating or not looking at Opera) I cannot
>reproduce this now!

I frequently get artifacts in my Opera browser window, pixels that
have not refreshed when the Opera window has resurfaced from under an
obscuring window.

The corruption is mostly horizontal or vertical lines.

During the period when this started happening (about 6 months ago), I
was updating both my video drivers (Intel Q45/Q43) and my level of
Opera as fast as I could, so I cannot now deduce what caused this
effect. However, Opera seems to be the only application that suffers
this problem, so draw your own conclusions.

I've tried reducing video accelerator settings, but the problem
doesn't vanish before the performance gets unacceptably slow.

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

dorayme

unread,
Jan 20, 2012, 3:31:31 PM1/20/12
to
In article <op.v8a3k...@chris-bealls-imac.local>,
"Chris Beall" <Chris...@prodigy.net> wrote:

> dorayme
...
> >

> > http://tantek.com/CSS/Examples/polygons.html
...

> > ...I did mention a fix, suggesting vertical-align: middle;
> > (even top or bottom!) rather than what he had.
> >
>
...

> So from here it looks like a rounding error bug in Firefox.
> That doesn't account for your results, however.
>

I am not sure it is one in this case, but, on this subject, they are
interesting to test for.

> Vertical-align: middle indeed makes the lines go away (I only checked
> Firefox on OS X).
>

I have another solution, I think better now. Remove altogether

.trapezoid { vertical-align: ...; }

and just add to .polygon a zero line-height.

.polygon {line-height: 0;}

I think this is better because it is more natural and clearer what is
happening. Line height is not something needed in CSS textless art so
it may as well be zero at the best of times and, at the worst of times
(as when traditional shapes like octogans are threatened with the
alarming bifurcations we have witnessed) its zeroicity is beneficial.

Another reason is this. Ben C once said there are only 6 people in the
world who understand vertical-height in CSS. I have re-investigated
his claim and cannot confirm as many as 6. But I know there are 21.9
in every million web developers (on average) who understand
line-height.

--
dorayme

dorayme

unread,
Jan 21, 2012, 1:07:39 AM1/21/12
to
In article <op.v8a3k...@chris-bealls-imac.local>,
"Chris Beall" <Chris...@prodigy.net> wrote:

> looks like a rounding error bug in Firefox.

About rounding errors in these sorts of figures, I think a vertical
fault in

<http://dorayme.netweaver.com.au/xmasTree/diamondVulnerable.html>

may be such an error, you need to try different zoom levels in FF (and
*some* other browsers too). It happens both in Zoom Text Only and Zoom
so something to do with browser calculations.

Here is a gem that seems not so vulnerable internally to such an
indignity.

<http://dorayme.netweaver.com.au/xmasTree/diamondPure.html>

--
dorayme

Swifty

unread,
Jan 21, 2012, 1:16:45 AM1/21/12
to
On Sat, 21 Jan 2012 07:31:31 +1100, dorayme <dor...@optusnet.com.au>
wrote:

>I know there are 21.9
>in every million web developers (on average) who understand
>line-height

I was going to lay claim to being the 0.9 of a developer, but realised
that I'm the 0.1 developer...

tlvp

unread,
Jan 21, 2012, 2:57:40 AM1/21/12
to
I can only shake my head in wonder and amazement ... . Cheers, -- tlvp

Ben C

unread,
Jan 23, 2012, 8:37:34 AM1/23/12
to
On 2012-01-20, dorayme <dor...@optusnet.com.au> wrote:
[...]
> Another reason is this. Ben C once said there are only 6 people in the
> world who understand vertical-height in CSS.

Six people who understand vertical-align and line-height of inline
boxes. Of the six two went mad, one died, and another forgot most of it.
The other two are Eric Meyer and Hakon Lie (who probably invented it).
0 new messages