[Bug Report] Arabic tags are stick together
TheAwiteb opened this issue · comments
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.
If adding a space is a suitable solution, then I will create a PR for it, or you can suggest another solution
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 "شرحشيما".
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 "شرحـ ـشيـ ـما"
now it's look like one word "شرحشيما" with spaces between the actual words, some like "شرحـ ـشيـ ـما"
So there is space, but not enough of it?
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
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?
the issue appears
No, the tags of the example above is
[taxonomies]
tags = ["شرح", "شي", "ما"]
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?
I can reproduce the issue on Chromium. It looks fine on Firefox/Safari.
Are you using a Chromium browser (Chrome, Brave, Vivaldi…)?
Are you using a Chromium browser (Chrome, Brave, Vivaldi…)?
Yes Brave
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?
Does this solve the issue?
I'll soon in the morning, now it's 1:06 AM and I close the laptop :)
Does this solve the issue?
Yes it's, I'll open a PR