fitting interactives to device width on smaller viewports

[Steven Clontz]

A colleague asked if it's possible to get an interactive to shrink to device width on smaller viewports, similar to how the YouTube iframe behaves. See attached images - both the YouTube video and iframe interactive fit the text width on a larger viewport, but only the YouTube video shrinks to fit the viewport on a smaller mobile device.

[Andrew Scholer]

Can you provide a link to that book? And a link to the source if possible?

The answer is going to depend on the interactive in question and where it is being served from relative to the containing page.

If the container page and contained iframe are coming from different domains, there is not much the container page can do to the contents of the iframe. In that case, about all the container page can do is allocate a "window" of space that the iframe contents will be rendered in. It is up to the contents that is rendered into the iframe to manage its layout within the available space.

https://javascript.info/cross-window-communication

Andrew Scholer (he/him/his)

Computer Science Instructor/Program Chair

Chemeketa Community College

503.589.7649 

computerscience.chemeketa.edu/people/andrew-scholer/

--
You received this message because you are subscribed to the Google Groups "PreTeXt support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pretext-suppo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-support/3dc75dd0-de25-44db-b78d-aafb328e073en%40googlegroups.com.

[Steven Clontz]

Hi Andrew,

I'm indeed just asking if we can get our iframe to be sized to the width of the display; I'm hopeful that the slides will scale to fit, but agree that's an assumption and out of our control.

Steven Clontz

https://clontz.org - steven...@gmail.com

You received this message because you are subscribed to a topic in the Google Groups "PreTeXt support" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pretext-support/mbG0rSQmkIQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to pretext-suppo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-support/CACm44N9zSfC8hdXmqFBhcNEd_rh_RPhSKNwVhOBj4x4ZF7K6NQ%40mail.gmail.com.

[Andrew Scholer]

Ahhh, yes, that is much more doable.

Do you have a link to a live sample that can be played with?

Andrew Scholer (he/him/his)

Computer Science Instructor/Program Chair

Chemeketa Community College

503.589.7649 

computerscience.chemeketa.edu/people/andrew-scholer/

To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-support/CAOWT6Th4x6UazCpwkyBM0hVCt-khTx-c6SXxHQBBCWTb-c0pEQ%40mail.gmail.com.

[Rob Beezer]

The screenshots didn't help me much, but I'm pretty sure I understand the
question. Source would have helped more, but I think you are saying this is an

<interactive iframe="...."/>

Have you tried a @width (as a percentage) and an @aspect on that element? There
are templates to manage these, but they are going to produce pixels (as an
iframe wants) as fractions of the "design width" of 600px. Not sure how we
would make that more responsive.

Rob

On 10/12/23 09:22, Andrew Scholer wrote:
> Ahhh, yes, that is much more doable.
>
> Do you have a link to a live sample that can be played with?
>
> Andrew Scholer (he/him/his)
> Computer Science Instructor/Program Chair
> Chemeketa Community College
> 503.589.7649
> computerscience.chemeketa.edu/people/andrew-scholer/

> <http://computerscience.chemeketa.edu/people/andrew-scholer/>

>
>
> On Thu, Oct 12, 2023 at 8:53 AM Steven Clontz <steven...@gmail.com
> <mailto:steven...@gmail.com>> wrote:
>
> Hi Andrew,
>
> I'm indeed just asking if we can get our iframe to be sized to the width of
> the display; I'm hopeful that the slides will scale to fit, but agree that's
> an assumption and out of our control.
>
>
> Steven Clontz

> https://clontz.org <https://clontz.org> - steven...@gmail.com
> <mailto:steven...@gmail.com>

>
>
> On Thu, Oct 12, 2023 at 10:50 AM Andrew Scholer
> <andrew....@chemeketa.edu <mailto:andrew....@chemeketa.edu>> wrote:
>
> Can you provide a link to that book? And a link to the source if possible?
>
> The answer is going to depend on the interactive in question and where
> it is being served from relative to the containing page.
>
> If the container page and contained iframe are coming from different
> domains, there is not much the container page can do to the contents of
> the iframe. In that case, about all the container page can do is
> allocate a "window" of space that the iframe contents will be rendered
> in. It is up to the contents that is rendered into the iframe to manage
> its layout within the available space.
>
> https://javascript.info/cross-window-communication
> <https://javascript.info/cross-window-communication>
>
> Andrew Scholer (he/him/his)
> Computer Science Instructor/Program Chair
> Chemeketa Community College
> 503.589.7649
> computerscience.chemeketa.edu/people/andrew-scholer/

> <http://computerscience.chemeketa.edu/people/andrew-scholer/>

>
>
> On Thu, Oct 12, 2023 at 8:27 AM Steven Clontz <steven...@gmail.com
> <mailto:steven...@gmail.com>> wrote:
>
> A colleague asked if it's possible to get an interactive to shrink
> to device width on smaller viewports, similar to how the YouTube
> iframe behaves. See attached images - both the YouTube video and
> iframe interactive fit the text width on a larger viewport, but only
> the YouTube video shrinks to fit the viewport on a smaller mobile
> device.
>

> Screenshot 2023-10-11 at 2.55.08 PM.png

> img_0723.png

> img_0722.png
>
> --
> You received this message because you are subscribed to the Google
> Groups "PreTeXt support" group.
> To unsubscribe from this group and stop receiving emails from it,
> send an email to pretext-suppo...@googlegroups.com

> <mailto:pretext-suppo...@googlegroups.com>.

> To view this discussion on the web visit

