arnehilmann/a2sketch

font size/leading change

gerald1248 opened this issue · 5 comments

gerald1248 commented

The textual elements have changed quite a bit in commit 51f1487 - the font size is larger, but the leading hasn't changed, leading to lines overlapping.

- const fontSize = 15
+ const fontSize = "120%"

The result is that two changes to existing a2sketch artwork are needed: lines need to be broken earlier, and a blank line between lines of text is now necessary.

arnehilmann commented

roughjs switched from 'pt' to 'px' units lately; thus nearly all scaling transformations had to be removed, affecting the text rendering. with fontSize: 120%, the size of the xkcd font is nearly equal to the original text.

To change the fontSize, you can override it with css: svg text {font-size: 80%;}
If you are using a2sketch indirectly via markdeck, you can put that css snippet in your assets/css/slides.scss:

.render_a2sketch svg text {
     font-size: 80%;
}
gerald1248 commented

Awesome, thank you! Problem solved.

gerald1248 commented

Quick note to add that !important is necessary to override the font-size attribute:

.render_a2sketch svg text {
     font-size: 80% !important;
}
arnehilmann commented

yikes not so good, I will have another look sigh

arnehilmann commented

Please inspect the svg text styling of
https://arnehilmann.github.io/markdeck/showcase/#/asciiart-sketchy

div.render_a2sketch svg text {
font-family: "xkcd Script";
font-size: 24pt;
}

results in correct fontSize, without !important!