Live data from Hacker News

Hardest problem in computer science: centering things

tonsky.me

291–300 of 473 posts

Re: Hardest problem in computer science: centering things

#292

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. 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…

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 discouraged).

Re: Hardest problem in computer science: centering things

#294

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…

The reason for the advice against tables was that the "semantic web" was all the rage (probably mostly because Google wanted to make it easier to index stuff). If you have tabular data, using tables was just fine. The issue was with using it solely to control the graphical presentation without any semantic basis for putting it in the table. Same reason you don't use just to make the text bigger.

>The issue was with using it solely to control the graphical presentation without any semantic basis for putting it in the table.

There shouldn't be any semantic basis needed.

HTML is not a semantic data exchange format, was not designed to be (the pathetic handful of semantic HTML5 tags added to be used ad-hoc included), and it inevitably includes content, style, and behavior (js).

The semantics should belong to data intergchanged (and storage format), and the reusability should be on the data storage/query backend, not to the markup language.

Adding semantics to the markup duplicates the semantics already present in your DB or JSON API scheme or query server/storage in general.

Re: Hardest problem in computer science: centering things

#295

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!)

Hi I heard you might like to learn about keming.

I wish I had never heard of kerning! I wasn't even aware that I was sensitive to kerning issues until this abomination came into my house: https://th.bing.com/th/id/OIP.bdzKtgJ5MkGpA5iutzfTxQAAAA?rs=... Now, whenever I see that thing, I feel a sudden urge to throw it out of the window...

Re: Hardest problem in computer science: centering things

#296

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" (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…

Yeah there was a period of time when IE didnt support display:table and ARIA hints wasnt as developed. So if you wanted to create accessible web sites with nice layout you had to resort to weird hacks, often using floats.

Floats was never intended for that purpose though, it was just a desperate hack to get around IE limitations.

But html tables was not a viable alternative for organizations which was required to have accessible websites.

(Today I believe it is possible to create accissible html tables through ARIA hints, but that was not an option at the time.)

Re: Hardest problem in computer science: centering things

#297
post #108

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…

Before CSS people used to use tables, often nested, for all kinds of layout. Eg if your page had a header, a sidebar and a main text area, you would create a table with cells of the right relative widths, with invisible borders, and put each layout element in one possibly merged cell. This was essentially standard practice for a while. CSS allowed layouts like this to be done without tables. It still supported tables…

Funny thing is that it still easier, even today, to use a frameset rather for header, sidebar and main area rather than fiddle with the new grid system.

Re: Hardest problem in computer science: centering things

#298

It's just as hard in the real world: https://ftw.usatoday.com/lists/nc-state-texas-ncaa-portland-...

I think centering in general is a difficult thing. I wanted to mount an AC indoor unit over a window. Now, do I mount it center to the wall or center to the window which slightlty offset the center of my wall? I made the call to center it based on my wall. Now, 2 out of the 5 people that have came to my room asked me about why my AC unit is off-center. For them center is relative to the window and discussing AC unit…

I feel like centering against window is the obvious choice it's just so much more noticeable

Re: Hardest problem in computer science: centering things

#299
Since flex layouts are widly addopted I seriously never run into centering issues anymore. Either vertical and horizontal alignment is very easy. Also with dynamic font sizes/lengths. I honestly see more issues in performance, since nested flex layouts can cause quite some layout passes which are not always known to the developers, but noticable on older/slower phones.

Re: Hardest problem in computer science: centering things

#300
post #276

I mostly agree, but not entirely. The problem is that things that are lined up look nice from far away, and very close up, but not always when reading text. The Apple "Manage" button is the simplest to illustrate. You might think that just having equal vertical space above the M and below the g is the best, but when you read text you're also used to seeing letters stick out of the bottom of the line. So having the g…

You align by the space between cap-height and baseline. Always. It always looks good. Even for lowercase. You don’t need to think further. That’s it. That’s the solution

But then that won't be centred.
Post reply on HN