4 ms·

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 co

by seg6 2mo ago

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.

wizzwizz4 2mo ago
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.
- seg6 2mo ago
  Fair enough, that criticism resonates. I've decided to keep this behaviour only in the extension and have reverted it from the blog. Thanks!
  - retrochameleon 2mo ago
    Thank goodness
stevage 2mo ago
> 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.
- nottorp 2mo ago
  I use Firefox with a vertical tabs extension open all the time. Occasionally (rarely, mind) I run into sites that don't bring their full content into view unless I hide the tabs list. Guess they think like the OP.
  - dotancohen 2mo ago
    I used Tree Style Tabs until recently, and never experienced this. Also now with the native vertical tabs I've never seen this.
    - nottorp 2mo ago
      It almost never happens. And when it does it may be some other broken calculation. But I did run into sites that I can only guess did their layout based on the whole window and had stuff go under the tree style tab.
nkrisc 2mo ago
Joke’s on you: my browser window isn’t centered.
- sebastiennight 2mo ago
  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
  - nkrisc 2mo ago
    1. Neither of my screen is to the side of the other. 2. The demo doesn't even work, the div stays centered in the viewport, not the program window when I open a side bar (Firefox). 3. Rarely does my browser even cover the center of my workspace, so it would be impossible to center anything in the center of my view without forcibly moving the program window from within the website.
    - sebastiennight 2mo ago
      Challenge accepted: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_moveto https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_... https://developer.mozilla.org/en-US/docs/Web/API/Window/moveTo https://developer.mozilla.org/en-US/docs/Web/API/Window/move...
scubbo 2mo ago
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.
wat10000 2mo ago
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.
danillonunes 2mo ago
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.
LocalH 2mo ago
Stop worrying about what's happening outside the viewport. Your website has no right to care or even know what's happening outside the viewport. Anyone got a Tampermonkey script or tiny extension to re-override this to make such sites actually center in the viewport, like I prefer?
hennell 2mo ago
The point of centering an element horizontally is to give equal space either side. Because you consider that to look best visually with your design. It has nothing to do with where it is in front of you, or anything other than placement in the space you have. Given a width for your content where should it sit. If you don't like the effect with a browser sidebar, don't limit the width with a browser sidebar.
1718627440 2mo ago
So the website also wants to my monitor, and chair position and the angle from which I am looking? Got it.

by seg6 2mo ago

wizzwizz4 2mo ago

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.

seg6 2mo ago
Fair enough, that criticism resonates. I've decided to keep this behaviour only in the extension and have reverted it from the blog. Thanks!
- retrochameleon 2mo ago
  Thank goodness

stevage 2mo ago

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

nottorp 2mo ago
I use Firefox with a vertical tabs extension open all the time. Occasionally (rarely, mind) I run into sites that don't bring their full content into view unless I hide the tabs list. Guess they think like the OP.
- dotancohen 2mo ago
  I used Tree Style Tabs until recently, and never experienced this. Also now with the native vertical tabs I've never seen this.
  - nottorp 2mo ago
    It almost never happens. And when it does it may be some other broken calculation. But I did run into sites that I can only guess did their layout based on the whole window and had stuff go under the tree style tab.

nkrisc 2mo ago

Joke’s on you: my browser window isn’t centered.

sebastiennight 2mo ago
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
- nkrisc 2mo ago
  1. Neither of my screen is to the side of the other. 2. The demo doesn't even work, the div stays centered in the viewport, not the program window when I open a side bar (Firefox). 3. Rarely does my browser even cover the center of my workspace, so it would be impossible to center anything in the center of my view without forcibly moving the program window from within the website.
  - sebastiennight 2mo ago
    Challenge accepted: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_moveto https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_... https://developer.mozilla.org/en-US/docs/Web/API/Window/moveTo https://developer.mozilla.org/en-US/docs/Web/API/Window/move...

scubbo 2mo ago

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.

wat10000 2mo ago

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.

danillonunes 2mo ago

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.

LocalH 2mo ago

Stop worrying about what's happening outside the viewport. Your website has no right to care or even know what's happening outside the viewport. Anyone got a Tampermonkey script or tiny extension to re-override this to make such sites actually center in the viewport, like I prefer?

hennell 2mo ago

The point of centering an element horizontally is to give equal space either side. Because you consider that to look best visually with your design. It has nothing to do with where it is in front of you, or anything other than placement in the space you have. Given a width for your content where should it sit. If you don't like the effect with a browser sidebar, don't limit the width with a browser sidebar.

1718627440 2mo ago

So the website also wants to my monitor, and chair position and the angle from which I am looking? Got it.