The heading offset content attribute allows us to offset heading levels for descendants.

This feature is brand new and currently available only in Firefox Nightly, behind a flag.

https://cyberpunk.lol/@vantablack/114756539405197662

The element is currently only available in Chrome 144+, but Mozilla and WebKit have positive positions on the new element, so it's likely they'll implement it as well.

I'm used to 1366x768 screens, and when I first started making my personal website it was based on that resolution… it wasn't until one day I checked it on a 1920x1080 screen that I noticed how weird the design got because of vertically centered elements and so… I made some @media (min-width: 1601px) hacks to scale some stuff so the site would look more or less the same on bigger resolutions, but it was a sloppy solution…

I made another site later, and I was worried about scaling, so I started using 1920x1080 resolution at 150% zoom (I have bad eyesight and struggle to read on 1920x1080, so I'm actually at 1280x720 now, but at least it's the same aspect ratio). For the site to scale, I started using viewport values for everything, including font sizes… but if the aspect ratio changes wildly, the site looks crappy :P

So right now I was banging my head around how to have a visually pleasing website for someone with bad eyesight like me, but still have it scale correctly on any resolution for mainstream usage (as I scale down for myself, lots of sites I visit get crumpled visual elements when they are using absolute positions, z-index, and so), and I decided to letterbox my site content and force the aspect ratio on any resolution so the site will always look the same, no matter the screen. I'm using JS to scale font-size according to the letterbox width, and all other elements will use % values… I don't know, but so far it's sounding like I just made the site future-proof as well (for new resolution changes). The site is scaling with window size, it sucks that you can't zoom it with the browser (so it might be bad for people with even worse eyesight, but I do plan to put a +- button for font-size though, what's comfortable for me to read might not be for everyone), but the normal zoom works on mobile...

This is a test page I just made (ratio at 16:8 to compensate a bit for taskbar and browser stuff): https://pirahxcx.neocities.org/aspectratiottest

What do you all think of the idea? Perhaps there was an easier solution, though?

cross-posted from: https://lemmy.bestiver.se/post/826297

Comments

cross-posted from: https://lemmy.blahaj.zone/post/34019743

https://codepen.io/GeorgeWL/full/oNWRQPx

One page on my website consists of a single large image (with absolute position and fixed width) and an imagemap. I just realized that if i shrink my browser window or try to view the page on any screen that's not the same size as mine, the image and map become desynchronized.

I don't think this would be a problem if i could make the imagemap use percentage or vw/vh units instead of pixels, but it doesn't seem to work that way. It will accept percentages or vw/vh for one of a rectangular hotspot's coordinates, even mixed, but apparently one coordinate has to be in pixels.

Does anyone know a way around this besides letting the image be bigger than the window it's in and making users with smaller screens scroll horizontally?

I'm mostly concerned with compatibility with Firefox v138, but more generally compatible solutions are better.

If it helps, the relevant code for the image is:

style="position:absolute; top:0vh; left:0vw; width:100%"

and the map is:

<map name="map"> <area shape="rect" coords="89,522,173,634" title="font compryption" href="inventions/compryption.htm"> </map> A normal imagemap, as far as i can tell.