Tiny Tiny RSS: Community

Custom CSS to split article content in columns


#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;
}


#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.