Marks one independently zoomable content area within a web view.
The platform scales a marked area in response to Ctrl/⌘++/-/0, Ctrl/⌘+wheel, and the tab
context menu; it remembers the chosen level per area and shows the zoom indicator. The view
itself writes nothing else to make zoom work.
Several elements may share one area id and zoom together. Areas must not nest — a marked element
found inside another marked element is ignored. Keep toolbars, dividers and headers outside the
marked element so they are not scaled along with the content.
Popovers and dropdown menus from this library that open from inside the element follow its zoom
and cap their own width and height to the pane, scrolling their content if it doesn't fit;
tooltips follow the zoom too but cap only their width, so a tooltip taller than the available
space is clipped at the pane's edge. Dropdown sub-menu content does not follow an area yet. A
pop-up rendered outside the element (beside the content, anchored to a position in it) belongs to
the area only when wrapped in ContentZoomAreaProvider.
This component renders a plain div in normal flow and applies no classes of its own — the
caller supplies whatever layout classes its parent expects.
Measurement caveat: inside a zoomed area, getBoundingClientRect() reports zoomed pixels, while
getComputedStyle(el).fontSize does not reflect the zoom factor. To read the factor itself, look
up the --platform-content-zoom-<areaId> custom property (--platform-content-zoom-main for the
unnamed area, --platform-content-zoom-default as a fallback) on the view's documentElement.
A view that marks no area at all is scaled as a whole at the Settings default zoom level and gets
no per-pane zoom control.
Marks one independently zoomable content area within a web view.
The platform scales a marked area in response to Ctrl/⌘+
+/-/0, Ctrl/⌘+wheel, and the tab context menu; it remembers the chosen level per area and shows the zoom indicator. The view itself writes nothing else to make zoom work.Several elements may share one area id and zoom together. Areas must not nest — a marked element found inside another marked element is ignored. Keep toolbars, dividers and headers outside the marked element so they are not scaled along with the content.
Popovers and dropdown menus from this library that open from inside the element follow its zoom and cap their own width and height to the pane, scrolling their content if it doesn't fit; tooltips follow the zoom too but cap only their width, so a tooltip taller than the available space is clipped at the pane's edge. Dropdown sub-menu content does not follow an area yet. A pop-up rendered outside the element (beside the content, anchored to a position in it) belongs to the area only when wrapped in ContentZoomAreaProvider.
This component renders a plain
divin normal flow and applies no classes of its own — the caller supplies whatever layout classes its parent expects.Measurement caveat: inside a zoomed area,
getBoundingClientRect()reports zoomed pixels, whilegetComputedStyle(el).fontSizedoes not reflect the zoom factor. To read the factor itself, look up the--platform-content-zoom-<areaId>custom property (--platform-content-zoom-mainfor the unnamed area,--platform-content-zoom-defaultas a fallback) on the view'sdocumentElement.A view that marks no area at all is scaled as a whole at the Settings default zoom level and gets no per-pane zoom control.