阿拉伯语文本CSS打字机动画字符间距异常问题求助

阿拉伯语属于草书连写脚本，字符渲染逻辑和英语等非连写语言差异明显，你的问题主要由三个核心原因导致：强制字符间距破坏连写、未匹配RTL文本方向、固定步骤数不匹配字符宽度。以下是具体解决方案：

核心修改点 #

• 移除letter-spacing属性：阿拉伯语字母依赖上下文连写，该属性会在字符间强制插入固定间距，直接打断字母的自然连写结构，引发异常空格。
• 设置RTL文本方向：阿拉伯语是从右到左（RTL）书写的语言，需为容器添加direction: rtl和text-align: right，确保文本布局与动画扩展方向匹配书写逻辑。
• 调整光标与动画步骤：RTL布局下，打字光标应显示在文本左侧，将border-right改为border-left；同时把steps(40, end)的步骤数改为文本实际字符数（含空格），避免因字符宽度不均导致的动画错位。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .typewriter{
            padding: 20px;
            direction: rtl;
            text-align: right;
        }
        .typewriter h1 {
            text-transform: none!important;
            overflow: hidden;
            border-left: .15em solid orange;
            white-space: nowrap;
            margin: 0;
            animation: typing 3.5s steps(10, end), blink-caret .75s step-end infinite;
        }

        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }

        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: orange; }
        }
    </style>
</head>
<body>
    <div class="typewriter">
        <h1>اهلا وسهلا</h1>
    </div>
</body>
</html>

动态适配文本长度（可选） #

如果文本内容不固定，可通过JavaScript自动获取字符数，避免手动计算步骤数：

const typewriterHeading = document.querySelector('.typewriter h1');
const charLength = typewriterHeading.textContent.length;
typewriterHeading.style.animation = `typing 3.5s steps(${charLength}, end), blink-caret .75s step-end infinite`;

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