Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Hardest problem in computer science: centering things

tonsky.me

Post reply on HN
Print view View original

431–440 of 473 posts

Re: Hardest problem in computer science: centering things

#431

Post by davedx »

coldtea wrote: post #199
bazoom42 wrote: post #95

Earlier quoted context omitted.

It is a weird myth that CSS somehow discourages tables. CSS have supported styling html tables and ‘display:table’ (allowing a table-like layout without html-tables) for 25 years. Float and clear was grandfathered into CSS since they were added to HTML by Netscape. They are fine for their intended purpose: placing images in a text and have the text flow around. Other positioning systems you mention does not solve the…

> It is a weird myth that CSS somehow discourages tables. CSS have supported styling html tables and ‘display:table’ (allowing a table-like layout without html-tables) for 25 years. Not a myth in any way shape or form. Tables for layout (not tables in general) were discouraged with various arguments in favor of "float/clear", even decades before a sane substitute (grid/flex) was available. > Other positioning systems…

Meh, discouraged by some bloggers, sure. Those of us doing web development in that time (I built some pretty large websites in the days before flexbox) ignored obviously overbearing advice like that. I still occasionally use tables for layout, even when something isn't 100% a grid of data. Granted those cases are quite rare and generally flex is the right solution.

Re: Hardest problem in computer science: centering things

#432

Post by davedx »

coldtea wrote: post #292
bazoom42 wrote: post #265

Earlier quoted context omitted.

CSS never recommended float/clear as an alternative to table-based layout. CSS had ‘display:table’ for when you needed a tabular layout without the semantic baggage of the table-tag.

