Page scale/zoom keeps resetting? (Desktop, Windows)

Plugins and Custom CSS CSS
#1

I found that the UI looks better in my screen at 90%, so I do a CTRL -
This works, however at some point the app just reverts back to 100%
(Haven’t figured out why, so can’t give steps to reproduce)

Workaround I’m trying for now is to do it via CSS (below). Not sure if this reliable. Please suggest if you know a better way!

html {
  zoom: 90%;
}
3 Likes
#2

Found an issue with my workaround.

The formatting/search overlay that appears when you select text may cover the text, depending on the position on the screen.

For example:

image
image1140×370 77.8 KB

Maybe I shouldn’t be targeting html, but something else…?

1 Like
#3

Hmm, maybe its just a bug in the zoom implementation. Otherwise RemNote get’s confused by some coordinates since the overlay is positioned dynamically by JavaScript. zoom is kind of a legacy CSS rule introduced by Internet Explorer back in the days. Some browsers like Chrome also implemented it, Firefox did not. From what I understood you are supposed to use the browsers zoom functionality instead (but that does not work here).

Funnily you can zoom even single bullet points :smiley:

I also have some zooming related stuff in my Custom CSS. Will polish it and put it in the calendar tomorrow (spoiler alert). It uses transform: scale and does not show your issue, but probably has others :stuck_out_tongue_winking_eye:

image
image907×334 4.65 KB

1 Like
#4

I’m back to this.

Recently RemNote desktop stopped remembering my chosen zoom level, so I’d like to try doing it with custom CSS.

However with zoom I still get the problem I mention in my original post. Date picker also appears in a bad position.

I tried scale but the whole thing just got smaller (with white borders around)
transform: scale(0.9,0.9);

Any other suggestion for how to emulate doing CTRL- in the browser?

#5

Here is my Custom CSS. You are suppposed to enable the first settings block and choose one of the last 3 depending on what you want to zoom. Zooming everything does not work for me either, but zooming content is almost the same and might be applicable to the sidebar as well:

  • Zoom factor
:root {
  --zoom-factor: 1.2;
  --zoom-factor-left-pane: 1.2;
  --zoom-factor-right-pane: 0.7;
}
  • Broken: Zoom everything. (The panel positions do not match the content.)
#multiple-windows {
  position: relative;
}

body {
  width: calc(100% / var(--zoom-factor));
  height: calc(100% / var(--zoom-factor));
  transform: scale(var(--zoom-factor));
  transform-origin: 0 0;
}
  • Zoom content only
#multiple-windows {
  position: relative;
}

#multiple-windows {
  width: calc(100% / var(--zoom-factor));
  height: calc(100% / var(--zoom-factor));
  transform: scale(var(--zoom-factor));
  transform-origin: 0 0;
}
  • Zoom left pane only
#multiple-windows .pane:first-child #hierarchy-editor-list__inner {
  width: calc(100% / var(--zoom-factor-left-pane));
  height: calc(100% / var(--zoom-factor-left-pane));
  transform: scale(var(--zoom-factor-left-pane));
  transform-origin: 0 0;
}
  • Zoom right pane only
#multiple-windows .pane:last-child #hierarchy-editor-list__inner {
  width: calc(100% / var(--zoom-factor-right-pane));
  height: calc(100% / var(--zoom-factor-right-pane));
  transform: scale(var(--zoom-factor-right-pane));
  transform-origin: top left;
}
#6

Thanks!

Yeah, I’d like to change zoom factor of everything (equivalent of CTRL- once in brower)

I tried the zoom content code and it looks weird (bottom is white).

image
image3833×241 22.2 KB

#7

Try it with #content and !important height:

#content {
  width: calc(100% / var(--zoom-factor));
  height: calc(100% / var(--zoom-factor)) !important;
  transform: scale(var(--zoom-factor));
  transform-origin: 0 0;
}

There is another issue with the opacity of the bottom toolbar that I don’t know how to fix exactly.

Alternatively you should be able to just use the zoom settings for both panels in combination.