Keynote HTML exported presentations don't display correctly

UNCONFIRMED
Unassigned

Status

Tech Evangelism
Desktop
UNCONFIRMED
2 months ago
2 months ago

People

(Reporter: ajkblue98, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [needsdiagnosis])

Attachments

(3 attachments)

(Reporter)

Description

2 months ago
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.
(Reporter)

Comment 1

2 months ago
Created attachment 8896681 [details]
Demo Keynote Presentation.zip
I believe Apple optimizes any exported HTML to Safari. The problem should rather be reported to Apple.
Component: Untriaged → Desktop
Product: Firefox → Tech Evangelism
Version: 57 Branch → unspecified
(Reporter)

Comment 3

2 months ago
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.
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

2 months 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.
Whiteboard: [needsdiagnosis]
(Reporter)

Comment 6

2 months ago
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.
(Reporter)

Comment 7

2 months ago
Created attachment 8897672 [details]
Firefox font-size.png
(Reporter)

Comment 8

2 months ago
Created attachment 8897673 [details]
Safari & Chrome font-size.png
You need to log in before you can comment on or make changes to this bug.