decktape
decktape copied to clipboard
astefanutti
Error: Read ttf table data error at `2.11.0`
$ npx decktape remark index.html slide.pdf --chrome-arg=--disable-web-security
Loading page file:///Users/myid/slide/index.html ...
800 600
{ skip... }
0
[ 'page-10' ]
Loading page finished with status: 0
Remark JS plugin activated
Printing slide #1 ( 1/33) ...{ skip... }
...skip...
Printing slide #7 ( 7/33) ...
Error: Read ttf table data error
Time: 0h:00m:10s
Above example, decktape latest version 2.11.0 is used.
But When I fix the decktape version to 2.10.0, it works well.
$ yarn add [email protected]
$ npx decktape remark index.html slide.pdf --chrome-arg=--disable-web-security
Thanks for the report. It's likely related to the fonteditor-core upgrade done in 2.11.0.
Would you be able to share a presentation so that we can reproduce?
I found the point where the problem occurs. If I remove setTimeout execution of user.js part, no error occurs.
index.html:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="utf-8">
</head>
<body>
<textarea id="source">
layout: false
# title
- item
---
class: scroll
# Tite
- item1
- item2
</textarea>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remark/0.14.0/remark.js"></script>
<script src="./user.js"></script>
</body>
</html>
user.js
const option = { ratio: '16:9', navigation: { scroll: false }}
const slideshow = remark.create(option)
const handleScroll = (e) => { /* change some dom element style */ }
const handleScrollClass = (slide) => {
const classArr = (slide.properties.class || '').split(',').map( str => str.trim() )
if (classArr.includes('scroll')) {
setTimeout( () => {
const elPageNumber = document.querySelector('body > div.remark-slides-area > div.remark-slide-container.remark-visible > div.remark-slide-scaler .remark-slide-number')
elPageNumber.innerText = elPageNumber.innerText.replace(/⬇️$/,'') + ' ⬇️'
const el = document.querySelector('body > div.remark-slides-area > div.remark-slide-container.remark-visible > div.remark-slide-scaler')
el.style.overflowY = 'scroll'
el.removeEventListener('scroll', handleScroll)
el.addEventListener('scroll', handleScroll)
})
}
}
const startIdx = slideshow.getCurrentSlideIndex()
const slide = slideshow.getSlides()[startIdx]
handleScrollClass(slide)
slideshow.on('showSlide', handleScrollClass)
package.json:
{
"devDependencies": {
"decktape": "2.11.0"
}
}
2.10.0 works for me, but 2.11.0 throws the same error as in the title. I wish I could help more, but I am not very familiar with JS to debug the problem.
This still seems to be a problem. Any news? I downgraded to 2.10 to work around the problem for now.
We are currently working on #201, that may move us away from fonteditor-core. Hopefully the new library used to parse fonts will address that issue.
In my case, the same error was caused because I had emojis on the slide. I removed the emojis and I was able to generate a PDF.
@peterj thanks for the feedback. That seems indeed related to emoji support. Could you confirm you still face the issue with version 3.0.0?
@astefanutti yes, still repros with 3.0.0.
Here's the full stack trace:
Loading page file:///Users/peterj/projects/slides/emoji.html ...
Loading page finished with status: 0
No supported DeckTape plugin detected, falling back to generic plugin
Generic plugin activated
Printing slide #1 ( 1/ ?) ...Error: Read ttf table data error
at Object.raise (/usr/local/lib/node_modules/decktape/node_modules/fonteditor-core/lib/ttf/error.js:52:17)
at TTFReader.readBuffer (/usr/local/lib/node_modules/decktape/node_modules/fonteditor-core/lib/ttf/ttfreader.js:88:27)
at TTFReader.read (/usr/local/lib/node_modules/decktape/node_modules/fonteditor-core/lib/ttf/ttfreader.js:232:23)
at Font.read (/usr/local/lib/node_modules/decktape/node_modules/fonteditor-core/lib/ttf/font.js:135:56)
at new Font (/usr/local/lib/node_modules/decktape/node_modules/fonteditor-core/lib/ttf/font.js:86:14)
at Function.Font.create (/usr/local/lib/node_modules/decktape/node_modules/fonteditor-core/lib/ttf/font.js:390:10)
at parseFont (/usr/local/lib/node_modules/decktape/decktape.js:413:27)
at Array.forEach (<anonymous>)
at parseResources (/usr/local/lib/node_modules/decktape/decktape.js:377:45)
at printSlide (/usr/local/lib/node_modules/decktape/decktape.js:368:3)
Working around this issue might not be easy as 2.10 comes with dead dependencies.
Might be useful if someone stuck on this: https://github.com/astefanutti/decktape/issues/201#issuecomment-625634364
One alternative is to use the 2.10.0 container image. I still need to find some time to analyse the issue. Otherwise, I'll consider downgrading the fonteditor-core dependency.
I had a similar error message with decktape 3.2.0. By just starting the Chromium browser on its own an authorization request was made to use the Chromium Safe Storage in the Mac Keychain. Deleting this Chromium Safe Storage entry in the keychain (used to store passwords) resolved it for me.
This still happens for me. Here the presentation:
https://the-qa-company.github.io/2022-04-12-SEMIC-Workshop/
The problem occurs reliably with Helvetica Neue, perhaps the specific ttf distributed with macOS.
This in a presentation suffices to trigger the problem:
<div style="font-family: 'Helvetica Neue';">crash</div>
(I discovered this by trying to include https://www.tmwr.org/premade/modeling-process.svg in a presentation.)
Similar to @kcarnold. When including Helvetica Neue in an SVG image, it crashes every time. Switching to an alternative font (Montserrat in my case) the problem goes away.
As far as I can see, and that is not much, the problem is the fonteditor-core which might not handle the "Helvetica Neue" because it is a .ttc and not a .ttf. The problem is, that .ttc are a collection of .ttf files and not a single .fft file. And as far I can see, the current font editor-core might not read that.
Well, it is definitely a ttc problem. The question is, how to fix it? Anybody willing and able to do something in this direction? A (maybe) helpful tester is here and stands up! ;-)
@NMarkgraf thanks for the analysis.
Ideally fonteditor-core would provide support for parsing font collection files. Alternatively, it may be possible to do the extraction to single font just before calling fonteditor-core. Another alternative might be to use another font library, like https://github.com/foliojs/fontkit, that supports .ttc files already.
Well, I asked for support for changing fonteditor-core on GitHub, but ....
The real problem is, that on Apple macOS the font "Helvetica Neue" (for example) is a system font, which can not be removed or disabled, so you just can not unpack the ttc-files and uses them separately. :-(
So maybe fontkit is the way to fix this all, but I am not a JS programmer and don't know how the implement this in decktape. :-(
Decktape reads the fonts from the PDF stream returned by Puppeteer, directly in memory.
I've just given it a deeper look, and it turns out the font written in the PDF, in the Helvetica Neue case, does not have a cmap table, which prevent fonteditor-core (or any other libraries I've tested, e.g., fontkit, opentype.js) from being able to parse it.
My current understanding is that the root cause lies in Puppeteer > Chromium > Skia. In the meantime, I've created #278 as a work-around, that simply skips font compression for such ill-formed fonts.