![]() ![]() When users enlarge content on the laptop or desktop, the resolution goes down. Each of the devices has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance. The letter projected onto the retina remains the same size even though the absolute size of the letter on different displays (phone, tablet, laptop and desktop) is quite different. 1 above, each vertical line shall represent a 16px letter. What counts is not the absolute size of text, but the relative size depending on the viewing distance and display resolution. 1: A letter of the same CSS pixel size on different displays with different resolutionsĭifferent types of display are typically used at different viewing distances. It means four times the default width and four times the default height. ![]() It should be noted that 400% applies to the dimension, not the area. The width of 320 CSS pixels exactly corresponds to a desktop browser window set to a width of 1280px and zoomed in to 400%. This value lines up with the reported viewport width of small displays of common mobile devices. The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Importantly, these breakpoints are not only triggered by narrower viewports, but also when users employ the browser zoom function to zoom into the page. It is enabled by CSS media queries which reformat the web content for different viewport widths (at particular break points) in order to provide optimised layouts for mobile devices such as tablets or smartphones. Supporting the reflow of content is also known as 'Responsive Web Design'. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available. When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. User agents for technologies such as HTML/CSS, PDF, and ePub have methods for reflowing content to fit the width of the window (viewport). For example, zooming into a vertically scrolling page should not cause content to be hidden to one side. It is also important that content is not hidden off-screen. ![]() Tracking is following along lines of text, including getting from the end of one line to the beginning of the next line.Īvoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because such scrolling signiicantly increases the effort required to read. Enlargement enables perception of characters. When the browser zoom is used to scale content to 400%, it reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary.įor people with low vision, enlarged text with reflow enables reading. The intent of this Success Criterion is to support people with low vision who need to enlarge text and read it in a single column. ![]() Understanding Reflow Understanding Reflow Intent of this Success Criterion ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |