Same. Thank heavens the website doesn't know the position of the browser's window in respect to the screen it's on.
Wait until they realize that on mobile they can use accelerometer data to keep the element in the same position in space across translations of the device.
I mean, this could have applications, if you need to be facing a certain direction to read the content. While the Silicon Valley is merely a figurative Mecca for all things tech, Apple could require people to be facing Cupertino if you want to watch a WWDC stream :D
The point of centering an element horizontally is to make sure that the content you’re viewing is directly in front of you. Browsers with a sidebar shift the content to the right, assuming the sidebar is on the left, which I’ve come to dislike! Others have expressed the same preference, hence this little snippet on my website.
Joke’s on you: my browser window isn’t centered.
Ah but see, exploiting a Chromium API has let us know you've got this second screen on the side, so we're centering the div on your overall work space.
PS: if you switch from the touchpad to a wireless mouse, we'll move the div accordingly
hah the pointer trick is clever. tbh ive been living with everything looking 5px off for years and just... accepted it. does this work with vertical tabs in firefox?
margin:0 auto is the (probably incorrect) incantation I have always reached for
That's fine but it only centres horizontally. Usually when people talk about "the div centring problem" they mean x and y, dead centre (as this article is).
The article only seems to very briefly mention the vertical axis, with pretty much all of it focusing on interactions with the sidebar (which only affects the horizontal width).
As a rule, you should not add functionality to a website to compensate for browser misfeatures. People who want the browser to work differently can get a different browser: that's why we call them "user agents". Making the web all complicated like this mainly serves to make it harder for people to use alternative browsers, or for browsers to change their misfeatures without breaking compatibility.
Fair enough, that criticism resonates. I've decided to keep this behaviour only in the extension and have reverted it from the blog. Thanks!
I'm confused about why this website is using less than half of my window for content. I understand wanting some margins, but a third of my window on each side seems pretty egregious. At least it's centered though!
Screenshots would be helpful, because (you may be surprised to learn that) it is not entirely obvious which mode of behavior is supposed to be "wrong". Anyway, I wouldn't say it currently behaves nicely (like something I would like to reuse anywhere whatsoever). Tested on Firefox opening Bookmarks on the left. First off, there is this ugly flicker, as browser first renders the "wrong" version, then your JS "fixes" it…
I’ve added GIFs showing the intended behavior. The brief movement doesn’t bother me, opening or closing a sidebar already resizes the webview and causes pages to reflow in the browsers I use. Ending in the wrong state after repeatedly toggling it is a bug. And yeah, if you prefer viewport centering, there’s no reason you’d want to use the extension.
Not trying to argue you out of your preference, but trying to understand it: Why would you want to be able to accidentally hide parts of the page by having a sidebar open, or extended too far? I don't understand why the page should pretend to take up the whole window and ignore that it does truly live in just a viewport. I get why aesthetically it might be pleasing, but isn't that pretty short-lived when faced with serious practical drawbacks?
Same. Thank heavens the website doesn't know the position of the browser's window in respect to the screen it's on.
There's several web APIs for browser window positioning, like screenX/Y[0] (which is what OP uses), which allows for those classic pop-up based browser games from over a decade ago, like Browser Ball.[1] [0]: demo: https://mdn.github.io/dom-examples/screenleft-screentop/ [1]: https://romanbaiocco.github.io/browser-ball-reloaded/
For this to work, the browser itself would have to know where its window is placed on the screen. Not all platforms provide such information.