Thinkific平台HTML设置RTL阿拉伯语课程文字方向失效问题咨询

配置失败核心原因 #

网传添加<html dir="rtl" lang="ar">的方案无法生效、无法保存，是因为Thinkific课程内容的代码视图仅支持编辑正文容器内的HTML片段，平台课程页本身已经预置了完整的HTML文档结构，插入重复的顶层<html>标签会触发编辑器的安全过滤规则，直接被拦截丢弃。
此前手动添加的text-align: right样式仅实现了文字右对齐，没有触发浏览器原生的RTL双向排版算法，因此无法解决标点错位、混排英文顺序错乱、列表/数字位置颠倒的问题。

逐课程手动配置步骤 #

• 打开对应课程模块的代码视图，找到最外层的<div class="fr-view">标签，直接为其添加RTL相关属性，修改为：

<div class="fr-view" dir="rtl" lang="ar">

该属性会告知浏览器当前容器内所有内容遵循阿拉伯语从右到左的排版规则，自动修正标点、数字、列表符号的位置，以及阿英混排时的词语顺序。

• 处理阿英混排特殊场景：如果内容中存在需要保持从左到右顺序的片段（如英文品牌名、纯数字编号、英文术语），给对应内容套一层行内标签，添加LTR属性避免顺序错乱，示例：

<p>سيكون التسجيل متاحا عبر منصة <span dir="ltr" style="unicode-bidi: embed; display: inline-block;">Thinkific</span> بدءا من 1 أكتوبر.</p>

• 原有代码中手动添加的text-align: right样式可全部保留，不会和RTL属性冲突；使用列表、表格等组件时无需额外调整结构，外层容器的RTL属性会自动将项目符号、序号调整到内容右侧，符合阿拉伯语阅读习惯。

全站批量配置方案 #

如果需要上线整站阿拉伯语课程，无需逐模块修改代码，可直接在Thinkific后台「站点设置-自定义代码」的站点页脚注入位置添加全局样式，一次性适配所有课程内容：

<style>
.course-content .fr-view {
  direction: rtl;
  unicode-bidi: embed;
  text-align: right;
}
/* 混排英文/数字专用类，需要时给对应内容加class="ltr-fragment"即可 */
.ltr-fragment {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}
</style>

注意事项 #

• 禁止在课程代码视图中插入<html>、<head>、<body>类顶层文档标签，这类标签都会被编辑器安全规则过滤，导致保存失败。
• 排版效果请以保存后的学员端预览页面为准，编辑器内置的实时预览窗口未加载全站排版规则，和实际展示效果存在偏差。

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