Empty <p> has a wrong height

[Tian-Godgiven]

Description
When converting Word documents to HTML, empty paragraph tags (

) do not render with the correct height, even though they are not zero-height. The issue is that browsers fail to properly calculate the height of empty elements based on the font styles (font-family, font-size, line-height) carried by the paragraph tags, resulting in vertical spacing that differs from the original Word document.

Expected Behavior
An empty paragraph with font style definitions (e.g.,

) should have exactly the same height as a paragraph with text content (e.g., containing the character "中") under the same styles.

Actual Behavior
Empty paragraphs render with a height smaller than text-containing paragraphs with identical font styles, breaking intended document layout and spacing.

Steps to Reproduce

1.Create a Word document with multiple empty paragraphs used for vertical spacing

2.Apply specific font families and sizes to the document

3.Convert the document to HTML using the plugin

4.Observe the rendered height of empty paragraph elements

Proposed Solution
During Word parsing, inject a zero-width space character that inherits the same font styles for empty paragraphs:

function renderParagraph(content, style) {
  const styleString = `font-family: ${style.fontFamily}; font-size: ${style.fontSize}; line-height: ${style.lineHeight};`;
  
  if (!content || content.trim() === '') {
    // Add zero-width space with inherited font styles
    return `<p style="${styleString}"><span style="${styleString}">​</span></p>`;
  }
  
  return `<p style="${styleString}">${content}</p>`;
}

Temporary Workaround
Add CSS rule:

css
p:empty::before {
content: "\200b";
display: inline;
}
(Note: This may not perfectly match exact font metrics for all typefaces)

问题描述
在Word转HTML过程中，空段落（

）的渲染高度与含有文本的段落高度不一致。虽然空段落不是0高度，但其高度表现不符合预期——浏览器没有基于段落携带的字体样式（font-family、font-size、line-height）正确计算空段落的高度，导致垂直间距与Word原文档存在差异。

预期行为
带有字体样式定义的空段落（例如

），其高度应与包含一个字符（如"中"）的同样式段落高度完全一致。

实际结果
空段落的高度小于同等字体样式下包含文本的段落高度。

重现步骤

使用Word创建一个包含多个空行（用于间距）的文档

设置文档使用特定字体和字号

通过插件转换为HTML

观察HTML中空段落的高度表现

建议的解决方案
在解析Word段落时，为空段落注入一个继承相同字体样式的零宽度空格字符：

// 解析逻辑示例
function renderParagraph(content, style) {
  const styleString = `font-family: ${style.fontFamily}; font-size: ${style.fontSize}; line-height: ${style.lineHeight};`;
  
  if (!content || content.trim() === '') {
    // 为空段落添加继承字体样式的零宽度空格
    return `<p style="${styleString}"><span style="${styleString}">​</span></p>`;
  }
  
  return `<p style="${styleString}">${content}</p>`;
}

临时解决方案
在CSS中添加：

css
p:empty::before {
content: "\200b";
display: inline;
}
（注意：此方案可能无法完美匹配所有字体的精确高度）

[Tian-Godgiven]

solved by

    //创建一个空的 run 元素对象
    createEmptyRun(cssStyle,parent) {
        return {
            type: DomType.Run,
            parent,
            children: [
                {
                    type: DomType.Text,
                    text: " "
                }
            ],
            cssStyle
        };
    }

    parseParagraph(node) {
        var result = { type: DomType.Paragraph, children: [] };
        //如果段落里面没有run就手动添加一个到result里
        const elems = globalXmlParser.elements(node)
        const hasRun = elems.some(elem => elem.localName === "r");
        if (!hasRun) {
            // 获取段落中的样式rPr赋给这个空的run
            const pPr = elems.find(elem => elem.localName === "pPr");
            if(pPr){
                const rPr = pPr && globalXmlParser.element(pPr, "rPr");
                const cssStyle = this.parseDefaultProperties(rPr,{})
                result.children.push(this.createEmptyRun(cssStyle,result));
            }
        }