xaringan icon indicating copy to clipboard operation
xaringan copied to clipboard

text inflation in mobile browser

Open gwmatthews opened this issue 5 years ago • 0 comments

Problem

Due to a "feature" in some mobile phone browsers, font sizes get inflated in certain circumstances when viewing slides. This can cause overflow of slide content off of readable screen area. This affects the right-column class and possibly user-defined classes as well. Yes that's native to remark, but this is intended as a fix for the internal themes here.

When displaying slideshow on Android Chrome text within right-column class gets inflated.

Text in right-column class

Screenshot_2020-01-06_091926

Normal text

Screenshot_2020-01-06_091931

Fix

I struggled with fixing this until I found the option to disable text size adjustments, which is a newish css property. So I thought I'd recommend adding it to css files lest mobile viewers can't read your slideshows. Adding the css rule below maintains consistent text sizes.

/*   prevent small screen font size inflation */

body {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}

Here's a minimal working example. To reproduce:

  1. knit
  2. deploy to web
  3. view in Android Chrome
---
title: "test"
author: "me"
output:
  xaringan::moon_reader:
    seal: false
    lib_dir: libs
    nature:
      highlightStyle: github
      countIncrementalSlides: false
---

# inflated text

.left-column[

### heading

]

.right-column[

Twas brillig, and the slithy toves
      
Did gyre and gimble in the wabe:

All mimsy were the borogoves,

And the mome raths outgrabe.

"Beware the Jabberwock, my son!

The jaws that bite, the claws that catch!

Beware the Jubjub bird, and shun

The frumious Bandersnatch!"

]

---

# non-inflated text

Twas brillig, and the slithy toves
      
Did gyre and gimble in the wabe:

All mimsy were the borogoves,

And the mome raths outgrabe.

"Beware the Jabberwock, my son!

The jaws that bite, the claws that catch!

Beware the Jubjub bird, and shun

The frumious Bandersnatch!"


By filing an issue to this repo, I promise that

  • [X] I have fully read the issue guide at https://yihui.org/issue/.
  • [X] I have provided the necessary information about my issue.
    • If I'm asking a question, I have already asked it on Stack Overflow or RStudio Community, waited for at least 24 hours, and included a link to my question there.
    • If I'm filing a bug report, I have included a minimal, self-contained, and reproducible example, and have also included xfun::session_info('xaringan'). I have upgraded all my packages to their latest versions (e.g., R, RStudio, and R packages), and also tried the development version: remotes::install_github('yihui/xaringan').
    • If I have posted the same issue elsewhere, I have also mentioned it in this issue.
  • [X] I have learned the Github Markdown syntax, and formatted my issue correctly.

I understand that my issue may be closed if I don't fulfill my promises.

gwmatthews avatar Jan 06 '20 14:01 gwmatthews