[ARCHIVED] Consistent style for pages with embedded text vs. text drawn from file via Iframe?

[juan_leon1]

When we use the Canvas editor to write text-based content into a page, the style of the text displayed when the page is rendered is different from the style we see when we pull the same text from a separate file linked to the page via Iframe.

We've taken care to add no markup to the text in the file pulled via Iframe (other than <p> ...  </p>).  And when we examine the embedded text via the HTML view provided by the editor it holds no markup other than the paragraph tags.

What could be causing the difference in display?  Is this an issue related to how/when Iframe content is handled in the page rendering sequence, perhaps?

We'd like to have the style of content pulled into a page appear exactly the same--whether that content has been embedded on a page or it has been pulled in via an Iframe.

Any ideas on how to achieve this would be appreciated. 

[Shar · Accepted solution]

Hi Juan Leon,

If you could provide a screenshot, we'll be able to offer better advice. I also have a question about the "separate file linked to the page via Iframe"; is the file on the web?

There are a few reasons why content looks different between the native Canvas display and your iframed content:

Source content markup

If the iframed file is on the web and contains markup (specifically about the font) then the content display will be different than the native Canvas display. By the way, the Native Canvas display uses font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;

Iframe dimensions

If your iframe is set to a specific width, then the text-flow may also be different between the 2 versions.

Browser settings

When you enter text into the Canvas page (without any markup), the content will display based on the browser's preferences. If one user has all their text to show up as Comic Sans (like it's the 1990's) then the content will look different regardless.

As to how to get the same style whether native Canvas or iframe, you could use the same markup in Canvas as on the source content. As in override the default Canvas display for the font-family and font-size. Or you can stick to one way of displaying the content-- either all Native Canvas display or all iframe.

Personally though, I think it's absolutely fine to let the Native Canvas display and browser settings render the content in a different style. Users should be able to customize their experience to suit their needs (e.g. I like larger text in my browsers) and of course, letting the native settings take over allow the use of cool tools like Immersive Reader. https://community.canvaslms.com/docs/DOC-18029-42121165735 

Hope this advice helps,
Cheers - Shar

[juan_leon1]

Thank you very much, Shar.

To address your good questions: the content I am pulling in via an Iframe lives on an HTML file in the Canvas 'files' repository.  Below are images of what a page display looks like in Canvas when the same source text is rendered through the embedding process vs. the Iframe process.  When embedded, the text gets marked up by the Canvas editor with '<p></p>', as we might expect.  In the case of the HTML file called by the Iframe scripting, we identify the paragraph of text similarly--with the paired <p>, </p> and that is all. No other markup.

What might be causing the discrepancy in the resulting look of the displayed text across the two types of page structures?   I am using the same browser to display the text in both cases.

