Hacker News Reader

Comment by rhacker | Hacker News Reader

That can be a better way to do terminal sessions in readmes instead of animated gifs.

Sadly, SVG still doesn't let you pause the animation, let alone copy-and-paste embedded text.

Given the number of Github projects that want terminal "demonstrations", I'm surprised Github hasn't just provided first-party support for it (with e.g. a fancy renderer for script(1) code-embeds, that would play back the script session by writing regular DOM text nodes; and which would give you transport controls to pause, scrub through, skip around, etc.)

While they're at it, they could also allow embedding of some kind of slide-deck format. Using GIFs for slides has all the same problems. (Hopefully nothing as fancy/complex as PPT; more like a basic-PostScript-profile PDF renderer, that would auto-carousel through the PDF's pages, until you begin interacting with it.)

> Sadly, SVG still doesn't let you pause the animation

Not even through `animation-play-state: paused;`? e.g:

    :hover {
      animation-play-state: paused;
    }

The termtosvg repo linked by another commentor seems to have a pausable example in their examples gallery, so it appears to be doable.

The difference there is that the pausable SVG is embedded on the page as an object element. There is Javascript inside the SVG document that is enabling the replay to be pausable.

Github readmes however only allow embedding SVGs as images, and Javascript won't work in that case.

EDIT: added a missing word

Does :focus or :hover apply to CSS in SVG in an <img/> tag? If so, you could use those to implement a sort of pause by combining with the next-sibling operator (actually I really really like the + operator in CSS selectors, because a lot of things that people think you need JS to do can be done with a combination of :focus and +).

There's already https://github.com/nbedos/termtosvg for that purpose

At the very least support videos. That would make a lot of people happy, from being able to pause and fast forward demos in READMEs to issue filers that record the issue with a screen recorder.

Reply on news.ycombinator.com