# Mix RTL and LTR

**URL:** <https://discourse.gohugo.io/t/mix-rtl-and-ltr/48734>\
**Category:** support\
**Created:** [March 9, 2024, 4:14pm UTC](https://discourse.gohugo.io/t/mix-rtl-and-ltr/48734 "2024-03-09T16:14:11Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![be4zad](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/be4zad/32/21544_2.png) [@be4zad](https://discourse.gohugo.io/u/be4zad)\
**Post date:** [March 9, 2024, 4:14pm UTC](https://discourse.gohugo.io/t/mix-rtl-and-ltr/48734/1 "2024-03-09T16:14:11Z")

</div>

How to use both LTR and RTL languages in one content? It seems hugo doesn’t support it.

However we can fix it manually by this tag in most markdown viewers:

```auto
<div dir="rtl">
سلام
</dir>

```

But hugo removes it:

```auto
<!-- raw HTML omitted -->

```

I have not much experience in css but are there any reasons why not hugo doesn’t use auto direction?

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 9, 2024, 4:20pm UTC](https://discourse.gohugo.io/t/mix-rtl-and-ltr/48734/2 "2024-03-09T16:20:48Z")

</div>

> [@be4zad](#):
>
> But hugo removes it:

Search this forum.

[https://discourse.gohugo.io/search?q=raw%20HTML%20omitted](https://discourse.gohugo.io/search?q=raw%20HTML%20omitted)

A quick search of over 20,000 topics will often answer your question. Please be sure to read about [requesting help](https://discourse.gohugo.io/t/requesting-help/9132) before asking your first question.

---

<div class="post-metadata">

**Author:** ![be4zad](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/be4zad/32/21544_2.png) [@be4zad](https://discourse.gohugo.io/u/be4zad)\
**Post date:** [March 9, 2024, 4:56pm UTC](https://discourse.gohugo.io/t/mix-rtl-and-ltr/48734/3 "2024-03-09T16:56:07Z")

</div>

Ok. Then I need to write a lot of this tag and this will be difficult. But probably we don’t want to wiping out the issue. Won’t fix?

---

<div class="post-metadata">

**Author:** ![frjo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/frjo/32/18626_2.png) [@frjo](https://discourse.gohugo.io/u/frjo)\
**Post date:** [March 9, 2024, 5:07pm UTC](https://discourse.gohugo.io/t/mix-rtl-and-ltr/48734/4 "2024-03-09T17:07:05Z")

</div>

The way to set directionality is to set the “dir” attribute. No way around that.

You can do it by hardcoding the HTML as you show above. In most cases I think it would be easier to use shortcodes or markdown attributes.

- [Create your own shortcodes | Hugo](https://gohugo.io/templates/shortcode-templates/)
- [Markdown attributes | Hugo](https://gohugo.io/content-management/markdown-attributes/)

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 9, 2024, 5:20pm UTC](https://discourse.gohugo.io/t/mix-rtl-and-ltr/48734/5 "2024-03-09T17:20:03Z")

</div>

This is an interesting idea. Set dir=auto in something like `<main dir=auto>` then use JS to cascade the value down. I guess `dir=auto` is not inherited by descendent elements.

[https://stackoverflow.com/a/16520431](https://stackoverflow.com/a/16520431)

---

<div class="post-metadata">

**Author:** ![be4zad](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/be4zad/32/21544_2.png) [@be4zad](https://discourse.gohugo.io/u/be4zad)\
**Post date:** [March 9, 2024, 5:36pm UTC](https://discourse.gohugo.io/t/mix-rtl-and-ltr/48734/6 "2024-03-09T17:36:03Z")

</div>

Thank you. Markdown attributes make code much less and easy to read. Now I did it temporarily:

config.yml:

```auto
markup:
  goldmark:
    parser:
      attribute:
        block: true
        title: true

```

content:

```auto
سلام
{dir="rtl"}

```

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 9, 2024, 6:07pm UTC](https://discourse.gohugo.io/t/mix-rtl-and-ltr/48734/7 "2024-03-09T18:07:00Z")

</div>

> [@be4zad](#):
>
> Now I did it temporarily:

Just to be clear… there is nothing to fix here. Hugo’s markdown renderer adheres to the CommonMark and GFM specification. You’d have to request a change to the specification, which will never happen.

Using markdown attributes makes sense to me… good thinking.

---

<div class="post-metadata">

**Author:** ![frjo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/frjo/32/18626_2.png) [@frjo](https://discourse.gohugo.io/u/frjo)\
**Post date:** [March 9, 2024, 6:09pm UTC](https://discourse.gohugo.io/t/mix-rtl-and-ltr/48734/8 "2024-03-09T18:09:22Z")

</div>

> [@jmooring](#):
>
> Set dir=auto in something like `<main dir=auto>` then use JS to cascade the value down.

I do sites with RTL languages from time to time but have completely missed this possibility. Thanks for poining it out! I think I have a use case for it directly.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [March 11, 2024, 6:09pm UTC](https://discourse.gohugo.io/t/mix-rtl-and-ltr/48734/9 "2024-03-11T18:09:47Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.