A sewing page that never closed its font size HTML tags

4 years ago by dada78641

In case anyone is interested, this is what it looks like on Internet Explorer 5 in Windows 9x: https://i.imgur.com/g668yBy.png

What's happening is that the <h3> tags are all nested, since they don't auto-close in this situation, and modern browsers define the <h3>'s size as "font-size: 1.17em;" which of course adds up over time. I'm not sure how IE5 interprets the page. Maybe I can get an older embedded version of Firebug to check.

I think it's important to not break even older websites even if they have totally busted HTML, but this is probably such a rare case that no one ever thought of it, and at this point it'd probably be much more disruptive to try and "fix" it.

4 years ago by MisterSandman

Of COURSE there's someone on Hacker News with a Windows 9x PC/VM lying around to prove what's going on in a decade old website.

4 years ago by detritus

I hate to be the one to say it - but if it was first tested on IE5, that's over two decades old. I really wish it were just the one!

4 years ago by commandlinefan

Makes you wonder just how many versions he went backwards through before he found the one that it rendered correctly on.

4 years ago by tomcam

I absolutely love that

4 years ago by eyelidlessness

The problem is that these older websites depended on lax HTML parsing behavior, which still exists but has since been standardized in extensive detail.

It’s quite likely this site was already broken in other browsers, or even other versions of IE. And really, it’s not even broken now, the content does render. It’s just difficult to use.

And it’s not as if there aren’t a slew of sites that render differently on Wayback for a variety of reasons. This is in no way meant to disparage the Internet Archive, but I don’t think it’s a reasonable expectation that a site hosted in a way it wasn’t set up by its creators will always accurately render the way it did in its original context.

4 years ago by urthor

I really want to know if you just had that VM lying around, ready to go haha.

And if so what godforsaken reason would you have for doing that.

4 years ago by goto11

The font-tags are getting unfairly blamed!

The increasing size is due to the unclosed <h3> tags combined with unclosed inline level tags. This is parsed into a nested structure, with h3's nested into h3's deeper and deeper. The font-size of h3 is defined as relative increase, so the nested h3-elements get increasingly larger size.

The effect can be reproduced with this HTML snippet:

     <h3><span>hello
     <h3><span>hello
     <h3>hello

Which is parsed as:

     <h3>
       <span>hello
         <h3>
            <span>hello
               <h3>hello</h3>
            </span>
         </h3>
       </span>
     </h3>

Usually a h3 would be automatically closed when a new h3 (or any block-level element) is encountered, but because of the unclosed inline element (span in the above example) it is instead parsed as a nested structure. In OP it is unclosed font-tags which cause the h3's to nest, but it has nothing to do with the semantics of <font> per se, it is just because they are unclosed.

So why did it look correct in old IE? I think this comes down to the built-in browser style-sheet. I suspect h3 is defined with an absolute font size in the IE browser style sheet which means nesting does not increase the size.

4 years ago by noduerme

I'm kinda just pulling this out of the swamp of 25-year-old web design knowledge, but the unclosed code on that page consists of <font> tags, which are long since deprecated, and those font tags have size="2" / size="-2" attributes. I'm pretty sure the old behaviour was that <font size="[signed int]"> affected the size relative to the parent in the same way that CSS "font-size:200%;" or "font-size:50%;" would do. So nesting them doesn't create any new block elements, but it modifies the font size within a <td> or <p> relative to the parent. Just at a look, that seems like the explanation for the increase in font size, in this admittedly odd document.

[edit] I believe the page would look as intended if each <font> tag overrode the prior unclosed <font> tag, rather than treating it as a parent, and that was probably how IE 6 interpreted it. In fact I think old browsers would auto-close </font> if you wrote a new <font>.

4 years ago by rasz

There are 189 "<font" and 189 "font>" on that page. This is not the problem. Its the h3 being rendered without automagic IE auto closing fixes prevalen in pre 2000 internet to F@@@ with Netscape users. Pages written by amateurs/idiots/generated with bad tools(/1) would render fine in IE despite not being valid HTML.

and guess what, this page was made with

    <meta name="generator" content="Microsoft FrontPage 5.0">

4 years ago by mattowen_uk

Digging in the darker crevices of my brain, I concur. Back in the day, before the HTML spec was tightened up, the <font> tag always took the base document font style as a starting point.

I wonder if internally, browsers now convert and parse old <font> tags as <style> tags which would explain the modern behaviour.

4 years ago by goto11

The <font size=...> tags are only in the top navigation bar and is not the cause of the increasing text size. The increasing text is due to nested <h3> elements, where h3 is defined to have a relative size.

If a font tag automatically closed a previous font tag, then you couldn't have nested font styles (e.g giving a word a different color than the containing text). But this have always been possible, otherwise the font element would be next to useless.

4 years ago by tdeck

