[feat] zoom in and out functionality (ctrl/ctrl+shift + "=" and ctrl/ctrl+shift+ "-")

[pinnick]

Describe the problem

Browsers such as edge and chrome have a zoom in and out functionality with hotkeys mentioned in the title, and I would like to include that in my application with tauri, but the hotkeys aren't working for me.

Describe the solution you'd like

add the hotkey support

Alternatives considered

No response

Additional context

No response

[FabianLars]

tracking issue at tauri-apps/wry#388

[martpie]

It would seem the upstream has been fixed, I guess now it's just about extending the MenuItem enum and implementing what has been done on wry right?

I may help with that if this is begginer-friendly enough

[keiya01]

I think this issue is related to tauri-apps/wry#569 .
And it is work in progress in tauri-apps/wry#574 .

[candrewlee14]

Looks like the upstream issues this depends on have been resolved. What can I do to enable this?

[amrbashir]

even though it landed in upstream, tauri still needs to expose it.

[rajatkulkarni95]

Bumping this up. Any idea when we'd get this into the framework?

[Looky1173]

Bumping this up again! This would be a welcome addition to Tauri, mainly for accessibility concerns.

[salmenf]

Is there any workaround? I hope this gets added soon, would be great to have for accessibility.

[mxismean]

Can tauri add a new `zoom` configuration item in the tauri.conf.json configuration file. @FabianLars

This allows users to set the default zoom of the window

[mxismean]

A year has passed. I want to know how the progress of this bug is?
When can TAURI support Zoom?
@FabianLars

[abose]

In the meantime, there is a pure js based way to get Zoom working in Tauri.
using document.body.style.zoom = 1.5 from JS worked flawlessly in Windows, mac, and Linux Taui 1.5 builds. So there is a pure browser-based way to do this for now as its support in both Chromium (Tauri windows) and web-kit(Tauri mac/linux) (But not Firefox.)

So one could listen to the shortcut and do this Zoom JS thingy to make Zoom work in most cases. There are some caveats to this approach as iframes are not affected by Zoom and other things some edge cases wont work as expeced in some cases.

[phudtran]

Also looking forward to this for accessibility.

[zeenix]

In the meantime, there is a pure js based way to get Zoom working in Tauri.
using document.body.style.zoom = 1.5 from JS worked flawlessly in Windows, mac, and Linux Taui 1.5 builds.

But how can a user of an app do that?

[StenniHub]

In the meantime, there is a pure js based way to get Zoom working in Tauri. using document.body.style.zoom = 1.5 from JS worked flawlessly in Windows, mac, and Linux Taui 1.5 builds. So there is a pure browser-based way to do this for now as its support in both Chromium (Tauri windows) and web-kit(Tauri mac/linux) (But not Firefox.)

So one could listen to the shortcut and do this Zoom JS thingy to make Zoom work in most cases. There are some caveats to this approach as iframes are not affected by Zoom and other things some edge cases wont work as expeced in some cases.

This is not equivalent to zoom in browsers or in electron. For example some elements that would extend to window borders at 1.0 zoom level will cut off early if you reduce it through document.body.style.zoom.

[abose]

Hi all, managed to fix this by calling the webviews scale API from rust. See This pull request for the code changes needed(it's not much) phcode-dev/phoenix-desktop#162 .

After this , call the js zoom_window API.

     await __TAURI__.tauri.invoke("zoom_window", {scaleFactor:1.2});

Tested working in Windows, Linux, and mac.

[KaKi87]

How about reading the value, though ?
Because when the user presses Ctrl++/-, we need to increment/decrement the value, requiring knowing it beforehand.
Thanks

[abose]

How about reading the value, though ?
Because when the user presses Ctrl++/-, we need to increment/decrement the value, requiring knowing it beforehand.
Thanks

We use our own storage layer for persisting preferences as browser local storage is not reliable in tauri. You can test with local storage though where you start with 1 in a zoom jey stored in storage and increment zoom by .1 on ctrl+ keyboard shortcut and decrement on.keyboard minus. So we don't really have to read back the scaling factor back from rust layer, instead use localstorage at browser side.

[KaKi87]

That's unreliable as well, because there's no way to ensure that zoom isn't changeable by any other means.

[abose]

That is probably how chrome/browser internally handles the zoom scale storage too, someone has to store the zoom scale factor to restore it later. If not the webkit layer, then we do it at the application side. It is pretty reliable as long as your storage layer is reliable.

[KaKi87]

In Chrome, zoom can be changed in many ways : command line arguments, hamburger menu, Ctrl+wheel, Ctrl+keyboard...
So, it's stored somewhere all these inputs can be tracked.
So, in Tauri, storing this in the app would be unreliable as zoom will eventually be changeable from all these places as well.

[namduong-arbin]

Hi all, managed to fix this by calling the webviews scale API from rust. See This pull request for the code changes needed(it's not much) phcode-dev/phoenix-desktop#162 .

After this , call the js zoom_window API.

     await __TAURI__.tauri.invoke("zoom_window", {scaleFactor:1.2});

Tested working in Windows, Linux, and mac.

it worked for me. Thank a lot

[KaKi87]

Windows Only

Uh, why ?

[Legend-Master]

This API is only available in Windows webview2, but we can provide a polyfill as mentioned here #9352 (comment)