0

I am working through accessibility issues. One of these issues relates to zoom. I want to prevent certain components, images and text from getting bigger as a user zooms in. Some of these are easy by setting a max-width: 5vw, but I cannot set a max font-size. Is it possible to prevent fonts from getting bigger as you zoom?

I can also set max-width and height on images, but a 400%, it disappears because I am using vw & vh.

Here is a screenshot at 400% zoom; enter image description here

You can see the AppBar and Sidebar. The content at the top should not be overflowing the Appbar, and the Sidebar is empty because its content has gotten bigger with zoom and is now hidden behind the main content section (slight gray zone).

Ciaran Crowley
  • 425
  • 1
  • 4
  • 18
  • Perhaps add the HTML and CSS in use here in your question so we can best assist you with you challenge. – Mark Schultheiss Jun 26 '23 at 15:47
  • 1
    Making text and images bigger is the base principle of a zoom. If you prevent it, you will create accessibility issues for some users. You should make your design in another way instead. However, note that no one will go up to 400%. Those who need so much zoom will probably use a dedicated zoom software such as ZoomText instead. – QuentinC Jun 27 '23 at 04:19
  • This answer states you can use viewport units: https://stackoverflow.com/a/24469476/15291770 – Harrison Jun 29 '23 at 09:32
  • Does this answer your question? [Keeping text size the same on zooming](https://stackoverflow.com/questions/24469375/keeping-text-size-the-same-on-zooming) – Harrison Jun 29 '23 at 09:32

1 Answers1

0

Edit: As @Red Mercury pointed out in comment, vb and vi units are also not affected by zooming.

You can set min/max font-size with min()/max()/clamp() like this:

p {
  font-size: clamp(1vw, 1rem, 2vw);
}
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error modi repudiandae, libero a doloribus neque natus eaque fugiat alias magnam sint, suscipit, dolor accusantium. Consequuntur vel officia blanditiis veniam quia.</p>
haolt
  • 353
  • 1
  • 9
  • 1
    You don't need the calc. clamp is enough I believe. Also if you want to base the font-size on the size of the container element instead of the viewport you can use vb: `font-size: clamp(3vb, 1rem, 5vb)` but keep in mind `vb` and `vi` are affected by the writing mode (I doubt you are supporting text flowing in vertical directions though?) – Red Mercury Jun 28 '23 at 22:35
  • @ Red Mercury: you're right, I forgot `calc()` can be use on its own. And thanks for telling me about the `vb`/`vi` unit, these are new and very interesting. – haolt Jun 29 '23 at 09:20