Keynote HTML exported presentations don't display correctly
Categories
(Web Compatibility :: Site Reports, defect, P3)
Tracking
(Not tracked)
People
(Reporter: ajkblue98, Unassigned)
References
Details
(Whiteboard: [webcompat])
Attachments
(3 files)
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:57.0) Gecko/20100101 Firefox/57.0 Build ID: 20170812100345 Steps to reproduce: I opened up a Keynote-generated HTML file in Firefox (see attached file for example, just open the "index.html" file inside) and began to play through the slideshow. Actual results: Many slides had text being cut off in titles and descriptions. Expected results: The text in the slides shouldn't of been cut off and should have display the text completely without cutting off the end of words. This presentation currently displays correctly in the latest versions of Chrome and Safari.
Comment 2•7 years ago
|
||
I believe Apple optimizes any exported HTML to Safari. The problem should rather be reported to Apple.
I have reported it to Apple already quite a few times over the past few years and they haven't changed anything, but then since it works in Chrome as well as Safari I thought it was just a Firefox rendering bug, hence why I've filed it here.
Comment 4•7 years ago
|
||
Because Chrome is built with the same rendering engine as Safari (now forked) it makes sense that it only works on Safari and Chrome.
Comment 5•7 years ago
|
||
after removing some graphics assets, we get find keynote-export | egrep -iv "(.png|BFA5|95FE)" keynote-export keynote-export/assets keynote-export/assets/global keynote-export/assets/header.json keynote-export/assets/header.jsonp keynote-export/assets/player keynote-export/assets/player/AnimationManager.js keynote-export/assets/player/DebuggingSupport.js keynote-export/assets/player/DisplayManager.js keynote-export/assets/player/HelpPlacardController.js keynote-export/assets/player/KeynoteDHTMLPlayer.css keynote-export/assets/player/KeynoteDHTMLPlayer.html keynote-export/assets/player/KeynoteDHTMLPlayer.js keynote-export/assets/player/KPFObjects.js keynote-export/assets/player/NarrationManager.js keynote-export/assets/player/NavigatorController.js keynote-export/assets/player/OrientationController.js keynote-export/assets/player/prototype.js keynote-export/assets/player/ScriptManager.js keynote-export/assets/player/ShowController.js keynote-export/assets/player/SlideManager.js keynote-export/assets/player/SlideNumberController.js keynote-export/assets/player/StageManager.js keynote-export/assets/player/string.js keynote-export/assets/player/TextureManager.js keynote-export/assets/player/TouchController.js keynote-export/assets/player/Utilities.js keynote-export/assets/thumbnail.jpeg keynote-export/index.html Slides are SVG files. The text is an SVG file encapsulated into a series of div. For example, slide 1 for the word rabbit. <div id="layer98" style="pointer-events: none; top: 0px; left: 0px; width: 763.219px; height: 336.5px; position: absolute; opacity: 1; visibility: visible; transform: matrix(1, 0, 0, 1, 578.391, 85);"> <div id="layer98-zPosition" style="backface-visibility: hidden; top: 0px; left: 0px; width: 763.219px; height: 336.5px; position: absolute; transform-style: preserve-3d; transform: translateZ(0.012px); animation-fill-mode: both; animation-name: layer98-zPosition; animation-duration: 0.5s;"> <div id="layer99" style="pointer-events: none; top: 0px; left: 0px; width: 743px; height: 205px; position: absolute; opacity: 1; visibility: visible; transform: matrix(1, 0, 0, 1, 14.6094, 72); transform-origin: 49.3943% 46.9512% 0px; animation-fill-mode: forwards; animation-name: layer99-hidden; animation-duration: 0.5s;"> <div id="layer99-opacity" style="backface-visibility: hidden; top: 0px; left: 0px; width: 743px; height: 205px; position: absolute; transform-style: preserve-3d; transform-origin: 49.3943% 46.9512% 0px; opacity: 1; animation-fill-mode: both; animation-name: layer99-opacity; animation-duration: 0.5s;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" clip-rule="evenodd" stroke-miterlimit="4.00" viewBox="0 0 743 205" width="743" height="205" id="C66617F515DEDC60CF5F82B519070863" style="top: 0px; left: 0px; width: 743px; height: 205px; position: absolute; backface-visibility: hidden;"> <desc>SVG generated by Keynote</desc> <defs></defs> <g transform="matrix(1.00, 0.00, -0.00, -1.00, 0.0, 205.0)"> <text xml:space="preserve" font-family="CenturyGothic-Bold" font-weight="bold" font-size="264.0" fill="#FEFFFE" transform="matrix(1.00, 0.00, -0.00, -1.00, -8.0, 5.0)" letter-spacing="-0.052800px">rabbit</text> </g> </svg> </div> </div> </div> </div> In that SVG if I replace CenturyGothic-Bold by Arial, the text fits. <text xml:space="preserve" font-weight="bold" font-size="264.0" fill="#FEFFFE" transform="matrix(1.00, 0.00, -0.00, -1.00, -8.0, 5.0)" letter-spacing="-0.052800px" font-family="Arial">rabbit</text> I do not have Century Gothic on my computer. At first sight I do not see anything which would really create issues with Firefox. But it certainly relies on font-features to compute the size of the boxes. KeynoteDHTMLPlayer.html the main player is generating on the fly the slides from a list of JSON files describing the assets. Javascript files have user agent sniffing.
After doing some more experimentation, it seems to have something to do with the way Firefox renders the font Century Gothic Bold. In comparing the thickness of the bold font-size of Century Gothic to the way it looks in Safari and Chrome, it seems like Firefox makes the font display extra thick, which then makes the font widen out too much which is why the text gets cut off. It seems to me that this stems from a font-rendering issue but only in the bold version of that font. To see this compare the additional files I've attached.
Comment 9•6 years ago
|
||
The issue is still reproducible. Tested with: Browser / Version: Firefox Nightly 61.0a1 (2018-04-09) Operating System: Windows 10 Pro
Comment 10•6 years ago
|
||
Same type of issues than https://webcompat.com/issues/11748 I will quote Jonathan Kew > The site defines a "Roboto" font-family using @font-face > (so it'll use this definition of the family, even if a > full Roboto family is installed locally), and provides > only a Regular face (weight=400). But the element is > styled with font-weight:bold. So then the browser may > apply a synthetic-bold effect to the used font. Exactly > how this works is not specified in detail, but it's > likely to affect glyph spacing. > > For better and more consistent rendering, the site > should either provide a real bold face for its Roboto > family, or avoid applying bold font-weight to it. > Synthetic fake-bold is always a second-best fallback. So basically the issue is that Keynote exports with expectations that the fonts will be rendered viewed by only one type of browser, which has specific rules for rendering fonts. Two avenues: 1. Contact Apple and they create an export which is more resilient 2. Modify Firefox Core engine so that synthetic bold don't resize the width of the fonts. (putting jonathan as ni, fyi, because I don't think it's what he wants to do for now ;) at least until with a massive load of similar issues.) Let's try to contact Apple about it.
Updated•6 years ago
|
Comment 11•6 years ago
|
||
Right, this is a clear example of poor authoring (by the Keynote export function, presumably). The element shown in the screenshots is an SVG text element: <text xml:space="preserve" font-family="CenturyGothic-Bold" font-weight="bold" font-size="230.0" fill="#FEFFFE" transform="matrix(1.00, 0.00, -0.00, -1.00, 0.0, 5.0)" letter-spacing="-0.023000px">The Letter Rr</text> The font-family here is declared in an @font-face rule: @font-face { font-family: "CenturyGothic-Bold"; src: local("CenturyGothic-Bold"), local("Century Gothic Bold"),url("https://www.icloud.com/applications/iw/3C101/gilligan/fonts/3C101/en-us/resources/fonts/CenturyGothic-Bold.woff"); } So the face loaded here is the NORMAL face of the CSS font-family named "CenturyGothic-Bold", as there's no font-weight descriptor in the rule. Therefore, when the <text> element asks for this family, but specifies font-weight="bold", it gets synthetic-bold applied. It's pretty obvious that wasn't the intention of the original human designer, and it's not how Keynote would have been rendering "natively". If they want to load each individual styled face as a separate CSS font-family, the proper font-weight descriptor (and font-style, for italic faces) should be included in the @font-face rules to avoid synthetic styling getting applied. Or just don't use font-weight:bold in conjunction with a "family" like the "CenturyBold-Gothic" family declared here, where the (only) resource is already bold by design. The "family" isn't really being used as a font family, it's being used to load one specific font resource, and so no further styling is required. Or yet another workaround would be to add the CSS property "font-synthesis: none", which tells the browser it should NOT use its synthetic bold or italic effects even when the styling requests something that doesn't match the declared style of the resource.
Assignee | ||
Updated•5 years ago
|
Comment 12•5 years ago
|
||
Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.
Comment 13•5 years ago
|
||
See bug 1547409. Migrating whiteboard priority tags to program flags.
Comment 14•5 years ago
|
||
See bug 1547409. Moving webcompat whiteboard tags to keywords.
Updated•4 years ago
|
Comment 15•2 years ago
•
|
||
The file is no longer available:
https://prnt.sc/KADfR5jYz-z_
https://prnt.sc/ZhGl1-TbgwnI
The webcompat
related report contains an URL that is also not loading, with various VPN locations being tested.
Adding the HTML code in codepen as per comment 11 exhibits no differences in the text:
https://prnt.sc/TsJFKqKX7Azy
Reporter, can you please provide the file again, or any other similar file that exhibits the issue?
Tested with:
Browser / Version: Firefox Release 98.0.2 (64-bit)/ Firefox Nightly 100.0a1 (2022-03-31) (64-bit)
Operating System: Mac OSX 10.15.6
Updated•2 years ago
|
Updated•2 years ago
|
Comment 16•2 years ago
|
||
Redirect a needinfo that is pending on an inactive user to the triage owner.
:denschub, since the bug has recent activity, could you have a look please?
For more information, please visit auto_nag documentation.
Updated•2 years ago
|
Comment 17•2 years ago
|
||
The bug has a demo attached. You can't open that via file://
as it's trying to XHR some jsonp and that fails due to the lack of mime-type-sniffing, but that appears to be consistent in all browsers (and is not the case with a freshly exported presentation, so that's probably related to the old version).
When served via http, everything appears to be fine, I did not see any cut-off titles. I'll close this as worksforme - but we can always reopen this if it's still an issue!
Updated•2 years ago
|
Description
•