Hi! When I create a new site in Hebrew, and add a taxonomy field, I have some row braking/jumbling in some cases, especially in row-brakes.

I think this problem is global in Drupal and deals with all classy-based themes. It happened some time ago so I don't have an image but I was able to fix this with this huge reset (I used float: right as Hebrew is RTL language):

/* taxonomy and associate code */ 
.field--type-entity-reference {display: block !important; width: 100% !important; padding: 0 0 0 0; margin: 0 auto 0}
	.field--type-entity-reference .field__label {float: right; padding: 0 0 0 0; margin: 0 auto 0 15px; font-weight: bold}
	.field--type-entity-reference .field__item  {float: right; display: inline; margin: 0 0 0 15px}  /* Each vocabulary field-itemmm. */ 
	.field--type-entity-reference .field__items {float: none; padding: 0 0 0 0; margin: 0 auto 0}  /* The WHOLE ROW containing each vocabulary field-itemmm. */   /* float: none fixes break problem */ 
.field__label:after {content: ": "}

		.feed-icon {display: none}

Note: I gave further styling for specific fields as well (it appeared here and was deleted in this edit).

CommentFileSizeAuthor
#6 blog-arabic.png84.4 KBleahtard
#6 blog-english.png84.32 KBleahtard

Comments

Benia created an issue. See original summary.

Benia’s picture

Benia commented
Issue summary: View changes
joelpittet’s picture

joelpittet
he/him
Primary language English
Location Vancouver
commented

Could you add a screenshot to illustrate and is this a core issue? Maybe it should be in that queue?

Benia’s picture

Benia commented

There are many ways the problems can appear, I can't make screenshots to all... Sadly there are so many open issues in the issue queue, and front-end issues barely get any attention there; If it wasn't the case I would publish it there; Given this effects Basic, I published this here...

Benia’s picture

Benia commented

I can't give any time on this in the coming month but if you'll have an RTL project with Basic and you will see any taxonomy fields malformations, just try this solution (it solved the problems in about 95%).

leahtard’s picture

leahtard commented
Status: Active » Needs work
StatusFileSize
new blog-english.png84.32 KB
new blog-arabic.png84.4 KB

Thanks for reporting Benia. I did a little testing on a version of Basic without any modifications. This is a necessary step when troubleshooting as we need to understand if there is an issue with Basic's base code or if you need assistance with your adaptation of the Basic theme. Here is what I saw:

blog-engllish.png: By default, taxonomy terms are stacked. This is also becasue Basic does not ship with any classes wrapped around fields. This is by design as we want to allow Basic users to add their own classes and style accordingly.

    <div>Tags</div>
          <div>
              <div><a href="/basic-d8/taxonomy/term/1" property="schema:about" hreflang="en">Tag1</a></div>
              <div><a href="/basic-d8/taxonomy/term/2" property="schema:about" hreflang="en">Tag2</a></div>
           </div>
      </div>

blog-arabic.png: Here we see an issue. While the majority of content shifts to right aligned, the blog content does not. Here is what I see happening:

In English, our article tag is:
<article data-history-node-id="2" role="article" about="/basic-d8/node/2" typeof="schema:Article" class="node">

In Arabic, it is:
<article data-history-node-id="2" role="article" lang="en" dir="ltr" about="/basic-d8/node/2" typeof="schema:Article" class="node">

The node template populating this line reads:
<article{{ attributes.addClass(classes) }}>

If I update this to remove the adding of classes, the content aligns to the right as it should.
<article>

I am unsure if this error sits with Core or Basic but we should investigate why {{ attributes.addClass(classes) }} is adding the wrong language info.

Cheers, Leah

leahtard’s picture

leahtard commented
Status: Needs work » Closed (works as designed)

So, I stepped away from this yesterday and it occurred to me that I hadn't actually translated the particular node I was testing with. After translating the node, all behaved as it should. I am going to mark this one as works as designed.

Beina, I elaborate on your styles above, I would recommend this markup to put the taxonomy items inline for LTR and RTL:

If your markup looks like this:

<div class="article__tags">
    <div class="article__tags-label">Tags</div>
    <div class="article__tags-tags">
          <div class="article__tags-tag"><a href="#">Tag1</a></div>
          <div class="article__tags-tag"><a href="#">Tag2</a></div>
     </div>
</div>

You can display it inline with:

.article__tags-label, .article__tags-tags, .article__tags-tag {
    display: inline;
}

Cheers, Leah

Benia’s picture

Benia commented
Issue summary: View changes