Period before and not after message

[Zodiac1978]

This is because of a CSS issue:

#statify_chart { color: #a7aaad; direction: rtl; text-align: center; }

This is wrong direction: rtl and is causing the issue.

Thanks to @Drivingralle for reporting it to me.

More context: https://github.com/pluginkollektiv/statify/pull/101 https://github.com/pluginkollektiv/statify/commit/9c9fc3d29dd55ebc9f6314a0d1cf543da6c6b2ab

[stklcode]

Which version? 1.8.4 and/or latest snapshot?

For 1.8.4 it’s defined here: https://github.com/pluginkollektiv/statify/blob/7b5d8ad03d28bad4dfd044ced75f45a34031f616/views/widget-front.php#L20

Now it is handled via JS and the texts are generated here: https://github.com/pluginkollektiv/statify/blob/2ad7be47730090a944a67e1b7c857a2a78187592/inc/class-statify-dashboard.php#L140-L141

Edit Overlooked the rtl part. Guess it should affect both versions.

[Zodiac1978]

Which version? 1.8.4 and/or latest snapshot?

1.8.4 from the official directory. But if this at the same place the CSS issue still stands.

[Zodiac1978]

If I disable this code direction: rtl; we could restore the right aligned layout of the labels wit this CSS:

#statify_chart .ct-label.ct-vertical.ct-start {
  justify-content: flex-end;
}

Changing flex-start to flex-end.

Unfortunately the width is not enough and is cropping the label. Need to look why this happens. Maybe someone knows it and can chime in. Not sure how the width is calculated.

[Zodiac1978]

[stklcode]

There is no visual difference when removing the direction and flex overrides completly. There is a proper label alignment in the Chartist CSS already...

 #statify_chart {
        color: #a7aaad;
        flex: 0 0 100%;
-       direction: rtl;
        height: 140px;
        margin: 1em -0.5em;
        overflow-x: auto;
@@ -16,13 +15,6 @@
        margin: 1em;
 }

-#statify_chart .ct-label.ct-vertical.ct-start {
-       -webkit-justify-content: flex-start;
-       justify-content: flex-start;
-       text-align: left;
-       text-anchor: start;
-}
-

[stklcode]

Got it.

The rtl was introduced for scollable charts. Removing the stuff (previous comment) is visually identical, but the scrollbar is at the left end by default. With rtl it is right.

Could be resolved reverting the direction for all children of the container:

#statify_chart * {
    direction: ltr;
}

[Zodiac1978]

But what if the locale is right-to-left? Like in Hebrew?

[stklcode]

Good point. Taken care of that in the PR:

#statify_chart * {
    direction: ltr;
}

body.rtl #statify_chart * {
    direction: rtl;
}