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

421–430 of 473 posts

Re: Hardest problem in computer science: centering things

#421

Post by gofreddygo »

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

> it will drive you crazy forever

relatively . Till you take things into your own hands and fix that pesky button with extra padding on top. Huh how hard was that! Lazy devs.

You just entered the mystical world of undocumented browser behavior where every browser does its own thing. The button looks ok on chrome, but safari's borders are more round making that look still off. You won't back down, and take on this challenge, make it look great on chrome and safari too. Yay! Worth the 2 hours eh.

Up rears the monster of responsive design... it doesn't work well on safari on the phones now. Well it works for me you say, till you rotate your screen and the button is Gone !

You finally succumb and say screw it, i'll just stick with html and get back to scrolling hn.

Re: Hardest problem in computer science: centering things

#423

Post by littlestymaar »

lambdaxyzw wrote: post #393
littlestymaar wrote: post #176

Earlier quoted context omitted.

Fallback fonts are a legacy of the past though, in an era where everybody ships at least hundred of kilobytes of JS and images (when it's not tens of megabytes, but this is another topic…) there's no good reason to specify a font and hope it will be found on the customer's OS: ship the font you're using.

I'm probably in a tiny minority, but I just flat out disable third party fonts. Everything looks equally good to me and I save bandwidth. The only expression are image fonts, which render as squares - I share the author's frustration.

Third party fonts are a privacy nightmare, especially when you know who's the biggest third party out there. But there's no good reason to source the fonts from a third party either: you can host them by yourself and serve them with the rest of the website.

Now disabling custom fonts altogether makes sense of you are trying yo save bandwidth, but then you aren't mad if things don't properly align.

Re: Hardest problem in computer science: centering things

#424

Post by _gabe_ »

mike_hearn wrote: post #182
_gabe_ wrote: post #73

Earlier quoted context omitted.

> Meanwhile, more than one web developer has communicated to me in private that they hate CSS and barely understand it after years of using it professionally to make money They barely even understand it?? I think the biggest problem with CSS is the same problem plaguing C++ and other older languages. Cruft. If there was proper versioning and pieces of the language were deprecated in favor of modern techniques, it wou…

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 gotchas mentioned in their docs.

And I think vanilla CSS is not that bad. I definitely don’t think it’s bloody awful. Most wrappers around the language added variables and nesting. CSS now supports variables and I think it even supports nesting :)

There’s probably other features that could be good, but for a language that’s just meant to provide style metadata for my UI, CSS works fine.

Re: Hardest problem in computer science: centering things

#425

Post by whalabi »

Marlinski wrote: post #153

That bright yellow background imprinted my eyes for 5 minutes, there's other way to leave an impression than fucking up with my senses, like writing a clear concise article instead of a never ending list of examples interrupted with distracting fake mouse move. An horrible web experience through and through.

Not saying your opinion is wrong, but for some reason I found myself consciously liking the yellow a lot, which is rare for an article background color for me

Re: Hardest problem in computer science: centering things

#426

Post by worthless-trash »

TeMPOraL wrote: post #224
kqr wrote: post #165

Earlier quoted context omitted.

> I think it adds a little soul to it that will make me happy down the years. The word for this is wabi-sabi.

My OCD self: "At last, I found you, wabi-sabi , my archnemesis".

I imagine you draw a large breath and let out a contented sigh while a smile tugs at one side of your mouth.

Re: Hardest problem in computer science: centering things

#427

Post by telcal »

atrevbot wrote: post #347
lostlogin wrote: post #181

Earlier quoted context omitted.

Tiles. There is a correct way to install them. I don’t know how you decide what’s correct, but sometimes it’s centred, sometimes a full one on the left, or the right. Then you have the same scenario but top to bottom.

When we were building our house I built a tool[0] for exactly this problem so I could visualize how tiles would look w/ different arranging. Worked really well for both floor tile and tile on the shower walls [0] https://tilelayoutwizard.com/

I was looking for something like this when redoing my bathroom tiles but surprisingly couldn't find anything. I ended up using draw.io which worked but not that easily.

A few suggestions for your tool. Add millimeters as an option. I'm using 12"x24" tile for the floor but they're really 300mm x 600mm. I learned most 12"x24" are that size. Another thing I learned is with that size it's recommended to use a 33% offset pattern. This guy explains it well https://www.diytileguy.com/12x24-tile/

Re: Hardest problem in computer science: centering things

#428

Post by LudwigNagasena »

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…

The official terms for what you call the flex axis and the flex normal are the main axis and the cross axis.

https://www.w3.org/TR/css-flexbox-1/#box-model

Re: Hardest problem in computer science: centering things

#429

Post by mmis1000 »

aldousd666 wrote: post #380
mmis1000 wrote: post #135

Earlier quoted context omitted.

It's technically possible (although infeasible) with current web api though. You can draw texts to canvas, sample it, get the pixel value and find the true center yourself. But web also never guarantee that text on canvas is as the same as the one you see visually, so you can only find it out one by one.

You can draw a whole span or div that is invisible with fonts in it and everything off screen measure it. Delete it or then show it or move it or whatever. But I've done this before with JavaScript.

That don't work for font that have bounding box disconnected to visual. Like the article just mentioned.

Thus you need canvas if you absolutely need to figure out how bad is the bounding box of given font. Because it's the only way to get pixels in js.

Re: Hardest problem in computer science: centering things

#430

Post by davedx »

para_parolu wrote: post #353
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!)

And if you want to suffer more proceed to this design game https://cantunsee.space/

One of the first I got was a search input with and without border-radius; I selected the "wrong" answer (without border-radius).

That's not good or bad design, it's totally subjective. Stupid website IMO

Post reply on HN