wader/ansisvg

Convert ANSI to SVG

ansisvg's Issues

Colors are not picked up when content is from clipboard instead of pipe

Steps to reproduce:

$ cowsay Hello ANSI | lolcat -f -S 1 > ansi-piped.txt
$ cowsay Hello ANSI | lolcat -f -S 1
$ # Copy output from above via kitty copy_ansi_to_clipboard and save it to ansi-copied.txt
$ cat ansi-piped.txt | ansisvg > ansi-piped.svg 
$ cat ansi-copied.txt | ansisvg > ansi-copied.svg

Expected:
ansi-piped/copied.svg should look the same

Observed:
ansi-copied.svg misses the coloring and adds some undecoded ESC sequence at the top.
ansi-piped.txt
ansi-copied.txt

recognizing more colors

If I use color codes like \e[0;32m in my shell scripts I see the color in the svg.

But the colors from lolcat show up as grey in the svg ansisvg creates.

I have no idea how lolcat gets those colors. Have you seen that program? It would be so amazing to be able to pipe lolcat to ansisvg - SO amazing.

Smaller SVG output

Some ideas:

• Consolidate text. Might cause font box sizes issues, is tricky. Make it optional?
• More SVG refs and tricks?
• Consolidate background colors too
• Use <g> group to inherit shared attributes
• Somehow skip including non-styled (like underline) whitespace. Will break whitespace on copy/paste?

Support invert

Noticed that invert is not implement when testing https://github.com/pycontribs/ansi2html/blob/main/tests/ansicolor_eix.txt

Support dark/light mode somehow?

I noticed that the jq svg logo https://jqlang.github.io/jq/jq.svg has this selector @media (prefers-color-scheme:dark){g[fill]{filter:invert(1);stroke:none}}. Could be used to select between dark/light colors.

Allow loading of external fonts

I currently patch ansisvg's output to fix the rendering of Powerline symbols:

ansisvg -fontname "Ubuntu Mono" -fontsize 16 | sed 's?<style>?<style>@import url("https://cdn.jsdelivr.net/gh/wernight/powerline-web-fonts/PowerlineFonts.css");?g'

(I'm a dilettante at web tech, so not sure if this is the right way - but it works)

Wondering if it makes sense to add some kind of option for external fonts (or external CSS in general) to avoid having to patch the generated files.

Better tests

Thing to test:

• Copy/paste text
• Render with web fonts
• Render with custom font
  • Embedded
  • External
• SVG implementations:
  • Chrome
  • Firefox
  • IE (what versions?)
  • Inkscape
  • More?

Methods:

• Assert on SVG document output
• Headless browser
• Manual test protocol

Animatable screen using CSS animations

It struck me that maybe one can use CSS animations to created a animated screen? but to do it probably some more things needs to be in place:

• How to capture control codes? Run subprocess with a pty?
  • Interactive or script ala https://github.com/charmbracelet/vhs?
• Much more complete ANSI decoder, cursor movements, draw instructions etc
• Render to a screen buffer somehow at certain FPS or when things change?
• Render SVG using CSS to animate

Consolidate text to allow copy/paste

One huge benefit of text-based screenshots over PNGs is the ability to select / copy contents and paste them elsewhere.

ansisvg generates a dedicated <text> element for each character, and if text is selected / copied from the rendered SVG then the copied selection includes a whitespace after each character.

example: if "WORD" is selected/copied, then the clipboard contents are "W O R D"

ansisvg could detect consecutive characters that have the same style attribute and consolidate them into a single <text> element to facilitate copy/pasting.

build errors

Hello and happy first issue! It's a great sounding project, I hope you enjoy making it!

I'm getting errors trying to build...

❯ go install github.com/wader/ansisvg@master
can't load package: package github.com/wader/ansisvg@master: can only use path@version syntax with 'go get'

git clone [email protected]:wader/ansisvg.git
cd ansisvg
❯ go build -o ansisvg main.go
build command-line-arguments: cannot load embed: malformed module path "embed": missing dot in first path element

In case my go env details are helpful in this:

GO111MODULE=""
GOARCH="amd64"
GOBIN=""
GOCACHE="/home/alec/.cache/go-build"
GOENV="/home/alec/.config/go/env"
GOEXE=""
GOFLAGS=""
GOHOSTARCH="amd64"
GOHOSTOS="linux"
GONOPROXY=""
GONOSUMDB=""
GOOS="linux"
GOPATH="/home/alec/go"
GOPRIVATE=""
GOPROXY="https://proxy.golang.org,direct"
GOROOT="/usr/lib/go-1.13"
GOSUMDB="sum.golang.org"
GOTMPDIR=""
GOTOOLDIR="/usr/lib/go-1.13/pkg/tool/linux_amd64"
GCCGO="gccgo"
AR="ar"
CC="gcc"
CXX="g++"
CGO_ENABLED="1"
GOMOD="/home/alec/code/software_projects/ansisvg/go.mod"
CGO_CFLAGS="-g -O2"
CGO_CPPFLAGS=""
CGO_CXXFLAGS="-g -O2"
CGO_FFLAGS="-g -O2"
CGO_LDFLAGS="-g -O2"
PKG_CONFIG="pkg-config"
GOGCCFLAGS="-fPIC -m64 -pthread -fmessage-length=0 -fdebug-prefix-map=/tmp/go-build483368982=/tmp/go-build -gno-record-gcc-switches"

Version number

would be nice to have a version number, wouldn't it? 🙃

I like "git describe"-based versioning that automatically picks up the latest Git tag plus the number of commits after that so ends up with something like "v1.20" for a tagged version or "v1.20-5" for a untagged version 5 commits after that. But not sure how to do that in golang 😉

Wrong foreground/background alignment for some glyphs and fonts

Just a head's up

This is a brilliant piece of software!

I was going to submit this issue to ask for a few features such as padding and adding a window frame.

However, I just came across this tool which is very similar and has those features: https://crates.io/crates/term-transcript-cli

Life is short, figured I'd give you a head's up!