Zoom the page

A page that is too small for a large monitor, or too large for a small one, needs a zoom. A text reader, a dashboard on a wall, and a toolbar for people who see poorly all ask for one. In lwjwae, Java sets the zoom of a window with one call. In this guide, a page has three buttons, and Java zooms the window in and out.

Zoom from Java

public class PageZoom {
  public static void main(String[] args) {
    try (Application application = Application.create()) {
      Window window =
          application.open(
              WindowParameters.builder()
                  .title("Zoom")
                  .size(new WindowSize(520, 250))
                  .resource("zoom/index.html")
                  .build());
      window.bind("zoom", step -> PageZoom.zoom(window, step));
      window.show();
      application.run();
    }
  }

  /** Zooms the window by a step of a quarter, or back to 100%, and answers the new zoom. */
  private static String zoom(Window window, String step) {
    double zoom =
        switch (step) {
          case "in" -> window.zoom() + 0.25;
          case "out" -> window.zoom() - 0.25;
          default -> 1.0;
        };
    window.zoom(Math.clamp(zoom, Window.MINIMUM_ZOOM, Window.MAXIMUM_ZOOM));
    return Double.toString(window.zoom());
  }
}

window.zoom(factor) takes a factor: 1 is 100%, 1.5 is 150%, and 0.75 is 75%. window.zoom() reads the zoom that the engine shows now. A factor outside Window.MINIMUM_ZOOM, 0.25, and Window.MAXIMUM_ZOOM, 5, throws IllegalArgumentException, and so does NaN, so clamp a value that you compute, as above.

The page calls the binding like any other:

document.querySelector("#larger").addEventListener("click", () => window.zoom("in"));
document.querySelector("#smaller").addEventListener("click", () => window.zoom("out"));
document.querySelector("#reset").addEventListener("click", () => window.zoom("reset"));

What zooms

The whole page zooms, the way the zoom of a browser does: text, images, and layout grow together, and borders and shadows with them. The page sees a smaller viewport in CSS pixels, so a responsive layout reacts: in the picture, innerWidth is 693 pixels at 75%, 520 at 100%, and 346 at 150% (Windows says 347: the engines round in different ways). A media query on the width, and resize events, see the same.

The zoom belongs to the window, not to the page. It stays through navigations, links to other origins included, and a window opened later starts at 100%.

Who can zoom

Only Java. A browser lets the user zoom with Ctrl and the wheel, and with Ctrl and the plus and minus keys; WebView2 does that by default. lwjwae turns it off there, so that the zoom is the same on every backend and a page can't end up at a zoom that Java didn't choose. To give the user keys, put zoom entries with accelerators in a menu (MenuItem.of(...)), and call window.zoom from them.

Platform	What zooms
Windows	The zoom factor of the web view
macOS	The page zoom of the web view, which needs macOS 11 or later
Linux, GTK 3 and GTK 4	The zoom level of the web view

Good to know

• The page has no call for the zoom: there is no lwjwae.zoom. A page asks Java through a binding, as above, when it wants the zoom changed.
• Read innerWidth for the size of the viewport at a zoom. The engines round it in their own ways, by a pixel.
• The zoom isn't remembered between runs. To keep it, save the factor in the store and set it again when the window opens.