Closed Bug 1389880 Opened 7 years ago Closed 2 years ago

Keynote HTML exported presentations don't display correctly

Categories

(Web Compatibility :: Site Reports, defect, P3)

Tracking

(Not tracked)

RESOLVED WORKSFORME

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.
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
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.
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]
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.
Attached image Firefox font-size.png
The issue is still reproducible.

Tested with:
Browser / Version: Firefox Nightly 61.0a1 (2018-04-09) 
Operating System: Windows 10 Pro
Status: UNCONFIRMED → NEW
Ever confirmed: true
Priority: -- → P3
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.
Flags: needinfo?(jfkthame)
Whiteboard: [needsdiagnosis] → [webcompat] [contactready]
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.
Flags: needinfo?(jfkthame)
Product: Tech Evangelism → Web Compatibility

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Webcompat Priority: --- → ?

See bug 1547409. Migrating whiteboard priority tags to program flags.

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Webcompat Priority: ? → revisit

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

Flags: needinfo?(ajkblue98)
Webcompat Priority: revisit → P3

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.

Flags: needinfo?(ajkblue98) → needinfo?(dschubert)
Severity: normal → S3

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!

Status: NEW → RESOLVED
Closed: 2 years ago
Flags: needinfo?(dschubert)
Resolution: --- → WORKSFORME
Whiteboard: [webcompat] [contactready] → [webcompat]
Webcompat Priority: P3 → ---
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: