Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Content margin a removed when no sidebar #885

Open
kelson42 opened this issue Jul 27, 2024 · 5 comments · May be fixed by #887
Open

Content margin a removed when no sidebar #885

kelson42 opened this issue Jul 27, 2024 · 5 comments · May be fixed by #887
Assignees
Milestone

Comments

@kelson42
Copy link
Contributor

kelson42 commented Jul 27, 2024

With sidebar
image

... and without sodebar
image

Like you can see the content as no left and right margin anymore and the margin should be there.

Not aure this is Kiwix related, might be related to the ZIM itself. It seems to happen only if I put a high zoom in the settinga

@kelson42 kelson42 added this to the 3.5.0 milestone Jul 27, 2024
@BPerlakiH BPerlakiH linked a pull request Jul 28, 2024 that will close this issue
@BPerlakiH BPerlakiH linked a pull request Jul 28, 2024 that will close this issue
@kelson42
Copy link
Contributor Author

kelson42 commented Aug 2, 2024

I believe to remember the file was https://library.kiwix.org/viewer#wikipedia_fr_medicine_maxi_2024-06

@kelson42
Copy link
Contributor Author

kelson42 commented Aug 2, 2024

With Firefox Responsive mode:
image

@BPerlakiH
Copy link
Collaborator

I have tried the following things:
open the link in Safari browser within the iPad simulator and the web inspector on the desktop.
It seems that with this combination the javascript "spell" we use: webkitTextSizeAdjust or the equivalent css: -webkit-text-size-adjust won't have any effect for some reason.
It seems that this is an iOS specific experimental setting:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust#browser_compatibility

The closest I could get is to bump up the font-size a bit, and observed the same outcome as reported in this issue.

By looking into the html/css part of the site:
It turned out that there's a media-query that centres the content:

  • when it's full screen (side bar collapsed):
margin-left: auto;
margin-right: auto;
max-width: 55.8em;
  • when it's 3/4 of the screen (side bar expanded):
margin: 0 16px;

What it means in practice is that by bumping up the font size (or text-size-adjust) the max-width: 55.8em is relative to the font-size applied, therefore it can "outgrow" the full screen width. (As em is a Relative unit in css: "em and rem are relative to the font size of the parent element and the root element, respectively.")
As an example changing it to (rem): max-width: 55.8rem; it preserves the margins.

Which brings me to the conclusion, that we are doing this zoom in a very unconventional way.
Although the proposed PR does fix this specific case, I think @rgaudin might be right that we should not fix specific content issues on the reader side.

@BPerlakiH
Copy link
Collaborator

I am a bit torn on this, and don't have a strong opinion if we should or should not fix it.
I am happy both ways of either merging the PR, until it's well documented we can apply it and revert if needed. Or throw the PR away and maybe in the future look into some alternatives we could use for "zoom in".

@kelson42
Copy link
Contributor Author

kelson42 commented Aug 5, 2024

Postponing this issue

@kelson42 kelson42 modified the milestones: 3.5.0, 3.6.0 Aug 5, 2024
@kelson42 kelson42 modified the milestones: 3.6.0, 3.7.0 Oct 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants