Html2canvas: line-height problem?

[zdxxxxxx]

when I use line-height=height to center text vertically，I find it does not seem to be centered vertically in the picture generated by html2canvas.

Bug reports:

https://jsbin.com/cohugezaxo/1/edit?html,output

Specifications:

• html2canvas version tested with: 1.0.0-rc.5
• Browser & version: chrome 79.0.3945.88
• Operating system: macos sierra 10.12.4

[RickieWoo]

Hi there, I've met your problem in my project these days, but in this case you've mentioned, I find it draws quite well...I'don't know how to repeat it again, looking forward for your help :-)

Specifications:

• Browser & version: chrome 79.0.3945.88
• Operating system: macos sierra 10.12.4

[zdxxxxxx]

Try to set 'font-family:serif'...

[RickieWoo]

Try to set 'font-family:serif'...

Thanks for your reply, I've solved my problem~Have a nice day:-)

[xuanyazhang]

how do you solved it

[yangxuanxing]

I met the same prolem, and i found that it's the problem of getRangeBounds;
the rangeBounds's height of a TextNode may bigger than the container node's clientHeight;

and then when fillText with bounds.top + bounds.height and textBaseline: 'bottom' into canvas, the text will be lower than the original position

my solution is adjust all text nodes's top in clonedElement:

but i think this should be solved in the library itself.

[BrightYang0801]

Try to set 'font-family:serif'...

Thanks for your reply, I've solved my problem~Have a nice day:-)

How do you solved this problem? Need your help.

[RickieWoo]

Try to set 'font-family:serif'...

Thanks for your reply, I've solved my problem~Have a nice day:-)

How do you solved this problem? Need your help.

It seems html2canvas doesn't support some fonts, just try to disable them one by one, then you will find the unsupported one. in my case, it's FangZheng xxx.

[BrightYang0801]

Try to set 'font-family:serif'...

Thanks for your reply, I've solved my problem~Have a nice day:-)

How do you solved this problem? Need your help.

It seems html2canvas doesn't support some fonts, just try to disable them one by one, then you will find the unsupported one. in my case, it's FangZheng xxx.

Yes，you are right! html2canvas doesn't support most fonts.

[poi-mashiro]

in html2canvas

first: different font with get different textnode top and height

line-height: 70px;
font-size: 50px;

in MacOs

in Chromium (chrome 84.0.4147.89 and new edge)

Ping Fang, sans-serif, serif will get 70px height and STKaiti is 50px height inside html2canvas
so

this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);

will fillText in different position

but in Safari and Firefox, html2canvas result is almost same with dom
then I find that

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline

html2canvas set context.textBaseline to middle or bottom but it's useless to let different font-family vertical-align: middle in Chromium

I try all context.textBaseline values and find ideographic useful in Chromium and Safari

but ideographic will result in first image in FireFox

[poi-mashiro]

in html2canvas

first: different font with get different textnode top and height

line-height: 70px;
font-size: 50px;

in MacOs

in Chromium (chrome 84.0.4147.89 and new edge)

Ping Fang, sans-serif, serif will get 70px height and STKaiti is 50px height inside html2canvas
so

this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);

will fillText in different position

but in Safari and Firefox, html2canvas result is almost same with dom
then I find that

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline

html2canvas set context.textBaseline to middle or bottom but it's useless to let different font-family vertical-align: middle in Chromium

I try all context.textBaseline values and find ideographic useful in Chromium and Safari

but ideographic will result in first image in FireFox

Please explain me how can i fix this. Where should I write which code? Should I edit html2canvas.js or just edit in html2canvas(elemet).then(canvas => {--------});?

