Setting Zoom at startup

[Giles]

I just wanted to share my experience with setting a default zoom level at startup.
This forum article was very helpful ‘keeping-zoom-level-between-sessions/64818.’

However when zooming the whole obsidian body I found that the editor drop down menu would pop up further to the right as the zoom increased. This made it disappear off the edge of the window for even modest zoom levels.

To get around this I individually zoomed a handful of elements of the page with a VAULT_ROOT.obsidian/snippets/zoom.css like this:

:root { --custom_zoom: 120%;}
div.prompt { zoom: var(--custom_zoom); }
div.menu-scroll { zoom: var(--custom_zoom); }
div.modal { zoom: var(--custom_zoom); }
div.horizontal-main-container { zoom: var(--custom_zoom); }

Also don’t forget to enable the new zoom.css file at the bottom of Settings->Appearance

[Giles]

More Detailed Notes on Zoom Issue

How To

• Create the file ~/PATH_TO_VAULT/.obsidian/snippets/zoom.css.
• make it look like this:

•   :root { --custom_zoom: 120%;}
    div.prompt { zoom: var(--custom_zoom); }
    div.menu-scroll { zoom: var(--custom_zoom); }
    div.modal { zoom: var(--custom_zoom); }
    div.horizontal-main-container { zoom: var(--custom_zoom); }
      ```
  
  

Go to Settings->Appearance and enable your new CSS file:

Now changes to --custom_zoom immediately affect your running obsidian instance and are persisted between restarts.

How I worked this out

• started with this post which recommends setting zoom level for the whole of obsidian like this

  • body { zoom: 120% }
    

• but realised that zooming the whole page caused the editor ... menu to pop up further to the right for each level of zoom and quickly disappear outside of the window frame
• So Hit Ctrl-Shift-I to bring up debug mode and then move the mouse around the Elements pane to work out which classes we want to zoom. I found the following:
  • div.menu-scroll:- the drop down menus, but NOT their frame div.menu this is the critical change as zooming div.menu causes the shift-right problem
  • div.prompt:- the command palette
  • div.modal:- modal dialogues except command palette
  • div.horizontal-main-container:- the main page, all panes
• NOTE: this may not be a comprehensive list so if you find anything else that needs zooming then apply the steps above again

Useful References

After doing the above I found this which walks through how to find UI elements

Obsidian CSS Inspector Workflow

Obsidian CSS Inspector Workflow This was originally called “Obsidian CSS Quick Guide” but it ended up being more focused on the inspector. As a retrospective change to help people use this as a resource, it has been renamed. – FireIsGood Hi friends! CSS in Obsidian can be confusing to get into, so this is a guide to get you started with information on the tools, methods, and some background knowledge! Let’s get started by looking at how you can look behind the curtain of Obsidian’s visuals. …

[jhhh]

This is a nice solution but it doesn’t work for me…

If I open the “Vaults” pop-up - scale is still tiny.
If I open the “Settings” pop-up - the top bar of the pop-up window is hidden underneath the top menu bar of obsidian. Or if I switch off the Obsidian menu bar the top of the pop-up still strecthes out of the application area.

So the top right corner “close” button cannot be used to close the settings. Also the top area of the settings window gets hidden as well… so some information cannot be read and some settings cannot be changed…

I figure that the scaling has to be responsive too.

Still for low zoom levels this might work for other 's use cases…

Cheers,
jhhh

[jhhh]

p.s.: I settled for this solution by @blue_emperor:

How to ensure the overall zoom level stays as set after restarting Obsidian?

Zoom in command: [image] Go to settings (Shell commands) [1930f1327e2c949dbd9304d07e0572830a0e90e903d1e5411f38060e286302dd] Input new shell command (should be compatible with your system, this example is for mac) [image] open --background "obsidian://adv-uri?commandid=window%3Azoom-in" (Advanced URI plugin is used as well) If you want more zoom, then repeat that command in new lines as shown.   Go to events [image] Check “Obsidian starts” [image]   Now zoom in command is exec…

[Giles]

Yeah,. the problem with my solution is you have to find all the elements that need zoom. I missed the vaults popup and probably more. I’m not sure why you get the settings popup issue - but the truth is this is just a hack and needs a proper fix.

I think the @blue_emperor approach is more robust.

[jhhh]

Hi @Giles!

Still your solution works for low zoom levels - I’m not here to criticize!
I didn’t find any solution on my own - so, well…

Thx for sharing your CSS code!

Cheers,
jh

[Giles]

If anyone else prefers to use CSS then I refined what I had a little.

• added some missing elements
• added some comments
• made the settings dialog have a separate zoom because as @jhhh mentioned, it may expand to exceed the viewport

Note that the vaults pop up is a separate App and is not affected by the main App zoom level. You can use zoom keys in the vault pop up but it does not zoom well in my experience.

:root { --custom_zoom: 140%;}
div.prompt { zoom: var(--custom_zoom); }

/* drop down menus */
div.menu-scroll { zoom: var(--custom_zoom); }

/* pop up markdown views */
div.markdown-embed { zoom: var(--custom_zoom); }

/* file finder suggestions drop down */
div.suggestion-container { zoom: var(--custom_zoom); }

/* The main window */
div.horizontal-main-container { zoom: var(--custom_zoom); }

/* modal dialogs */
div.modal { zoom: var(--custom_zoom); }

/* The main settings dialog - set separately or it may overflow the viewport */
div.mod-settings { zoom: 130%; }

[Shruteek]

Hi, I have been dealing with this exact issue for some time. I believe I found a safe and optimal solution.

How to:

1. Install and enable the plugin “CustomJS”.
2. In your vault folder, create a subfolder called “scripts”.
3. Create a file called “setZoom.js” in that folder with the following code (change the “zoomLevel” as desired):

// File Location: VAULT/scripts/setZoom.js
class classThatSetsTheZoom {
  async invoke() {
        const zoomLevel = 1.5; // Set this to whatever you wish. 1.0 is 100%. 2.0 is 200%.
        electron.webFrame.setZoomFactor(zoomLevel);
    }
}

4. In Settings → CustomJS → Folder, write “scripts”.
5. In Settings → CustomJS → click “Add startup script”. Select “classThatSetsTheZoom”.

If this worked, whenever you open Obsidian, you should see the interface zoom after a brief moment.

Explanation: The “Appearance - Zoom Level” property is one of the only Obsidian settings which is not managed by any variable in your vault’s .obsidian folder. The “Zoom Level” property is actually just the JavaScript property “zoomFactor” of the webFrame JavaScript class from Electron. When you change the “Zoom Level” in Obsidian, Obsidian uses the “setZoomFactor” function from the webFrame class, which only affects the JavaScript application. It doesn’t store the Zoom Factor in any Obsidian configuration file or any Obsidian settings. When you close Obsidian, the JavaScript app closes, so the zoom factor is gone.

The only way to alter a JavaScript variable in the Obsidian application is using JavaScript code. So I wrote JavaScript code to set the zoomFactor, and I made it execute when I start Obsidian. This uses the exact same mechanism as the “Appearance - Zoom Level” property, so I believe this should cause no visual glitches!