Plume-org / Plume

Federated blogging application, thanks to ActivityPub (now on https://git.joinplu.me/ — this is just a mirror)

Home Page:https://joinplu.me

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

RTL problem in post card

mskf1383 opened this issue · comments

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