FastAPI阿拉伯语模板如何实现自动从右到左渲染？

方法1：通过Jinja2模板动态设置HTML根元素的dir属性 #

在FastAPI中获取当前请求的语言（比如从Accept-Language头解析），将语言变量传入Jinja2模板，然后在HTML根标签中根据语言自动切换方向属性：

1. FastAPI端传递语言变量：

from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates

app = FastAPI()
templates = Jinja2Templates(directory="templates")

@app.get("/")
async def root(request: Request):
    # 解析Accept-Language头获取当前语言
    current_lang = request.headers.get("Accept-Language", "en").split(",")[0].split("-")[0]
    return templates.TemplateResponse("index.html", {"request": request, "current_lang": current_lang})

2. 在Jinja2基础模板（如base.html）中设置HTML属性：

<!DOCTYPE html>
<html lang="{{ current_lang }}" dir="{{ 'rtl' if current_lang == 'ar' else 'ltr' }}">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

所有子模板继承该基础模板即可，无需手动给每个页面添加样式。

方法2：使用CSS语言选择器自动适配RTL #

在全局CSS中添加基于语言属性的规则，只要HTML标签设置了lang属性，就自动切换排版方向：

1. 先在模板的HTML标签中设置lang属性（同方法1的传参逻辑）：

<html lang="{{ current_lang }}">

2. 在全局CSS文件中添加规则：

html:lang(ar) {
    direction: rtl;
    /* 可选：补充RTL适配的文本对齐、内边距等样式 */
    text-align: right;
}

html:lang(en), html:lang(zh) {
    direction: ltr;
    text-align: left;
}

这种方式无需修改HTML结构，仅通过CSS规则实现多语言排版适配，适合全局样式统一管理。

方法3：通过FastAPI中间件自动注入RTL配置 #

编写中间件，在响应返回前检查当前语言，若为阿拉伯语则动态修改HTML根元素的属性：

from fastapi import Request
from starlette.middleware.base import BaseHTTPMiddleware
from starlette.responses import HTMLResponse

class RTLMiddleware(BaseHTTPMiddleware):
    async def dispatch(self, request: Request, call_next):
        response = await call_next(request)
        if isinstance(response, HTMLResponse):
            current_lang = request.headers.get("Accept-Language", "en").split(",")[0].split("-")[0]
            if current_lang == "ar":
                # 给HTML标签添加dir="rtl"属性
                response.body = response.body.replace(b'<html', b'<html dir="rtl"')
        return response

app.add_middleware(RTLMiddleware)

这种方式无需修改现有模板，适合已有大量模板不想改动的场景，注意如果HTML标签已有其他属性，需调整替换逻辑避免冲突。

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