Alexandria项目文本高亮重叠问题分析与解决方案

问题背景

在Alexandria阅读器项目中，用户报告了一个关于文本高亮显示的技术问题。当用户选择跨越多行的文本并应用高亮颜色时，会出现高亮区域颜色不一致的现象，特别是在行与行之间的间隙处会出现颜色加深的情况。

问题现象

通过用户提供的截图可以观察到：

1. 在默认行高设置(100%)下，高亮区域在行间过渡处出现明显的颜色加深
2. 当调整行高为负值(-5%)时，这种颜色不一致现象得到改善
3. 问题在不同主题下均会出现，与字体设置无关

技术原因分析

经过深入分析，发现问题的根源在于高亮实现机制的设计：

1. SVG矩形重叠：系统使用SVG矩形来实现文本高亮效果，每个文本行对应一个独立的矩形元素
2. 固定高度设计：这些矩形元素采用了固定的高度值，没有根据实际行高(line-height)动态调整
3. 透明度叠加效应：由于矩形设置了0.3的透明度，当相邻矩形重叠时，重叠区域的透明度会叠加，导致视觉效果上颜色变深

解决方案

项目维护者采取了以下改进措施：

1. 动态高度计算：修改高亮矩形的实现，使其高度能够根据用户设置的行高和字体大小动态计算
2. 减少重叠区域：通过精确计算矩形位置和尺寸，尽可能减少不必要的重叠

效果评估

根据维护者的测试反馈：

1. 新方案显著改善了颜色不一致的问题
2. 虽然不能完全消除所有情况下的重叠，但视觉效果已经大幅提升
3. 解决方案对不同字体大小和行高设置都有良好的适应性

技术启示

这个问题为我们提供了几个重要的技术启示：

1. UI元素尺寸的动态计算：在实现文本相关效果时，必须考虑用户可自定义的排版参数
2. 透明度使用的注意事项：当使用透明度效果时，需要特别注意元素重叠可能带来的视觉差异
3. 响应式设计原则：UI组件应该能够适应各种用户设置，而不是采用固定参数

该修复方案已纳入项目代码库，将在下一个版本中发布给所有用户。