CSS is just a language + words of paper spec. CSS, as in "CSS evangelists", influential web designers, guidelines in web development resources, books, and so on, recommended and advocated for the use of clear/float. You might not have been there, but float layout was a big thing back then, and everybody was guilt-pressured to use that - neither tables, nor "display: table" (which was used by some, but also discourage…

> everybody was guilt-pressured

What, no? I did a lot of web development in those days and read a lot of blogs. You just needed to filter out anyone who was obviously over-opinionated and lacked any nuance. Most pragmatic people used tables and didn't feel guilty about it. If you delivered working software with a decent UX, why on earth would you care what some shouty internet person said??

Re: Hardest problem in computer science: centering things

#433

Post by davedx »

dspillett wrote: post #231
bandrami wrote: post #210

Earlier quoted context omitted.

I absolutely remember a ton of pieces about how we all needed to stop using tables (and 1x1 transparent gifs, too) for page layout because CSS was The Right Way

The issue is people taking “tables are bad for non-tabular layout” and just remembering the first three words. People like stark binary yes/no rules, so “tables are bad” was born and spread widely. If your layout is intended to be a table, then a table (styled with CSS) is the way to go, otherwise use semantic HTML (styled with CSS) and you will (in theory) have an easier time making the design work well at different…

Exactly this. People need to think critically and not just blindly follow whatever some popular bloggers are saying.

It's the same today though - half of HN is utterly convinced rebellious technologies like HTMX are going to save us from the evil of front-end libraries. People adopt guides or entire technologies without ever actually building something significant with them.

Re: Hardest problem in computer science: centering things

#434

Post by davedx »

namaria wrote: post #138
bluprintz wrote: post #77

Earlier quoted context omitted.

I've heard this described as inherent complexity versus accidental complexity. Inherent complexity (due to difficult real-world constraints) is fine. Accidental complexity, like that caused by overcomplicated tools or architectural decisions, just feels bad.

And then you have weaponized accidental complexity, aiding cv-driven development and vendor lock-in (which are really the same sort of thing).

Hey, leave next.js, react router and vercel alone!

Re: Hardest problem in computer science: centering things

#435

Post by prmoustache »

Maxion wrote: post #98
dr_kiszonka wrote: post #78

Don't read this article, if you are not in web dev. Once you start seeing it, you can't stop seeing it, and it will drive you crazy forever. It is the same for noticing misalignment, recognizing color oversaturation, high quality speakers/headphones, etc. (It is a good article!)

The same happens when you: - Install flooring - Install trim in your own home - Build / install cabinets You will now see: - Odd flooring patterns and uneven floors - Know what it looks like when trim isn't coped - Uneven gaps between doors

Bicycle handlebars and brake levers alignement. This can drive you crazy...yet nobody has 2 arms the same length so perfect alignment shouldn't even matter that much.

Re: Hardest problem in computer science: centering things

#436

Post by thejohnconway »

bazoom42 wrote: post #373
thejohnconway wrote: post #279

Earlier quoted context omitted.

"CSS" (not sure what you're referring to here, the standards bodies?). Endless articles from the mid 2000s kept saying tables bad, here's how you layout without tables. All of them used floats for layout, not display:table. Partly I suppose this was because IE didn't support it until 2009, I think. Nearly all layouts people actually want are table-like, and I think CSS really was misguided in its text-flow as layout…

> Nearly all layouts people actually want are table-like, and I think CSS really was misguided in its text-flow as layout approach. I think this is the core misunderstanding in this discussion. CSS 2 supported both text-flow and tabular layout and both layout models were reverse-ingeneered from how Netscape rendered HTML. There is this weird idea that CSS is somehow opposed to tables or tabular layout, while a signif…

I don’t think there’s much of a misunderstanding here. There are historical reasons why CSS was so weak on layout for so long, but there’s always reasons. To understand what was missing look at what they’ve added (flexbox and grid). I don’t like the implementation of either, but they are in the right space.

Re: Hardest problem in computer science: centering things

#437

Post by mike_hearn »

_gabe_ wrote: post #424
mike_hearn wrote: post #182

Earlier quoted context omitted.

JavaFX uses a dialect of CSS so that's not necessarily a great example. It's also somewhat simplified compared to normal CSS, for example, the way layout works is more normal for GUIs (containers that implement different constraint systems). For things like theming your UI it works pretty well. I've done web CSS and JavaFX CSS and for app GUI I'd much rather use the latter. For nicely styled documents with good typog…

I misspoke in my comment and must have used Swing more than JavaFX (I’ve used both, but forgot which one I primarily used, this was 8 or 9 years ago and a short job). Either way, I really don’t like when only a subset of the language is supported, because then it becomes a constant guessing game of whether or not something is supported. In the case of JavaFX, there are a few features not supported and a couple gotcha…

It's not really a subset, more like a dialect. It has some features that web CSS doesn't, for instance. Some things like animations use the same ideas and APIs but there just isn't a CSS DSL for it, you code up timelines and keyframes in the host language (usually but not always Java).

The problems with CSS are more around the high levels of inconsistency, difficulty making it fast, lack of modularity and the fact that if you make a mistake either nothing happens with no error, or you get visual corruption. It's just an extremely frustrating technology to work with, especially if you only use it occasionally. Although the article talks about font metrics a lot, a big part of why centering things is so hard is thanks to CSS and its legacy which is why it opens with that. Every time I do web design I discover that the current best practice has changed, and there are dozens of new properties with similar names to existing properties which don't seem to work or can only be used in combination with other properties.

Re: Hardest problem in computer science: centering things

#438

Post by Etherlord87 »

LudwigNagasena wrote: post #35
mckn1ght wrote: post #7

> That’s exactly why people love web programming so much. There’s always a challenge. LOL, these examples are exactly why I got out of web programming. Thankfully I never had to deal with any of the modern frameworks. I was getting hot flashes just scrolling through this page.

I am not even sure whether the sentence you quoted is genuine or sarcastic.

I'm pretty sure it was irony.

Re: Hardest problem in computer science: centering things

#439

Post by strogonoff »

dsego wrote: post #186
strogonoff wrote: post #127

Earlier quoted context omitted.

> Somw people like to think centering things is taking the bounding box of the visible pixel and centering the center of the bounding box. That was my naive understanding for probably my first year at the uni. It got cleared up fairly quickly. I imagine there can be typesetting/layout styles where this holds, but I would classify them as niche (maybe brutalism or something like that). Funnily enough, in the very firs…

This vertical centering of text in buttons is more noticeable when there is an icon next to it. But it drives me crazy that the default is not to center around the cap and baseline. This is what I usually see in figma designs and it looks the best, but it's not simple to apply in html & css.

If the button is not in all caps, i.e. the first letter is substantially taller, then aligning by baseline & cap would make the text as a whole look too low (depending on x-height).

Icons can be less ambiguous, but still it depends on the shape and white space within one and the interplay with text label.

I think it all depends on your vision and its consistency.

Re: Hardest problem in computer science: centering things

#440

Post by numpad0 »

Maxion wrote: post #98
dr_kiszonka wrote: post #78

Don't read this article, if you are not in web dev. Once you start seeing it, you can't stop seeing it, and it will drive you crazy forever. It is the same for noticing misalignment, recognizing color oversaturation, high quality speakers/headphones, etc. (It is a good article!)

The same happens when you: - Install flooring - Install trim in your own home - Build / install cabinets You will now see: - Odd flooring patterns and uneven floors - Know what it looks like when trim isn't coped - Uneven gaps between doors

For me it was 3D printing. My vision started to occasionally annotate and code-suggest on real world objects. I kind of wish I didn't realize just how much we're enabling M3 screws.
Post reply on HN