platform-bible-react
    Preparing search index...

    Variable ContentZoomRootConst Experimental

    ContentZoomRoot: ForwardRefExoticComponent<
        HTMLAttributes<HTMLElement> & {
            area?: string;
            as?: "div" | "span";
            label?: string;
        } & RefAttributes<HTMLElement>,
    > = ...

    Marks an element that renders project text — scripture, note bodies, result snippets, resource text in its own font — so the platform scales it with the pane's content zoom.

    Mark the text, not the region around it. Buttons, inputs, filters, headers, badges, card frames and pop-ups stay outside every marked element and keep interface scale. Several elements may share one area id and zoom together, so a card, list or table view marks each text element with the same id; flowing, editor-like text keeps one marker around the text body. Areas must not nest — a marked element found inside another marked element is ignored.

    The platform scales marked elements on Ctrl/⌘++/-/0, Ctrl/⌘+wheel and the tab context menu, remembers the level per area and shows the zoom indicator; the view writes nothing else. A view that marks no area gets no content zoom unless the platform declares its web view type zoomable. Your view is zoomable only while at least one element carrying data-platform-content-zoom-root is rendered: the tab menu's zoom items, Ctrl/⌘ + +/-/0 and Ctrl/⌘+wheel appear and act only then. If your view shows nothing to zoom for a while (before a search, while loading), render an empty marked element so the controls stay available.

    Pop-ups opened from inside stay at interface scale; anchor them to live positions (useLivePopoverAnchor) so they open beside zoomed content.

    Renders a div by default and a span with as="span", in normal flow, with no classes of its own — the caller supplies whatever layout classes its parent expects. Library components that render project text mark it themselves inside a ContentZoomTextProvider; do not wrap such a provider's subtree in a ContentZoomRoot.

    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.

    <li>
      <Button onClick={goToVerse}>{verseRef}</Button>
      <ContentZoomRoot as="span" className="scripture-font">
        {snippet}
      </ContentZoomRoot>
    </li>;

    This export is unstable and may change shape or disappear without notice

    Settings

    Member Visibility