[Bug Report] Arabic tags are stick together

[TheAwiteb]

Bug Report

When I wrote a tags in Arabic, the tags are stick together without any space between them.

Environment

Zola version: zola 0.18.0
tabi version or commit: 8b5a131

Expected Behavior

Something like (I dont know HTML/CSS that match, so this is my fix but I don't think is the good one) I adding space btw

<div class="bloglist-tags">
    <a class="tag" href="http://127.0.0.1:1111/tags/shrh/"> شرح</a>
    <a class="tag" href="http://127.0.0.1:1111/tags/shy/"> شي</a>
    <a class="tag" href="http://127.0.0.1:1111/tags/m/"> ما</a>
</div>

Current Behavior

<div class="bloglist-tags">
    <a class="tag" href="http://127.0.0.1:1111/tags/shrh/">شرح</a>
    <a class="tag" href="http://127.0.0.1:1111/tags/shy/">شي</a>
    <a class="tag" href="http://127.0.0.1:1111/tags/m/">ما</a>
</div>

Clearly Describe the Bug

The tags are stick together without any space between them and comes like this شرحشيما instead of شرح شي ما

Step to Reproduce

Write a tags in Arabic and see the result.

[TheAwiteb]

If adding a space is a suitable solution, then I will create a PR for it, or you can suggest another solution

[welpo]

Thanks for reporting this bug!

Is this still an issue if you set the language to Arabic after #262?

Also: in both images (expected vs current behavior) I see good spacing between the tags. I'm not sure I understand the bug. From your description, I expected to see a bunch of grouped tags like "شرحشيما".

[TheAwiteb]

Is this still an issue if you set the language to Arabic after #262?

Yes, I actually test it in it's branch, but didn't mention it because it's was not released yet

I'm not sure I understand the bug. From your description, I expected to see a bunch of grouped tags like "شرحشيما".

No, there is 3 tags which is "شرح", "شي and "ما", and it's should looks as separated tags of course, but now it's look like one word "شرحشيما" with spaces between the actual words, some like "شرحـ ـشيـ ـما"

[welpo]

now it's look like one word "شرحشيما" with spaces between the actual words, some like "شرحـ ـشيـ ـما"

So there is space, but not enough of it?

[TheAwiteb]

now it's look like one word "شرحشيما" with spaces between the actual words, some like "شرحـ ـشيـ ـما"

So there is space, but not enough of it?

I'm not a frontend developer so I can't point for the issue exactly, but what I know there is space between tags, but there is no space between the words, so because that it's comes like one word. It doesn't really make sense, but yeah this is Arabic

[welpo]

Don't worry, I'm just trying to understand the issue.

So:

• Spaces between tags are OK ✅
• From this, I take that single-word tags look okay ✅
• If a single tag has spaces (like "multi word tag"), the issue appears ⚠️

Am I understanding it right?

[TheAwiteb]

the issue appears

No, the tags of the example above is

[taxonomies]
tags = ["شرح", "شي", "ما"]

[welpo]

If I add the spaces like this:

<div class="bloglist-tags">
    <a class="tag" href="http://127.0.0.1:1111/tags/shrh/"> شرح</a>
    <a class="tag" href="http://127.0.0.1:1111/tags/shy/"> شي</a>
    <a class="tag" href="http://127.0.0.1:1111/tags/m/"> ما</a>
</div>

It looks like:

If I don't change anything (current behaviour), the tags look like:

---

To my non-Arabic-reading eyes, this looks like a minor difference? Is the top image the ideal, and the bottom the problem?

[TheAwiteb]

If I don't change anything (current behaviour), the tags look like:

Is not same as my output above!! This looks good

[welpo]

Is this the problem? (Using your two images from the first post)

[TheAwiteb]

Is this the problem? (Using your two images from the first post)

Yes, also the second and last tag.

Tag	Become	Reason (in Arabic)
شرح	شرحـ	Because it's stick with the second tag
شي	ـشيـ	Because it's stick with the first and last tag
ما	ـما	Because it's stick with the second tag

[welpo]

I can reproduce the issue on Chromium. It looks fine on Firefox/Safari.

Are you using a Chromium browser (Chrome, Brave, Vivaldi…)?

[TheAwiteb]

Are you using a Chromium browser (Chrome, Brave, Vivaldi…)?

Yes Brave

[welpo]

Can you try this?
On sass/parts/_posts_list.scss add display: inline-block; for the tags:

    .bloglist-tags {
        margin-top: 0.1rem;

        .tag {
            display: inline-block;
            margin-right: 0.7rem;
            font-weight: 400;
            font-size: 0.75rem;
            text-transform: uppercase;
        }

Does this solve the issue?

[TheAwiteb]

Does this solve the issue?

I'll soon in the morning, now it's 1:06 AM and I close the laptop :)

[TheAwiteb]

Does this solve the issue?

Yes it's, I'll open a PR