Custom CSS to split article content in columns

Tiny Tiny RSS Themes and Plugins
1

Hi there,
I’m running tt-rss for a lot of years now on my home-server, so first of all thanks for this great piece of software! :wink:

I just want to share some of my custom CSS, to make full-text feeds much more comfortable to read. Especially on big screens, 4K resolution,…

By default, the lines go all over the screen, and inline-images scale to the full screen width.

The CSS splits the content into columns (justified, with hyphenation) and adds horizontal scroll bars if necessary. The layout looks similar to a regular newspaper.
It works fine with all of my feeds, and night.css-Theme.

You can just paste the code to the custom-css section in the settings.
The first section changes the item-order in the headlines to my preference (optional)

/* optional section: change the order of objects in "fresh-articles" view */
.cdm .header .left        { order: 1; }  /* (de-)select | mark | publish */
.cdm .header .titleWrap   { order: 4; }  /* article title */
.cdm div.header div.feed  { order: 3; }  /* feed name */
.cdm .header span.updated { order: 5; }  /* date/time */
.cdm .header .right       { order: 2; }  /* feed icon */
i.icon-score, i.pub-pic   { display: none; }  /* hide "publish"-icon */


/* columns */
.cdm .content-inner {
    columns: auto 350px;
    column-rule: 1px dotted;
    max-height: 80vh;
    overflow-x: scroll;
    hyphens: auto;
    text-align: justify;
}

/* set a minimum-column-height */
.cdm .content-inner::after {
    content: "x";
    display: block;
    line-height: 20;
    break-before: column;
    break-inside: avoid;
    visibility: hidden;
}

ttrss

2

Wow. Looks grand. Thanks. Of limited use to me though because my reading is 90% titles, 10% content, and thus three vertical panes.

3

Looks nice - but the “expand” button / function is gone for longer articles…

4

hmm, yes, but an expand button probably makes no sense in this case anyway, because the height is limited to the screen height, and all overflowing content goes to the right

5

i wouldn’t use it myself but it’s nice looking, op

6

Thanks for that, I always wanted to do that, but struggled with it. I guess I missed the max-height + overflow-x combination.

However, to make it really useful, I wish it could scroll horizontally with the mouse, instead of just vertically… Because for long article, I had to drag’n’drop the scrollbar, which is not very handy…

7

for me this works on my notebook, with touchpad (supports 2-finger horizontal scrolling),
but I agree…
Maybe also keyboard-navigation (scrolling horizontal by left/right key) would be nice.
But I don’t think it is possible just with CSS, would need some JavaScript at least

8

After a quick search, I see two things for scrolling:

  1. Firefox seems to have added it via Shift + scroll. See this addon
  2. There are some CSS tricks to simulate it. See this article. But this seems to be a hack. Maybe I can have some time tomorrow to test this.
9

I am now using ScrollAnywhere. This is really a good extension, and it also fix horizontal scrolling issues.

10

I think that’s a nice addon. The same extension is also available for chrome-based browsers:
https://chrome.google.com/webstore/detail/scrollanywhere/jehmdpemhgfgjblpkilmeoafmkhbckhi

11

You may get this working with pure CSS by rotating. Example: Pure CSS Horizontal Scrolling | CSS-Tricks - CSS-Tricks

e: Oh crap, I totally missed that this was already mentioned. Either way, I checked it out and it’s too tricky (needs fixed heights etc.)

You can use Shift+scroll in Firefox without any add-ons, though, see shortcut keys - Horizontal scrolling in Firefox to Shift+Mouse Scroll (instead of Back/Forward) - Ask Ubuntu