RTL problem in post card

mskf1383 commented

2021-09-21 07:45:41 +00:00

Contributor

Post preview of RTL posts are like this:

I do some template change with my browser inspect element and make that:

HTML:

<header>
    <div class="controls">
         <a class="button" href="/~/Tessssssssssssssssssst/test/edit">Edit</a>
     </div>
        <h3 class="p-name" dir="auto">
            <a class="u-url" href="/~/Tessssssssssssssssssst/test">
                test
            </a>
        </h3>
</header>

I move div under h3 and move dir="auto" from h3 to header:

<header dir="auto">
        <h3 class="p-name">
            <a class="u-url" href="/~/Tessssssssssssssssssst/test">
                test
            </a>
        </h3>
    <div class="controls">
         <a class="button" href="/~/Tessssssssssssssssssst/test/edit">Edit</a>
     </div>
</header>

CSS:

.card h3 {
    flex-grow: 1;
    margin: 0;
    font-family: "Vazir","Playfair Display",serif;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 1.75;
    display: inline-block; /* New */
}
.card .controls {
    float: inline-end; /* Changed */
}
.card main {
    font-family: "Vazir","Lora",serif;
    font-size: 1em;
    line-height: 1.25;
    text-align: initial; /* Changed */
}

Good luck

Post preview of RTL posts are like this: ![Screenshot from 2021-09-21 10-48-07](https://user-images.githubusercontent.com/50908329/134121417-479312b0-67a5-4b6d-be01-c35d9d7e418b.png) I do some template change with my browser inspect element and make that: ![Screenshot from 2021-09-21 10-47-43](https://user-images.githubusercontent.com/50908329/134122301-bb25e377-da75-490d-b1b0-49a15fea917d.png) HTML: ```html <header> <div class="controls"> <a class="button" href="/~/Tessssssssssssssssssst/test/edit">Edit</a> </div> <h3 class="p-name" dir="auto"> <a class="u-url" href="/~/Tessssssssssssssssssst/test"> test </a> </h3> </header> ``` I move `div` under `h3` and move `dir="auto"` from `h3` to `header`: ```html <header dir="auto"> <h3 class="p-name"> <a class="u-url" href="/~/Tessssssssssssssssssst/test"> test </a> </h3> <div class="controls"> <a class="button" href="/~/Tessssssssssssssssssst/test/edit">Edit</a> </div> </header> ``` CSS: ```css .card h3 { flex-grow: 1; margin: 0; font-family: "Vazir","Playfair Display",serif; font-size: 1.75em; font-weight: normal; line-height: 1.75; display: inline-block; /* New */ } .card .controls { float: inline-end; /* Changed */ } .card main { font-family: "Vazir","Lora",serif; font-size: 1em; line-height: 1.25; text-align: initial; /* Changed */ } ``` Good luck

Aarkon commented

2021-11-04 10:17:30 +00:00

I'm neither a contributor to this project nor an expert on the source code, so this may be just my sheer incompetence, but honestly, I fail to see a problem description in this issue.

mskf1383 commented

2021-11-04 10:44:14 +00:00

Author

Contributor

I'm neither a contributor to this project nor an expert on the source code, so this may be just my sheer incompetence, but honestly, I fail to see a problem description in this issue.

In first picture the right post card is for a post that written in RTL language and must show RTL. but there is some problems. for example the Edit buttom is in the right but it must be in the left. and the post description must be RTL but it is LTR.

The first picture is wrong and the second one is right.

I hope my explanation be understandable!

> I'm neither a contributor to this project nor an expert on the source code, so this may be just my sheer incompetence, but honestly, I fail to see a problem description in this issue. In first picture the right post card is for a post that written in RTL language and must show RTL. but there is some problems. for example the `Edit` buttom is in the right but it must be in the left. and the post description must be RTL but it is LTR. The first picture is wrong and the second one is right. I hope my explanation be understandable!

Aarkon commented

2021-11-04 11:26:10 +00:00

Ah, Ok, that makes it a lot more clear. Thank you for your explanation!

So you wish Plume's behaviour to change from what is in your first set of screenshots to what is depicted in the second one, and you're supplying what you had to change in the browser to achieve that.

Should I ever get involved, this sounds like a fruit hanging low enough, but again, I'm absolutley clueless and I'm commenting here just for fun. ;)

Ah, Ok, that makes it a lot more clear. Thank you for your explanation! So you wish Plume's behaviour to change from what is in your first set of screenshots to what is depicted in the second one, and you're supplying what you had to change in the browser to achieve that. Should I ever get involved, this sounds like a fruit hanging low enough, but again, I'm absolutley clueless and I'm commenting here just for fun. ;)