1. 78
  1. 12

    great idea and execution! especially for the mono toned images! I love it.

    however, maybe you should disable the scroll effect on article content and make the page background more paper-like :D

    Do you plan to open source it?

    1. 6

      thanks! the scroll effect is one of the tools i use to hide a lot of the sins of not being very good at laying out the articles. I’d like to disable it if i can but i think first i need to solve the problems mentioned here https://lobste.rs/s/ureotv/webpage_serverside_rendered_lo_fi_rss#c_3topbx, or truncate the articles to their box size in javascript, not sure which yet. If i truncate i’ll either have a modal view to the whole article, or just link directly to the source.

      as far as open sourcing it, yeah i think i will. depending on how much people like this i’ll probably add in the ability to choose your own feeds, categories, and layouts and might have a hosted version people could pay for, or an open source one you can host yourself.

      1. 4

        That’s great to hear, would love to see the source, set something like this up for myself. It looks great!

        1. 1

          Maybe use the column layout like iht.com used years ago.


          1. 1

            great! keep up the good work. i’m looking forward for a hosted version, i’ll definitely pay for it!

            1. 1

              Very cool!

              I wonder if CSS grid can help with the layout. It seems like you would want to place articles into columns left-to-right like this: https://jsfiddle.net/4w8ysrqo/1/

              The part I can’t figure out is how to automatically set the height in grid cells based on the height in pixels.

          2. 7

            Unless it’s intentional, you might want to make it so that text it correctly justified and hyphenated instead of splitting lines in the middle of words. It would also be great if the body text were at a more readable size.

            Either way, it looks and feels really cool! I like the lo-fi graphics.

            1. 1

              I tried using word-break: break-word and text-align: justify on my browser and it’s slightly (?) better. But there are still massive rivers in the text :/

              1. 1

                hyphens: auto, maybe?

                1. 3

                  I have the following in my CSS that seems to work fine. I’ve forgotten what each one does though.

                  hyphens:               auto;
                  hyphenate-limit-chars: 6 3 3;
                  hyphenate-limit-lines: 2;
                  hyphenate-limit-last:  always;
                  hyphenate-limit-zone:  8%
              2. 1

                yeah you’re right, i’ve been playing around with different methods of line breaking, and will probably continue to do so. The biggest challenge with this has been getting articles of arbitrary size to fit within a given layout. I might move the backend to work out the best layout dynamically based on the articles, rather than finding the best articles for a given layout.

                I’m torn on text size, to me this is one of the things that most authentically make it feel like a newspaper, and the application i’m interested in is reading on my ipad, where i can zoom in on any particular article, but i really value accessibility, so i’ll have a think about what i can do.

                1. 2

                  About the font size: I just installed all of the proprietary Microsoft fonts on my Linux system (for a different reason) and now it reads much more easily. Going from Liberation Serif to actual Georgia makes the text appear to be a lot larger as well. I think this is an issue just because Georgia looks really big and most other fonts are much smaller in comparison. Maybe you could specify Merriweather as a fallback since it also is pretty large. That said, maybe you don’t want to introduce a web font dependency.

                  Edit: you already have another .woff, so maybe you could add one for the body font.

                  1. 1

                    I’m torn on text size, to me this is one of the things that most authentically make it feel like a newspaper,

                    The only thing which makes newspaper column width legible is the justification of the text. You also need larger spaces between columns.

                2. 7

                  Finally a good use at typesetting libraries and software which the CSS rendering engine basically is: Newspaper. Exactly what the web is for: exchanging information publicated at some (or multiple) place(s)

                  1. 4
                    1. 5

                      I’ve had that bug too a couple times, not sure why. I’m hoping that this fixes itself when i get rid of the scrolling this evening 🤞

                    2. 4

                      The font is so small that I have to zoom to 175% to make it a comfortable read. The amount of scrollable content pieces is kind of driving me nuts, too. I like the idea in theory, but I’m not sure about this

                      1. 2

                        I would think it could be an especially good fit for e-ink readers with a working web browser (does the reMarkable e-ink tablet[1] that seems to have become relatively popular recently on the interwebs have one?) — though given the poor refresh rate of current e-ink screens, it too would probably depend on inventing some alternative to the scroll & zoom workflow. If you find a way, you may like to let e-reader and reMarkable users know via reddit and/or some other kinds of forums; they might love it! :)

                        1. 2

                          I’m going to replace scrolling with truncating the text, and having links to a single article page view. Hopefully i’ll get that done this evening

                          1. 2

                            It would be nice to set the text of the link to “Continues on page 42”. xD

                            1. 1

                              That was my plan!

                        2. 2

                          That’s funny, when I read the title I first assumed this was satire.

                          A webpage indeed usually takes raw information (like RSS feeds, essentially), adds a ton of visual markup to it on a server, and delivers it in a visual form that may be wholly unsuitable for the platform I am consuming it on.

                          Seen from that perspective, the inverse seems much more logical: sources of information, that currently provide the full visual experience, could provide their information in a raw form and let the platform decide how it should be displayed. I would browse information, not fully laid out pages.

                          Perhaps if there was a way to do an online search only in RSS feeds..

                          1. 2

                            i fixed the janky scrolling! you can now hit (read more) and be taken to a whole article page https://news.russellsaw.io/

                            1. 1

                              Right now it seems that the newspaper is updated and articles moved around every time the page is reloaded. I’d perhaps suggest to make the contents static and update it once every 24 hours or so? And perhaps provide an archive of permalinks to each day’s newspaper? That would make it even more like a newspaper.

                              1. 1

                                Yeah that’s something i definitely want to do, right now it’s all stateless though, so once i hook it up to a database I’ll start storing probably two editions per day, morning and evening

                                1. 1


                            2. 1

                              beautiful text-first design. absolutely beautiful.

                              Stories with similar links:

                              1. The Webpage, an RSS reader styled after print newspapers. Now with dark mode and better layouts authored by arussellsaw 1 year ago | 39 points | 11 comments