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

101–110 of 473 posts

Re: Hardest problem in computer science: centering things

#101

Post by basil-rash »

hunter2_ wrote: post #42
basil-rash wrote: post #41

Funny that this doesn’t even mention the actual critical failure of CSS centering: data loss on all items overflowing to the left of the container. Items to the right can be scrolled into view, but items to the left are entirely inaccessible.

Is that any worse than an inability to scroll up, vertically negative, from the initial scroll position?

Yes, because content is almost never placed above the viewport. Do you have an example of that happening?

But I suppose the complaint might be able to be generalized to all items past the start of a main-axis centered flex-box. Doesn’t make the failure more excusable.

Re: Hardest problem in computer science: centering things

#102

Post by Inviz »

basil-rash wrote: post #41

Funny that this doesn’t even mention the actual critical failure of CSS centering: data loss on all items overflowing to the left of the container. Items to the right can be scrolled into view, but items to the left are entirely inaccessible.

margin: 0 auto; (or simply auto for two-axis centering) will not have that issue. For multiple things in line, gotta use :nth-child to apply margin-left: auto on first item in row, and margin-right: auto for last item.

Finally you can allow container to grow with the contents.

Re: Hardest problem in computer science: centering things

#103

Post by Inviz »

cdrini wrote: post #62
marcell wrote: post #14

> don’t ask why you need to remember four words instead of just horizontal/vertical, it’s still better than before The reason is "display: flex" can be a column or row. The "align-items" property describes alignment along the axis, so vertical for column and horizontal for row. The "justify-content" property is the other direction.

I wonder if something like this would've worked. I always mentally think of flex box as having a primary axis that's like a rope that runs through the container, and the children are stuck onto this rope. ``` display: flex; // The flex axis is the axis where items get added. So horizontal would add things to the right, vertical to the bottom flex-axis: horizontal; flex-axis-align: center; // Normal as used in math to…

CSS goes away from left/right in general. See inline-* and block-* family of properties. This is to support RTL and vertical writing modes easier.

Re: Hardest problem in computer science: centering things

#104

Post by dumbo-octopus »

bazoom42 wrote: post #95
Animats wrote: post #72

That's because CSS layout was designed by people who thought "float" and "clear" were a good idea, tables were bad, and, when in doubt, make it Turing-complete and dump the problem on someone else. 2D and 3D tools get this right. CAD programs, game engines, and animation programs are all far better at positioning things. They have far better layout engines and constraint systems. This is really a constraint problem.…

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…

This very website is built entirely on tables.

(which, unfortunately, is why is has terrible zoom support)

Re: Hardest problem in computer science: centering things

#105

Post by BuyMyBitcoins »

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

I’ve noticed these things all my life. Even as a young child I would point such things out and others would have trouble seeing it. Once I was diagnosed with autism, this tendency of mine made a lot more sense.

I’m curious if other people detect interrupted or irregular patterns so readily. It’s like there’s a part of my brain just looking for anomalies and I can’t turn it off.

Re: Hardest problem in computer science: centering things

#106

Post by Moru »

bazoom42 wrote: post #95
Animats wrote: post #72

That's because CSS layout was designed by people who thought "float" and "clear" were a good idea, tables were bad, and, when in doubt, make it Turing-complete and dump the problem on someone else. 2D and 3D tools get this right. CAD programs, game engines, and animation programs are all far better at positioning things. They have far better layout engines and constraint systems. This is really a constraint problem.…

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…

When people say not to use tables they mean for layout of the entire page

Re: Hardest problem in computer science: centering things

#107

Post by dumbo-octopus »

Inviz wrote: post #102
basil-rash wrote: post #41

Funny that this doesn’t even mention the actual critical failure of CSS centering: data loss on all items overflowing to the left of the container. Items to the right can be scrolled into view, but items to the left are entirely inaccessible.

margin: 0 auto; (or simply auto for two-axis centering) will not have that issue. For multiple things in line, gotta use :nth-child to apply margin-left: auto on first item in row, and margin-right: auto for last item. Finally you can allow container to grow with the contents.

`width: fit-content;` is a good tip. Still, it's annoying that the current behavior is the default.

I was not able to get the nth child variants to work:

    
      A
      B
      C
      D
    

    main {
      display: flex; flex-direction: row; justify-content: center;
    /*   width: fit-content; */
    }
    
    div {
      min-width: 400px; height: 300px; background-color: wheat; margin: 4px;
    }
    
    div:nth-child(1){
        margin-left: auto;
    }
    div:nth-last-child(1){
        margin-right: auto;
    }

Re: Hardest problem in computer science: centering things

#108

Post by outop »

bazoom42 wrote: post #95
Animats wrote: post #72

That's because CSS layout was designed by people who thought "float" and "clear" were a good idea, tables were bad, and, when in doubt, make it Turing-complete and dump the problem on someone else. 2D and 3D tools get this right. CAD programs, game engines, and animation programs are all far better at positioning things. They have far better layout engines and constraint systems. This is really a constraint problem.…

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, but for the case when you actually want to show tabular data which would appear like a table on the page.

Re: Hardest problem in computer science: centering things

#109

Post by ozim »

Animats wrote: post #72

That's because CSS layout was designed by people who thought "float" and "clear" were a good idea, tables were bad, and, when in doubt, make it Turing-complete and dump the problem on someone else. 2D and 3D tools get this right. CAD programs, game engines, and animation programs are all far better at positioning things. They have far better layout engines and constraint systems. This is really a constraint problem.…

I don’t think it was that tables were bad. They were too formulaic and too strict and it was hard to do something that would stand out.

With CSS it wasn’t dumping problem on the others, it was giving the freedom. Problem with freedom is that it is never free and you also have to fix additional problems that come with it.

Post reply on HN