There is a StackOverflow thread about this page and why it may have looked OK in older browsers: https://stackoverflow.com/questions/14787255/why-are-unclose...

4 years ago by brainlessdev

The OP of that question is Manishearth, from the Rust core team!

4 years ago by majewsky

I suppose he was working on Servo when looking into this sort of question.

4 years ago by gpvos

Sorry, I can't find where it discusses why it may have looked fine in the past, can you point me to it more precisely?

4 years ago by gpvos

Ah, found it in one of the earlier HN threads: https://news.ycombinator.com/item?id=7352391

4 years ago by nefitty

The image linked there doesn’t exist

4 years ago by ndkwj

It looks okay on internet explorer with compatibility view on.

4 years ago by gpvos

But, as has been asked many times, WHY?

4 years ago by ljp_206

I have this page backed up personally on my machine. I love it so dearly, whenever I find myself scrolling through it again I always end up cackling with laughter.

4 years ago by rgoulter

I didn't find it funny at first. Then it grew on me.

4 years ago by _pmf_

Shame on whoever downvoted you. This was hilarious!

4 years ago by itronitron

The improper tension is killing me and I can barely hold the thread.

4 years ago by SquibblesRedux

The obvious solution to the web page's problem appears at the bottom of the page:

"If a problem persists, we recommend that you contact Sewing and Embroidery Warehouse"

4 years ago by kijin

Yeah, that footer looks surprisingly normal. But I don't see a whole bunch of closing tags just above that part. Why did the font size suddenly revert to normal? Is there something that means "reset everything"?

4 years ago by lifthrasiir

A single `</h2>` is there. That caused the subsequent `</center>` match to the very first `<center>` tag, popping every nested element from the stack over the course.

4 years ago by dang

Past threads:

This website has a lot of unclosed h3 tags - https://news.ycombinator.com/item?id=7351838 - March 2014 (132 comments)

Don't forget to close your HTML tags - https://news.ycombinator.com/item?id=5194843 - Feb 2013 (11 comments)

4 years ago by jjice

I haven't thought about styling tags like `<center>` and `<font>` in quite some time, and I'm glad for it. CSS is quite the wonder and I'll never talk bad about it again after this reminder.

4 years ago by echelon

I miss the old web, because we had vision and dreams for grander technology back then.

Bolted on design took a front seat, but it shouldn't have been our focus.

Open-ended CSS enabled us to reinvent styling and designs over and over and over. We've spent countless hours as a species grappling with how to present information, and how to reinvent the wheel. (Every brand needs to feel special, every company needs a design system.)

If these hours had been spent on semantics and reusability, we might have arrived at a different future. Perhaps rich document sharing rather than a web that's about who can have the fanciest scrolling upvote attention grabbers.

There were some bold ideas in the semantic web, microformats, RSS/RDF. Imagine sharing news and articles like P2P, insightful comments being ranked and scored, interest graphs being cultivated to better you rather than get you to like/subscribe. Platforms as an open and extensible standard.

CSS, meanwhile, is a tool that's being used to position a smiling alien creature that tells you to log into the mobile version.

We focused on the wrong things and evolved in the wrong direction. Shiny and flashy distracted us from rigor and enlightenment.

4 years ago by BulgarianIdiot

You know, this is a great example how people will find a reason to whine about just anything at all.

We still have microformats, and you're for some reason you're ranting about web economy issues like "like/subscribe" that have absolutely nothing to do with CSS.

4 years ago by echelon

In an interlinked multidimensional state space optimization problem, it has everything to do with CSS and the focus on form over function. We stopped thinking about how to make information exchange better, and instead on how to make it look good.

How energy is spent, and where focus is concentrated, are absolutely a limited and frequently pooled together resource. We like to bet on the horses people are feeding. When everyone boards the same ship, it becomes difficult to build new ones. To fund or succeed at other ventures.

I wasn't whining, I was making an observation amongst my shared state space explorers and perhaps wanting for some stories or commentary that rhymed. You made the leap to something that's not quite a personal attack, but that is definitely meant to sting. Attitudes on the web are really starting to sour these days. Have you any idea of the suffering everyone goes through? Just how similar we are?

Persons are meant to question the status quo and past decisions. There shouldn't be anything wrong with that. We shouldn't feel our pride being beaten by words that critique, but should take things into consideration. Perhaps the outcome is to discard outright, but maybe there's a glimmer of truth worth integration.

If I were a whining, I wouldn't be spending every other cycle I have building to fit my vision. I just don't have the time, capacity, or capability to build it all myself.

I see a better connected world without tyrannical ad giants controlling and extracting from us, telling us how to think and feel to drive engagement. The preamble to our evolution to post-biological entities that will one day inherit the stars. In that limit, there's no need for CSS or whatever bullshit we deal with today. Everything is just a temporary bridge to the future, including our minds and bodies themselves. Is that cynical?