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.

My website's home page is meant to look like a star system, with a sun in the middle and planets (links to parts of the site) orbiting around it. That's how it is currently (here, scroll down and right a little).

What i'm struggling with now is making moons that can orbit planets orbiting the sun. I've tried moving a planet's inline CSS into a element around that planet's link and picture, and then adding another planet to that , but i can't figure out how to make it orbit around the parent planet instead of around the sun.

I did see this Codepen example, but it works differently from how the rest of my orbits are set up. It seems to rotate planets from an offset center, rather than moving them on a circular path without rotating them. And i couldn't figure out how to adapt its moon movement to my page.

Is there a good way to do what i'm trying to do, besides rewriting my page to work like the Codepen one? Thanks in advance.

I don't expect it to be possible, but it could be interesting to have different imagemaps for different frames of a gif or other animated image. For example, a large slowly spinning globe, that lets you click continents to go to more information about them. Is there a way to do this?

My site is currently pretty simple, but it still uses enough CSS that some parts of it look really bad in a browser like Links2 that doesn't support CSS. Most of what i'm doing with CSS can be done with plain HTML, it just doesn't look as good.

Is there a way to make a page try to load normally with CSS and whatnot, and then only load a simpler version with everything done in tables if the normal version can't load? Is my best option here to make normal and simple versions of every page?

Most of the links in my website (i haven't gotten around to all of them yet) have the size of the page they link to as a title, so you can see how big the page will be before you click the link. Is there an easy way to generate new titles for all my links based on what they link to, instead of doing it manually? Even better if it can include embedded files like images in the size preview.

I currently just edit my code in xed, my computer's built in text editor. I haven't looked into dedicated HTML editors yet, but i'd be open to trying one (that runs on Linux) if it can do this.

Thanks in advance.