Agreed, both outcomes are bugs and neither is intended. The idea is simply that, content the site author intended to be horizontally centered stays literally centered on my screen when browser UI changes the viewport.
If I drag a browser window to the right, making it cover the right-hand half of my monitor, it serves no useful purpose for "centered" content to migrate to the left edge of the window (the physical midpoint of the screen).
Centered means centered within the virtual viewport, not the physical screen.
That results in the first outcome: the content is centered on the screen, which puts it under the sidebar, while there's perfectly good space being ignored off to the right of it.
It's a cute trick, please don't use it, this is one of many reasons why. If I have a sidebar open, it's because that space is not yours to care about.
Think about users who don’t maximize the window, for whom centering to the screen, not viewport, would just be broken. It’s right to center to the viewport, and right that you’re able to turn that into centering to the screen by maximizing. The issue, I think, is that you don’t like that the sidebar changes the viewport, and really want a popup menu. I think your browser might duplicate sidebar functionality in configurable toolbar button popups, have you tried that? Failing that, I think the right solution to this problem might be a browser extension.
This might be some kind of a weird requirement for a piece of art, but I would literally never expect a website to center a div according to the browser window instead of the viewport. It just looks wrong and feels wrong.
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]
Actually, they do, sort of. At least, if you use GLSL shaders. I remember some demo project using it in a way that made it appear that the website "sees" another window with the same website, which blew my mind when I saw it first. Cannot recall the name or anything else to locate it.
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
It's easy, you just need to hold your phone such that your eyes are pointed directly at the ads as they scroll up and down the screen. Thank you for consuming content.
Televisions used to have "sidebars", like a speaker on one side only, with some knobs co-located there also. Yet a test pattern would center in the picture tube, not the TV box.
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.
> The point of centering an element horizontally is to make sure that the content you’re viewing is directly in front of you.
That's an awfully big assumption. For starters, you're assuming that the browser window itself is centered on the screen, and that the device is centered in front of the user.
I don't think this is the point of centering an element horizontally at all, and the result you have created here is not at all what I as a user want.
I don't usually use browsers sidebars, but when I do I mentally compensate for it. The viewport is in fact the part of the web page I expect to be the full width, and what things should be centered on.
The same way the vertical centering counts the viewport height only, not the url bar and the tab bar.
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.
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
I salute your dedication to understanding and fixing a problem that bothers you - but I must add my voice to those who think that this is not a good design for general use. The viewport is the region within which content should be positioned, and thus within which they should be centred. By your logic, left-aligned content in a browser with a left sidebar should be deliberately covered.
This all sounds like a really elaborate way of not taking advantage of the fact that modern windowing operating systems don't require windows to be full screen, and allow you to position the sides of your browser window wherever you want them to be.
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. Second, there is some concurrency problem, as by opening and closing Bookmarks repeatedly I somehow managed to render both versions: centered to viewport and covered by sidebar.
And, yeah, as others have said, I also think that allowing sidebar to cover your webpage content is absolutely bogus and don't foresee myself wanting this behavior, ever. But that's up to you.
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.
I had no idea what this was talking about at first because I had JS blocked, so nothing special seemed to happen when I opened the bookmarks panel. This looks absolutely goofy. I don't know why you'd want the content potentially getting covered by unrelated UI elements.
> This looks absolutely goofy. I don't know why you'd want the content potentially getting covered by unrelated UI elements.
Here in Canada, the mobile website for anything related to Indian immigration (Indian passport, visa etc) is done via this absolutely goofy website with multiple levels of UI elements and popups covering the content. Have a look on mobile:
What's the substantial difference betweeen "browser added sidebar" and "the browser has allowed height and width of the window to be resized since the dawn of the web"?
See, I'm keeping my siidebar open most of the time, so I WANT it to cover the content that would otherwise be visible - said no one ever.
But yay, it's centered relative to the window now! God forbid the user tiles their windows, because it breaks the aesthetic the website author intended.
Am I the only person that loathes sidebars in browsers? Maybe it's because I've been using a browser since 1996, but my brain is deeply set in the idea that the space below the chrome 110% belongs to user space.
I've tried a few browsers with vertical tabs, and my brain keeps seeing them as part of the page itself. It's a very distracting and uncomfortable experience.
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).
I'm 55 years old. My eyes are not what they used to be and neither are my glasses. I also own a copy of "Usage and Abusage" but I'll pass on that. Click on story link. My laptop renders a page - OK its black text on a white background (thank you but I doubt its a deliberate boon) ...
... why on earth is the offering a "page" ie emulating a printed page? In portrait!
I'll accept that most people are not fixated about grammar, punctuation or basic decency: that's fine.
However a "page" in portrait that looks awful on a landscape screen is unpleasant. You can easily request my viewing parameters and adjust accordingly. It's even worse when you are dispensing advice about www page layouts.
Longer lines of text are harder to read. There's a reason newspapers, books, articles, etc are all vertical and often have a similar amount of words per line. It's easier to follow, scan, and find your place.
I’ll accept that not everyone likes a portrait page on a landscape screen, that’s a matter of taste. But if you’re going to invoke Usage and Abusage, grammar, punctuation, and "basic decency", it would help to identify an actual error. And perhaps write "it’s" correctly while doing so. I’m also unclear what moral failing you think an A4 aspect ratio represents.
The net result of what this site is doing seems to result in one of two effects when I open the sidebar, randomly:
1) the sidebar covers the content, while the content has blank space to the right, or
2) the content moves off the right edge of the screen, leaving a large blank space to its left.
Both of these are wrong. If I have a sidebar open, the site is now narrower, stop trying to be clever.
My immediate reaction to this is why is the browser giving the site this information, and could we stop.
Agreed, both outcomes are bugs and neither is intended. The idea is simply that, content the site author intended to be horizontally centered stays literally centered on my screen when browser UI changes the viewport.
This is a nonsensical goal.
If I drag a browser window to the right, making it cover the right-hand half of my monitor, it serves no useful purpose for "centered" content to migrate to the left edge of the window (the physical midpoint of the screen).
Centered means centered within the virtual viewport, not the physical screen.
That results in the first outcome: the content is centered on the screen, which puts it under the sidebar, while there's perfectly good space being ignored off to the right of it.
It's a cute trick, please don't use it, this is one of many reasons why. If I have a sidebar open, it's because that space is not yours to care about.
Think about users who don’t maximize the window, for whom centering to the screen, not viewport, would just be broken. It’s right to center to the viewport, and right that you’re able to turn that into centering to the screen by maximizing. The issue, I think, is that you don’t like that the sidebar changes the viewport, and really want a popup menu. I think your browser might duplicate sidebar functionality in configurable toolbar button popups, have you tried that? Failing that, I think the right solution to this problem might be a browser extension.
The author should not intend that, and if they do, my browser should do its best to put a stop to it.
I'm fairly certain you just replied to the author
The author referred to themselves in the third person, so I did the same.
I hope the author gets the point then.
This might be some kind of a weird requirement for a piece of art, but I would literally never expect a website to center a div according to the browser window instead of the viewport. It just looks wrong and feels wrong.
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/
Actually, they do, sort of. At least, if you use GLSL shaders. I remember some demo project using it in a way that made it appear that the website "sees" another window with the same website, which blew my mind when I saw it first. Cannot recall the name or anything else to locate it.
My guess is that you’re remembering this demo: https://xcancel.com/_nonfigurativ_/status/172732259457002734...
Yep, that's right.
The ability from this demo is Chromium-specific, needs extra permissions and has nothing to do with GLSL: https://developer.mozilla.org/en-US/docs/Web/API/Window_Mana...
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.
Translations? Not far enough, got to include rotations: https://developer.mozilla.org/en-US/docs/Web/API/Device_orie...
(And yes, CSS can rotate around all three axes, so you could make a div that resists rotating your device in addition to resisting translation...)
Wait, I have to hold my phone how in order to see the div? ಠ_ಠ
I assume you have to be facing the server...
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
Aww, looks like the magnetometer web API was abandoned: https://developer.mozilla.org/en-US/docs/Web/API/Magnetomete...
The same way Steve Jobs said to hold the iPhone.
It's easy, you just need to hold your phone such that your eyes are pointed directly at the ads as they scroll up and down the screen. Thank you for consuming content.
So the content falls down at 10 m/s^2 unless you're falling alongside it.
But the problem is, you can never quite catch up to it without a rocket.
position: hyperfixed;
Televisions used to have "sidebars", like a speaker on one side only, with some knobs co-located there also. Yet a test pattern would center in the picture tube, not the TV box.
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.
> The point of centering an element horizontally is to make sure that the content you’re viewing is directly in front of you.
That's an awfully big assumption. For starters, you're assuming that the browser window itself is centered on the screen, and that the device is centered in front of the user.
I don't think this is the point of centering an element horizontally at all, and the result you have created here is not at all what I as a user want.
I don't usually use browsers sidebars, but when I do I mentally compensate for it. The viewport is in fact the part of the web page I expect to be the full width, and what things should be centered on.
The same way the vertical centering counts the viewport height only, not the url bar and the tab bar.
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!
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
I salute your dedication to understanding and fixing a problem that bothers you - but I must add my voice to those who think that this is not a good design for general use. The viewport is the region within which content should be positioned, and thus within which they should be centred. By your logic, left-aligned content in a browser with a left sidebar should be deliberately covered.
This all sounds like a really elaborate way of not taking advantage of the fact that modern windowing operating systems don't require windows to be full screen, and allow you to position the sides of your browser window wherever you want them to be.
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. Second, there is some concurrency problem, as by opening and closing Bookmarks repeatedly I somehow managed to render both versions: centered to viewport and covered by sidebar.
And, yeah, as others have said, I also think that allowing sidebar to cover your webpage content is absolutely bogus and don't foresee myself wanting this behavior, ever. But that's up to you.
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.
I had no idea what this was talking about at first because I had JS blocked, so nothing special seemed to happen when I opened the bookmarks panel. This looks absolutely goofy. I don't know why you'd want the content potentially getting covered by unrelated UI elements.
> This looks absolutely goofy. I don't know why you'd want the content potentially getting covered by unrelated UI elements.
Here in Canada, the mobile website for anything related to Indian immigration (Indian passport, visa etc) is done via this absolutely goofy website with multiple levels of UI elements and popups covering the content. Have a look on mobile:
https://www.blsindia-canada.com/ottawa-jurisdiction/index.ph...
Meanwhile this website has learned how to break mouse scrolling.
What do you mean? On macOS Safari I see a scroll bar that I can drag with my mouse if I wish.
Scrolling the page with mousewheel/multitouch doesn't work unless the pointer is inside the white area
...appears it's been fixed since my original comment. There's still no scrollbar in the expected place on the side of my browser window though.
What's the substantial difference betweeen "browser added sidebar" and "the browser has allowed height and width of the window to be resized since the dawn of the web"?
You’ve effectively created a slide over sidebar. It’s an interesting hack to get there but IMO “should” properly be the domain of the browser.
See, I'm keeping my siidebar open most of the time, so I WANT it to cover the content that would otherwise be visible - said no one ever.
But yay, it's centered relative to the window now! God forbid the user tiles their windows, because it breaks the aesthetic the website author intended.
Am I the only person that loathes sidebars in browsers? Maybe it's because I've been using a browser since 1996, but my brain is deeply set in the idea that the space below the chrome 110% belongs to user space.
I've tried a few browsers with vertical tabs, and my brain keeps seeing them as part of the page itself. It's a very distracting and uncomfortable experience.
Websites should be thought of as VMS and shouldn't be trying to reverse engineer host state.
I think the scrollbar-gutter property helps with this. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
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).
I'm 55 years old. My eyes are not what they used to be and neither are my glasses. I also own a copy of "Usage and Abusage" but I'll pass on that. Click on story link. My laptop renders a page - OK its black text on a white background (thank you but I doubt its a deliberate boon) ...
... why on earth is the offering a "page" ie emulating a printed page? In portrait!
I'll accept that most people are not fixated about grammar, punctuation or basic decency: that's fine.
However a "page" in portrait that looks awful on a landscape screen is unpleasant. You can easily request my viewing parameters and adjust accordingly. It's even worse when you are dispensing advice about www page layouts.
Longer lines of text are harder to read. There's a reason newspapers, books, articles, etc are all vertical and often have a similar amount of words per line. It's easier to follow, scan, and find your place.
Some more on this below:
Optimal Line Length in Reading — A Literature Review (https://journals.uc.edu/index.php/vl/article/view/5765)
Practical Typography — Line Length (https://practicaltypography.com/line-length.html)
I’ll accept that not everyone likes a portrait page on a landscape screen, that’s a matter of taste. But if you’re going to invoke Usage and Abusage, grammar, punctuation, and "basic decency", it would help to identify an actual error. And perhaps write "it’s" correctly while doing so. I’m also unclear what moral failing you think an A4 aspect ratio represents.
There needs to be images on this
Centering a div? Impossible.
Jokes on you, I never learned and now LLMs just know how to do it instead.