> https://groups.google.com/d/msgid/pretext-support/3dc75dd0-de25-44db-b78d-aafb328e073en%40googlegroups.com <https://groups.google.com/d/msgid/pretext-support/3dc75dd0-de25-44db-b78d-aafb328e073en%40googlegroups.com?utm_medium=email&utm_source=footer>.

>
> --
> You received this message because you are subscribed to a topic in the
> Google Groups "PreTeXt support" group.
> To unsubscribe from this topic, visit

> https://groups.google.com/d/topic/pretext-support/mbG0rSQmkIQ/unsubscribe <https://groups.google.com/d/topic/pretext-support/mbG0rSQmkIQ/unsubscribe>.

> To unsubscribe from this group and all its topics, send an email to
> pretext-suppo...@googlegroups.com

> <mailto:pretext-suppo...@googlegroups.com>.

> To view this discussion on the web visit

> https://groups.google.com/d/msgid/pretext-support/CACm44N9zSfC8hdXmqFBhcNEd_rh_RPhSKNwVhOBj4x4ZF7K6NQ%40mail.gmail.com <https://groups.google.com/d/msgid/pretext-support/CACm44N9zSfC8hdXmqFBhcNEd_rh_RPhSKNwVhOBj4x4ZF7K6NQ%40mail.gmail.com?utm_medium=email&utm_source=footer>.

>
> --
> You received this message because you are subscribed to the Google Groups
> "PreTeXt support" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to pretext-suppo...@googlegroups.com

> <mailto:pretext-suppo...@googlegroups.com>.

> To view this discussion on the web visit

> https://groups.google.com/d/msgid/pretext-support/CAOWT6Th4x6UazCpwkyBM0hVCt-khTx-c6SXxHQBBCWTb-c0pEQ%40mail.gmail.com <https://groups.google.com/d/msgid/pretext-support/CAOWT6Th4x6UazCpwkyBM0hVCt-khTx-c6SXxHQBBCWTb-c0pEQ%40mail.gmail.com?utm_medium=email&utm_source=footer>.

>
> --
> You received this message because you are subscribed to the Google Groups
> "PreTeXt support" group.
> To unsubscribe from this group and stop receiving emails from it, send an email
> to pretext-suppo...@googlegroups.com

> <mailto:pretext-suppo...@googlegroups.com>.

> To view this discussion on the web visit

> https://groups.google.com/d/msgid/pretext-support/CACm44N8vB%2Btt%2BWzN9OBsXuY45CQtxa4K4s9eS%3DM7bhBwag6iTQ%40mail.gmail.com <https://groups.google.com/d/msgid/pretext-support/CACm44N8vB%2Btt%2BWzN9OBsXuY45CQtxa4K4s9eS%3DM7bhBwag6iTQ%40mail.gmail.com?utm_medium=email&utm_source=footer>.

[Steven Clontz]

Anurag told me he'd chime in this thread directly when he can, so I won't attempt to guess his intentions further.

[Oscar Levin]

From a conversation at dropin, I think the issue is that the iframe is not responsive to narrow screens.  

To unsubscribe from this group and stop receiving emails from it, send an email to pretext-suppo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-support/718ea6f5-be54-4103-b8c6-78ead26e567fn%40googlegroups.com.

[Anurag Katyal]

Hello, 

Here's a link to the section - https://github.com/anuragkatyal/intalg/blob/317dc86c930e1c617961a9b99335488fa9c08203/source/ch4/sec-4_3.ptx

I am rather inexperienced with github so forgive me if that is not the correct link for sharing. The repository is public and is called "intalg". 

Here's a link to the gh page - https://anuragkatyal.github.io/intalg/sec-4_3.html

If one tries to view the page ^ on a desktop/laptop, the iframe doesn't have an issue however, on my iPhone, the YouTube video scales down in width to fit the screen but the slides do not. 

Thanks,

Anurag. 

[Andrew Scholer]

That was perfect Anurag.

The width/height of interactives are translated to pixels as part of building the page. If width was rendered into HTML as a percentage, that would help you, but it would likely require other adjustments (height as a % doesn't work, meaning an appropriate height would need to be maintained dynamically with JS). If that is something you really want, you could add a feature request as an issue: https://github.com/PreTeXtBook/pretext/issues But that is not likely to happen quickly.

Your choices otherwise:

1) Use some other technique for displaying the slide information. Those iframe slides cause a lot of issues: they are completely inaccessible to someone using a screen reader and/or keyboard to navigate the page; if they are shrunk down to fit on an iPhone screen they are very difficult to read as the text is scaled. You might consider translating the slides into an <exercise> with <task>'s that will be presented like this:  Exercise 5.18.1: True/False and Explain .

2) Add your own custom css/js to the book to handle the sizing of slides

3) Specify width (and possibly) height to be some smaller measurement that always fits on screen

Why YouTube works differently:

In PreTeXt, the youtube iframe is rendered into a box with a % based width and % top padding to create a window with a well-defined width, a height of 0, and some blank space above it sufficient to hold a video in the 16:9 aspect ratio. Youtube's iframe is designed to work in that kind of a window - it uses the full width and sets its height based on the width, filling the space above that was reserved as padding. Youtube is designed that way because the % top padding in CSS is calculated based on the width. So wen the width changes, the top-padding changes automatically. Your slides, and most other pages, are designed to have a window with a well-defined width & height.

Andrew Scholer (he/him/his)

Computer Science Instructor/Program Chair

Chemeketa Community College

503.589.7649 

computerscience.chemeketa.edu/people/andrew-scholer/

To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-support/c67a2817-acee-400c-8127-043957d7180bn%40googlegroups.com.