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

Jump to solution
Community Explorer

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. 

1 Solution
Community Champion

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. 

Hope this advice helps,
Cheers - Shar

View solution in original post