Also note that I want the default Canvas styling to 'pass through' to any Iframe content in all cases (I don't want to overwrite any style info via the Iframe technique).  Does Canvas perhaps have a style class specific to Iframe content?

Perhaps I should try hard coding font-family information into the content of the file called by Iframe, even though it would be less than ideal?  But for reasons you list I'd really want to avoid that.

-- juan

[Shar]

Ahh Juan,

It's definitely the font styling that's happening. I think your suggestion to put the markup on the file itself is the way to go. If you created the HTML file from a Word document, it's possible that it inherited the font family it was using (Times New Roman). Still though, yeah native Canvas font is the Lato; the content in the iframe is not getting any of the Canvas native styling applied to it. You can right-click and choose Inspect Element to see the styles in use in Canvas in the right-most pane.

Here it is in Firefox, it's similar in Chrome:

font-size: 1rem;
font-weight: normal;
line-height: 1.5;

font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; <-- scroll down to the bottom of the pane (past all the ic-brand stuff) to see what's in the html itself.

Iframes are tricky though, so be sure to check how your content appears in the Canvas Student Apps. What is the Canvas Student app? 

And there are possible accessibility issues from using the iframe as well.

As James suggests, it's better to keep the content in the Canvas page itself rather than iframing a different source. 

Hope this advice helps,
Cheers - Shar

[juan_leon1]

Thank you, both.  The explanations make good sense to me and appear to explain all the behavior I am seeing.

As an experiment, I did load the style information into the HTML file being called, and did get a nice result matching a standard display of a Canvas page.  I'll be able to tweak that a little more by adding the font-size, etc. provided above.

As for where the content is being pulled from, I will explore that further.  My primary constraint is that I need to be able to overwrite Canvas files/pages with refreshed content from our College's external content management system in an efficient way.

What I am able to do now is bring in course content as a single zip file, overwrite all the HTML 'files' I have in a Canvas course, and refresh every page of a given course site in about 10 seconds.  That's assignment instructions, discussion prompts, reading lists, links to lectures, syllabus--any kind of content that can be displayed on a page via pulling data in from a File via the Iframe mechanism.  It's analogous to what I did previously with Blackboard's 'Content Collection'.  I'm not sure how I could achieve the same results using Canvas pages directly--but would be delighted to learn how.  

Regarding where a file is housed, while I could load the same HTML files into a cloud-based server and link to those pages instead, would there be any advantage besides off-loading the files from Canvas?  The files are only text files, so all quite small.  

[James]

 @juan_leon1 ,

What might be causing the discrepancy in the resulting look of the displayed text across the two types of page structures?

The fact that the page is displayed in an iframe is the reason why they show up differently.

When the content is part of the page, it inherits all the styling of the document. However, none of that is carried over when you use an iframe.

Iframes are intended to sandbox the content in the iframe from the parent window. With the exception of a few items, the iframe cannot see what is in the parent window and the parent window cannot see what's in the iframe. Window.postMessage() allows scripts on each to communicate with each other.

Canvas does not load it's stylesheets for the iframe, it's up to the iframe to supply whatever content it wants. Since the idea of iframes is to isolate the two, it would not make sense for Canvas to load it's stylesheets or scripts.

If you're going to store the pages within Canvas, most of the time it should be within the system in content pages, not stored as a separate file. This reduces memory usage (each iframe requires more memory) in the browser, although it shouldn't be too much of an issue unless you go crazy. It may also cause things to load faster since it doesn't have to make the additional call to load the iframe content.

If you're going to want HTML so you can do things not supported by Canvas, then load it on a separate server and embed it in an iframe. When you do that, you can include your own CSS that mimics Canvas' look but include features that Canvas doesn't allow.

[scottrlooney]

hey folks - i have a similar issue as this, only i'm running my own Canvas LMS server and pulling a few key docs from Google via iframe where i would prefer to only update the Google doc rather than manually copy changes each time. i had a much older version of Canvas previously and it was able to display iframe text fonts exactly from Google, but this most recent Canvas version apparently dropped all formatting and used Times New Roman instead. tested in Safari and Firefox. my Google doc does not use Times New Roman. i did switch it to Lato but the results are the same.

checking all of this inside Firefox the only specification for font style is given at the bottom of the Inspector and it reads much the same as others have posted.

font-family: "Lato Extended","Lato","Helvetica Neue",Helvetica,Arial,sans-serif;

but this is obviously not being transferred to the iframe contents. generally a Times New Roman font is indicative of CSS formatting breaking. should i copy the font style inline into the HTML for the iframe? any advice appreciated! i did put in some custom CSS for the login page so i could make the icon larger, but otherwise left it alone.

some further thoughts - i've copied the link from Google directly and pasted it into the iframe and that version does render the font correctly 

"(Google Document link)/edit?usp=sharing"

this also shows a lot of icons and features from Google at the same time.

however if i use the 'embedded' keyword as shown here:

"(Google Document link)/pub?embedded=true"

then the formatting goes back to the Times New Roman formatting while also losing the previous data and icons from Google.

Update - it appears that 'pub' mode may be the issue. 'edit' gets me the better font but also the undesirable elements. the 'embedded' keyword doesn't seem to matter. if i embed in edit mode the fonts are correct but overall layout is not. if i embed in pub mode i lose all the extra formatting but also the font.

anyway if anyone's got ideas i'm open to consider them. thanks!

[aspenwal]

Hi @scottrlooney!

We are having the exact same issue! We use Google Docs for our syllabi, and publish them to the web and embed them via iframe. They have displayed as we expect for several years now.

Very recently, about half our team (both PC and Mac users - Edge, Chrome, FF, and Safari) began to see the syllabi with Times New Roman, and the rest of us see the correct font, Open Sans. At first, it seemed sporadic, happening in only some courses. Today, my team member says all of his syllabi are showing in Times New Roman in all browsers (Mac), and I only see Open Sans in the same syllabi (PC).

To add more to the mystery, we have two team members on PC, both using Chrome - one of us sees Times, the other sees Open Sans. 

We have an open ticket, but Support doesn't seem to understand our problem, so I'm hoping to get some help from the Community. This problem is not related to Canvas' DocViewer.

[scottrlooney]

okay - more research. it is NOT Canvas related in any way. i believe this is related in some fashion to the new Google Drive changes in their public links. try pasting the embedded URL in a web browser and you'll note the same exact lack of text formatting (Times New Roman).

https://9to5google.com/2021/07/28/google-drive-security-update/

somehow we seem to be in a 'neither here nor there' situation with regard to this rollout. they mention the longer URL required to share public links but i haven't seen it available in Google Docs as yet. maybe you have to agree to be trying out the newer beta test versions? i'm definitely in the dark and just taking shots here.

what's mystifying is that placing the 'edit' keyword instead of the 'pub' keyword will display the text properly formatted but also presents a menu and other elements i'd rather leave out (NOTE: this doesn't work for Publish As Web Page links but it does for shared links which can be then be displayed as embedded by adding 'embedded=true').

so this is obviously a use case that is uncommon enough for Google that they don't care about any complaints. if i knew where to complain i would. but unfortunately the ball is firmly in Google's court to address this, unless you want to change the embeds to 'edit' instead of 'pub'. note that if the link itself does not allow editing, the viewer should not be able to edit them.

hope this helps you out a bit. still struggling with it myself so please let me know what you find in terms of a workaround. for me embedding is a great solution because i can edit documents in one place and the changes are viewable wherever i've made the embed link. 

best of luck,

scott

Update: i have filed a question on the support forum for Google Docs Editor group. we'll see what they say. but i can also verify that this was not a problem on July 12.

also, i suspect that your gradual change was due to cached versions of the doc kept somewhere else that had the formatting still working. over time though those cached versions expire and once the page actually has to reload from Google Drive it will likely revert to Times New Roman. any hope this clarifies and i'll let you know if any solution is in the offing.