I've been a passionate software developer for almost 30 years and currently a tech-savvy IT manager. In my spare time, I tinker with things like this blog, because creating software never lets you go. Here is more about me ...
#TIL | Display horizontal container initially scrolled to the right
On my /stats page, I used the wonderful web component activity-graph to implement an Activity Graph that displays my posts over the entire lifetime of my blog. Now, as is common in Western cultures, the graph starts on the left side and is displayed horizontally. This means that the most recent and interesting entries are on the very right, and you have to scroll to the end to see them. The question was how to make the graph display directly scrolled to the far right at the start, and the solution is quite simple and uses the component’s various HTML levels:
<div class="activity-graph-wrapper">
<activity-graph>
<figure>
<table>
...
</table>
</figure>
</activity-graph>
</div>
Using the CSS direction property, I first rotate the graph in the reading direction to RTL (right to left) at the top level, then rotate it back again at the next lower level. This means that the browser displays the graph starting on the right, but everything below has the usual western-style reading direction.
.activity-graph-wrapper figure {
direction: rtl;
}
.activity-graph-wrapper figure table {
direction: ltr;
}
#CSS #TIL
There are many Mastodon instances out there.
Tell me yours and I will redirect you to the share dialog of your server: