避免波斯/阿拉伯字符标签间粘连——Gulp压缩HTML排版问题

问题根源 #

阿拉伯/波斯语属于从右到左的书写系统，字符具备连笔特性。当Gulp压缩HTML移除标签间的换行、空格后，<span>آقای</span><span>اکبری</span>的标签紧密相邻，浏览器会将两个<span>内的文本视为连续内容，触发字符连笔导致显示异常；而未压缩时的换行被浏览器解析为空格，分隔开两个词，所以显示正常。

可行解决方案 #

1. 插入HTML空格实体

在两个<span>之间添加不会被压缩工具移除的空格实体，既保留视觉分隔，又避免字符连笔：

<p><span>آقای</span>&nbsp;<span>اکبری</span></p>
<!-- 正确显示：آقای اکبری -->

也可根据需求使用 （窄空格）或 （半角空格）。

2. CSS强制文本隔离

给包含波斯/阿拉伯字符的<span>添加CSS属性，强制浏览器将每个<span>内的文本视为独立排版单元，跨标签的字符就不会连笔：

.rtl-span {
  unicode-bidi: isolate;
}

对应HTML：

<p><span class="rtl-span">آقای</span><span class="rtl-span">اکبری</span></p>
<!-- 正确显示：آقای اکبری -->

这个方法无需修改HTML结构，适合批量处理这类字符。

3. 调整Gulp压缩配置

如果使用gulp-htmlmin，可以通过配置保留<span>标签间的空白，避免压缩后标签紧密相邻：

const htmlmin = require('gulp-htmlmin');

gulp.task('minify-html', () => {
  return gulp.src('src/*.html')
    .pipe(htmlmin({
      collapseWhitespace: true,
      // 保留</span>与<span>之间的空白
      ignoreCustomFragments: [/<\/span>\s*<span>/g]
    }))
    .pipe(gulp.dest('dist'));
});

内容的提问来源于stack exchange，提问作者MeTe-30