in my scene, I only need to support Chrome, so I change in line 6200 @1.0.0-rc.5

        CanvasRenderer.prototype.renderTextWithLetterSpacing = function (text, letterSpacing) {
            var _this = this;
            if (letterSpacing === 0) {
                this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
            }

to

        CanvasRenderer.prototype.renderTextWithLetterSpacing = function (text, letterSpacing) {
            var _this = this;
            if (letterSpacing === 0) {
                this.ctx.textBaseline = 'ideographic'
                this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
            }

I think you can try to design a new system to get same text.bounds.top and text.bounds.height for different font-family in all browsers such as Chrome, Edge, Safari, Firefox, and main mobile browsers
or
set different canvas context.textBaseline in different browsers before use canvas context.fillText
or
is it possibility to use a div to

<div style="font-size: textnode-font-size; line-height: textnode-line-height; white-space: nowrap;">textnode</div>

then use div.clientHeight and top = recursion computation div.parent.offsetTop and div.parent.parent.offsetTop to fillText(text, left, top+div.clientHeight)

[NurulAlomAdor]

in html2canvas

first: different font with get different textnode top and height

line-height: 70px;
font-size: 50px;

in MacOs

in Chromium (chrome 84.0.4147.89 and new edge)

Ping Fang, sans-serif, serif will get 70px height and STKaiti is 50px height inside html2canvas
so

this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);

will fillText in different position

but in Safari and Firefox, html2canvas result is almost same with dom
then I find that

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline

html2canvas set context.textBaseline to middle or bottom but it's useless to let different font-family vertical-align: middle in Chromium

I try all context.textBaseline values and find ideographic useful in Chromium and Safari

but ideographic will result in first image in FireFox

Please explain me how can i fix this. Where should I write which code? Should I edit html2canvas.js or just edit in html2canvas(elemet).then(canvas => {--------});?

in my scene, I only need to support Chrome, so I change in line 6200 @1.0.0-rc.5

        CanvasRenderer.prototype.renderTextWithLetterSpacing = function (text, letterSpacing) {
            var _this = this;
            if (letterSpacing === 0) {
                this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
            }

to

        CanvasRenderer.prototype.renderTextWithLetterSpacing = function (text, letterSpacing) {
            var _this = this;
            if (letterSpacing === 0) {
                this.ctx.textBaseline = 'ideographic'
                this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
            }

I think you can try to design a new system to get same text.bounds.top and text.bounds.height for different font-family in all browsers such as Chrome, Edge, Safari, Firefox, and main mobile browsers
or
set different canvas context.textBaseline in different browsers before use canvas context.fillText
or
is it possibility to use a div to

<div style="font-size: textnode-font-size; line-height: textnode-line-height; white-space: nowrap;">textnode</div>

then use div.clientHeight and top = recursion computation div.parent.offsetTop and div.parent.parent.offsetTop to fillText(text, left, top+div.clientHeight)

Thanks. It work for me!

[7revor]

in html2canvas

first: different font with get different textnode top and height

line-height: 70px;
font-size: 50px;

in MacOs

in Chromium (chrome 84.0.4147.89 and new edge)

Ping Fang, sans-serif, serif will get 70px height and STKaiti is 50px height inside html2canvas
so

this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);

will fillText in different position

but in Safari and Firefox, html2canvas result is almost same with dom
then I find that

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline

html2canvas set context.textBaseline to middle or bottom but it's useless to let different font-family vertical-align: middle in Chromium

I try all context.textBaseline values and find ideographic useful in Chromium and Safari

but ideographic will result in first image in FireFox

Please explain me how can i fix this. Where should I write which code? Should I edit html2canvas.js or just edit in html2canvas(elemet).then(canvas => {--------});?

in my scene, I only need to support Chrome, so I change in line 6200 @1.0.0-rc.5

        CanvasRenderer.prototype.renderTextWithLetterSpacing = function (text, letterSpacing) {
            var _this = this;
            if (letterSpacing === 0) {
                this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
            }

to

        CanvasRenderer.prototype.renderTextWithLetterSpacing = function (text, letterSpacing) {
            var _this = this;
            if (letterSpacing === 0) {
                this.ctx.textBaseline = 'ideographic'
                this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
            }

I think you can try to design a new system to get same text.bounds.top and text.bounds.height for different font-family in all browsers such as Chrome, Edge, Safari, Firefox, and main mobile browsers
or
set different canvas context.textBaseline in different browsers before use canvas context.fillText
or
is it possibility to use a div to

<div style="font-size: textnode-font-size; line-height: textnode-line-height; white-space: nowrap;">textnode</div>

then use div.clientHeight and top = recursion computation div.parent.offsetTop and div.parent.parent.offsetTop to fillText(text, left, top+div.clientHeight)

It works for me!

[kooriookami]

I improved it simply in line 6200

CanvasRenderer.prototype.renderTextWithLetterSpacing = function (text, letterSpacing) {
    var _this = this;
    if (letterSpacing === 0) {
        this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
    }
    // ...
};

to

CanvasRenderer.prototype.renderTextWithLetterSpacing = function (text, letterSpacing) {
    var _this = this;
    if (navigator.userAgent.indexOf('Firefox') === -1){
        // non-Firefox browser add this
        this.ctx.textBaseline = 'ideographic';
    }
    if (letterSpacing === 0) {
        this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
    }
    // ...
};

[hoicking]

in html2canvas

first: different font with get different textnode top and height

line-height: 70px;
font-size: 50px;

in MacOs

in Chromium (chrome 84.0.4147.89 and new edge)

Ping Fang, sans-serif, serif will get 70px height and STKaiti is 50px height inside html2canvas
so

this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);

will fillText in different position

but in Safari and Firefox, html2canvas result is almost same with dom
then I find that

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline

html2canvas set context.textBaseline to middle or bottom but it's useless to let different font-family vertical-align: middle in Chromium

I try all context.textBaseline values and find ideographic useful in Chromium and Safari

but ideographic will result in first image in FireFox

Please explain me how can i fix this. Where should I write which code? Should I edit html2canvas.js or just edit in html2canvas(elemet).then(canvas => {--------});?

in my scene, I only need to support Chrome, so I change in line 6200 @1.0.0-rc.5

        CanvasRenderer.prototype.renderTextWithLetterSpacing = function (text, letterSpacing) {
            var _this = this;
            if (letterSpacing === 0) {
                this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
            }

to

        CanvasRenderer.prototype.renderTextWithLetterSpacing = function (text, letterSpacing) {
            var _this = this;
            if (letterSpacing === 0) {
                this.ctx.textBaseline = 'ideographic'
                this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
            }

I think you can try to design a new system to get same text.bounds.top and text.bounds.height for different font-family in all browsers such as Chrome, Edge, Safari, Firefox, and main mobile browsers
or
set different canvas context.textBaseline in different browsers before use canvas context.fillText
or
is it possibility to use a div to

<div style="font-size: textnode-font-size; line-height: textnode-line-height; white-space: nowrap;">textnode</div>

then use div.clientHeight and top = recursion computation div.parent.offsetTop and div.parent.parent.offsetTop to fillText(text, left, top+div.clientHeight)

it works ! thank you too much