Text not aligned properly in v8.0

[abnerlee]

see screenshot:

Mermaid Source Code

graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]

settings:

{
  "theme": "default"
}

Expect behavior: text should be vertical middle of rect node.

Tested on Chrome/Windows10.

Seems OK in v7.0, it may also caused by screen resolution. It works fine on my Macbook, and my office PC, but can be reproduce in one 13 inch laptop.

The screen resolution is 1920x1080, by default 150% zoom is applied system wild

[tylerlong]

Could you please try firefox on your laptop?

And could you please try to reproduce the issue with these demos: https://github.com/dagrejs/dagre-d3/wiki#demos ? dagre-d3 powers mermaid so I want to make sure it's not an issue from upstream.

Thanks.

[abnerlee]

Update: on Chrome

OK with D3's demo:

Even OK with mermaid

But not OK in the live editor

---

live editor is also OK in Firefox

[z827101859]

@tylerlong I got the same problem。

device: surface book2, 15 inch , The screen resolution is 2430x1620, by default 150% zoom is applied system wild
operate system: windows 1803, build 17134.472
mermaid version: 8.0.0
chrome version: 71.0.3578.98

in the live editor，text is not in vertical middle of rect node .

when I change to Edge, it seems OK.

and these demos: https://github.com/dagrejs/dagre-d3/wiki#demos is both OK on Chrome and Edge.

I think it is a bug with mermaid ..

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[MadMaxChow]

Fix the dislocation patch of mermaid when windows high DPI configuration.

Patch code:

    /**
     * 修正 mermaid 8.0 在 Windows 高 DPI 配置下导出的BUG
    */
    function fixHighDPImermaid() {
        // 跳过非 Windows 版 Typora 导出的 HTML
        if ($("body").attr("class").indexOf("os-windows") == -1)
            return;
    
        $(".label foreignObject > div, .edgeLabel foreignObject > div").each(function () {
            // 跳过空文本的处理
            if ($(this).text().trim().length == 0)
                return true;

            let ratio = $(this).parent().height() / $(this).height(), // 获得文本标签及父元素的高度比，作为line-height的基数
                child = $(this).children("span"), // 获得线条上的文本标签对象
                coefficient = 2; // 行高、字号就调节系数

            // 跳过指定的比例情况
            console.log("Mermaid Scale Ratio: " + ratio);
            if (ratio <= 1) {
                // 对于特定环境的修正
                if (ratio < 1 && env.browser.chrome && env.os.windows) {
                    $(this).parent().css("height", "2em");
                    $(this).parent().css("line-height", "1em");
                }
                return true;
            }

            // 如果当前是非高清屏，对于高 DPI 导出的文件，再修正缩放比例
            if (window.devicePixelRatio == 1 && env.browser.chrome && env.os.windows) {
                ratio = ratio / 2;
                console.log("Mermaid Scale Ratio (alt): " + ratio);
            }

            if (child.length == 0) { // 非线条上的文本标签
                if (env.browser.chrome && env.os.windows) {
                    coefficient = 2;
                    ratio = ratio * coefficient; // 行高基数 * 2
                }
                $(this).css("line-height", (ratio / coefficient / 0.9) + "em");
                $(this).css("font-size", (ratio / coefficient * 0.9) + "em");
            }
            else { // 线条上的文本标签
                if (env.browser.chrome && env.os.windows) {
                    coefficient = 4;
                    ratio = ratio * coefficient; // 行高基数 * 4
                    child.css("line-height", (ratio / coefficient / 0.5) + "em");
                    child.css("font-size", (ratio / coefficient) + "em");
                }
                else if (env.browser.chrome && env.os.macos
                    || env.browser.firefox) {
                    coefficient = 2;
                    ratio = ratio * coefficient; // 行高基数 * 2
                    child.css("line-height", (ratio / coefficient / 0.9) + "em");
                    child.css("font-size", (ratio / coefficient / coefficient * 0.9) + "em");
                }
            }
        });
    }

Supporting basic environment information code:

    /**
     * 环境信息类
     */
    const env = {
        // Windows 平台样例：
        // (Chrome) Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36
        // (Firefox) Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:69.0) Gecko/20100101 Firefox/69.0
        // (Edge) Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362
        //
        // macOS 平台样例：
        // (Chrome) Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36
        // (Firefox) Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:69.0) Gecko/20100101 Firefox/69.0
        // (Safari) Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.2 Safari/605.1.15
        //
        // 浏览器内核信息
        core: function () {
            const u = navigator.userAgent;
            return {
                trident: u.indexOf("Trident") > -1, //IE内核
                presto: u.indexOf("Presto") > -1, //opera内核
                webkit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核
                gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1 //火狐内核
            };
        }(),
        // 设备信息
        device: function () {
            const u = navigator.userAgent;
            return {
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
                android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, // android终端或者uc浏览器
                iPhone: u.indexOf("iPhone") > -1, // 是否为iPhone或者QQHD浏览器
                iPad: u.indexOf("iPad") > -1 // 是否iPad
            };
        }(),
        // 浏览器类型
        browser: function () {
            const u = navigator.userAgent;
            return {
                chrome: u.indexOf("Chrome") > -1, // Chrome浏览器
                firefox: u.indexOf("Firefox") > -1, // Firefox浏览器
                safari: u.indexOf("Safari") > -1 && u.indexOf("Version") > -1 // Safari浏览器
            };
        }(),
        // 浏览器版本信息
        browserVersion: function () {
            const u = navigator.userAgent;
            return {
                chrome: u.match(/Chrome\/[\d.]+/gi) ? u.match(/Chrome\/[\d.]+/gi)[0].match(/[\d]+/)[0] :
                "0", // chrome浏览器版本
                firefox: u.match(/Firefox\/[\d.]+/gi) ? u.match(/Firefox\/[\d.]+/gi)[0].match(/[\d]+/)[0] :
                "0", // firefox浏览器版本
                safari: u.match(/Version\/[\d.]+.+Safari\/[\d.]+/gi) ? u.match(
                    /Version\/[\d.]+.+Safari\/[\d.]+/gi)[0].match(/[\d]+/)[0] : "0" // safari浏览器版本
            };
        }(),
        // 操作系统信息
        os: function () {
            const u = navigator.userAgent;
            return {
                windows: /windows|win32|win64/i.test(u), // 是否为windows平台
                macos: /macintosh|mac os x/i.test(u) // 是否为macOS平台
            };
        }(),
        // 语言信息
        language: function () {
            const lang = (navigator.browserLanguage || navigator.language);
            return {
                full: lang.toLowerCase(),
                base: lang.substring(0, 2),
                subset: lang.substring(3, lang.length)
            };
        }()
    }

[abnerlee]

#651