bubkoo / html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Font size is being shrink and causes extra space below paragraphs

Bartolojed11 opened this issue · comments

Font size is being shrink and causes extra space below paragraphs. Please see attatched image.

bug report

Expected Behavior

Font size should not be shrink so that paragraphs should not have extra spaces below

Current Behavior

Font size is being shrink causing paragraphs to have extra spaces below

Possible Solution

On src/clone-node.ts file, cloneCSSStyle function, i think it's better to have an optional parameter for shrinking font-sizes. Thank you
Optional Parameter example

{
shrinkFontSize: false,
shrinkValue: 0,
shrinkAbsolute: false
}

code snippet

if (name === 'font-size' && value.endsWith('px') && shrinkFontsize && shrinkValue) {
        const reducedFont =  shrinkAbsolute ?  Math.floor(parseFloat(value.substring(0, value.length - 2))) - shrinkValue : parseFloat(value.substring(0, value.length - 2)) - shrinkValue;

        value = `${reducedFont}px`
}

Your Environment

  • html-to-image: [e.g. 0.1.0]
  • OS: [e.g. macOS Sierra 10.12.3]
  • Browser: [e.g. chrome 78.0.3904.108]
commented

👋 @Bartolojed11

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.