Highcharts导出PDF希伯来语文本反转问题及解决方法咨询

我在C# .NET应用中结合JavaScript使用Highcharts，重写了Highcharts调用逻辑来配置希伯来语字体DavidLibre及RTL相关设置，PNG导出正常，但PDF导出时希伯来语单词‘עברית’显示为反转的‘תירבע’，英语文本无异常。尝试添加\u200E字符但会直接显示出来，求无需反转字符串的解决办法。

重写的Highcharts调用逻辑代码 #

var originalHighcharts = $.fn.highcharts;

$.fn.highcharts = function (options) {
    var additionalSettings = {
        series: [{
            name: `${'עברית'}`, // Hebrew series name
            dataLabels: {
                enabled: true,
                useHTML: true,
                style: {
                    direction: 'rtl',
                    unicodeBidi: 'bidi-override',
                    textAlign: 'right'
                }
            }
        }],
        plotOptions: {
            series: {
                shadow: false
            }
        },
        exporting: {
            fallbackToExportServer: false,
            pdfFont: {
                normal: '/Content/fonts/DavidLibre-Regular.ttf',
                bold: '/Content/fonts/DavidLibre-Bold.ttf',
                italic: '/Content/fonts/davidLibre-medium.ttf'
            },
            chartOptions: {
                chart: {
                    style: {
                        fontFamily: 'DavidLibre, Tahoma, sans-serif'
                    }
                },
                lang: {
                    decimalPoint: ',',
                    thousandsSep: '.',
                    rtl: true
                }
            }
        },
        lang: {
            decimalPoint: ',',
            thousandsSep: '.',
            rtl: true
        },
        chart: {
            styledMode: false,
            style: {
                fontFamily: 'DavidLibre, Tahoma, sans-serif',
                direction: 'rtl'
            }
        },
        title: {
            useHTML: true
        }
    };

    options.series = {};
    var newOptions = $.extend(true, {}, options, additionalSettings);

    // Call the original highcharts function with the merged options
    return originalHighcharts.call(this, newOptions);
};

问题原因 #

• Highcharts的PDF导出依赖jsPDF库，而jsPDF对双向文本（BiDi）的原生支持有限，无法像浏览器那样自动处理希伯来语这类RTL语言的字符顺序。
• 图表配置中的RTL参数主要作用于浏览器渲染环节，PDF导出流程并未完全继承这些双向文本排版规则，导致希伯来语字符顺序反转。

解决办法 #

1. 优化导出配置的RTL参数 #

调整exporting.chartOptions中的样式配置，改用更适合PDF渲染的BiDi规则：

exporting: {
    fallbackToExportServer: false,
    pdfFont: {
        normal: '/Content/fonts/DavidLibre-Regular.ttf',
        bold: '/Content/fonts/DavidLibre-Bold.ttf',
        italic: '/Content/fonts/davidLibre-medium.ttf'
    },
    chartOptions: {
        chart: {
            style: {
                fontFamily: 'DavidLibre, Tahoma, sans-serif',
                direction: 'rtl',
                unicodeBidi: 'embed' // 替换bidi-override，让文本按自然RTL顺序渲染
            }
        },
        lang: {
            decimalPoint: ',',
            thousandsSep: '.',
            rtl: true
        }
    }
}

2. 引入双向文本处理库 #

使用专门的BiDi处理库（如bidi-js），在导出前对希伯来语文本进行顺序校正。可以通过Highcharts的beforeExport事件实现：

// 先引入bidi-js库
Highcharts.addEvent(Highcharts.Chart, 'beforeExport', function() {
    this.series.forEach(series => {
        // 检测是否包含希伯来语字符
        if (/[\u0590-\u05FF]/.test(series.name)) {
            // 使用bidi-js处理文本，确保正确顺序
            series.name = bidiJs.getVisualText(series.name);
        }
    });
});

3. 嵌入Base64格式字体 #

将DavidLibre字体转换为Base64格式后直接嵌入配置，避免PDF渲染时因字体加载问题导致的排版异常：

pdfFont: {
    normal: 'data:font/truetype;base64,这里替换为DavidLibre-Regular.ttf的Base64编码',
    bold: 'data:font/truetype;base64,这里替换为DavidLibre-Bold.ttf的Base64编码',
    italic: 'data:font/truetype;base64,这里替换为DavidLibre-Medium.ttf的Base64编码'
}

内容的提问来源于stack exchange，提问作者Eitan