Plume-org / Plume

Federated blogging application, thanks to ActivityPub (now on https://git.joinplu.me/ — this is just a mirror)
https://joinplu.me
GNU Affero General Public License v3.0
2.11k stars 133 forks source link

RTL problem in post card #858

Closed mskf1383 closed 3 years ago

mskf1383 commented 3 years ago

Post preview of RTL posts are like this: Screenshot from 2021-09-21 10-48-07

I do some template change with my browser inspect element and make that: Screenshot from 2021-09-21 10-47-43

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

mskf1383 commented 3 years ago

I move this to Gitea repo: https://git.joinplu.me/Plume/Plume/issues/950