How can we improve the reader mode?
-
I love the built-in reader in Vivaldi, I use it a lot on news sites and articles.
However I frequently stumble upon webpages where some parts of the navigation are displayed in the reader mode. Since the styling is replaced by the reader CSS this obviously creates a visual mess.
It is really depends on the website: some sites work great, others don't.
Is there way to modify or improve the CSS selector of the reader mode so that I can exclude those navigation parts on these websites?
-
@joerivlekken Yes, Reader Mode needs some work. I reported a bug (VB-92065) Huge Emoji in Reader View back in October 2022, after an earlier report got closed.
The problem is that there are many bugs and feature requests, but not many developers. Security issues and Chrome updates have to take priority over bugs that only affect a few users.
-
@Pesala I can reproduce it with a 6.2 and reopened VB-92065.
-
Yes, such large SVG icons are nasty in readerview.
-
In the meantime, try the extension "Reader View" in case it helps:
"Reader View extension brings Mozilla's open-source Readability implantation to Chromium. "
https://chrome.google.com/webstore/detail/reader-view/ecabifbgmdmgdllomnfinbmaellmclnh
https://github.com/rNeomy/reader-view/
https://webextension.org/listing/chrome-reader-view.html
Previously, give me the link to test if it works well.
-
Just look this...
Follow the link to the page for a more detailed view. There is a column of giant icons that precede the text of the article.
If you can, please try it out.
https://canaltech.com.br/navegadores/vantagens-e-desvantagens-de-usar-o-vivaldi/
-
@elitenet The menu of the website uses SVG icons, and those are extremely maximised. Bad reader mode.
I will report that as a bug to internal Vivaldi bug tracker.
Bug reported as VB-99492 "Reader View resizes svg icons extremely" -
Unfortunately competitors work better: tested in Edge 116 and Firefox 116.
-
The extension I mentioned has the grace that you can add a "Custom styling" with CSS code:
I use this:
/* TITLES */ [class*= "h1"], [class*= "h2"], [class*= "h3"], [id*= "title"] {font-size: 44px !important; line-height: 1.6 !important; font-family: Times New Roman ! important; color: #3365c7 !important; font-style: normal !important; font-weight: 700 !important; text-decoration: none !important; text-align: justify !important;} /* PARAGRAPH */ * p *, .post-body *, .article-content, .page {font-size: 34px !important; font-family:Lato !important; font-style: normal !important; font-weight: 400 !important; text-align: justify !important; line-height: 1.6667 !important; min-width: 1060px !important; max-width: 1060px !important; margin-right: auto !important; margin-left: auto !important; float: none !important; } /* THEME */ html, body, #body, main {background-color: #171b1d !important; color: #d8d8d8 !important;} #reader-domain, #reader-credits, #doi, #published-time, #reader-estimated-time, body > hr {display: none !important;}
And this:
#toolbar {display: none !important;}
Also, you can define which domains will automatically be displayed in "reader view" mode:
FAQ:
"Is it possible to open some websites directly in "Reader View" mode?
As of version 0.3.9, there is a new option to automatically switch pages to the "Reader View" mode if the user-specified criteria are met. To use this feature, you must press the "Allow Access" button to grant the extension access to all hostnames, which is necessary for the extension to monitor tabs. The list of rules can be a comma-separated list of hostnames or regular expression rules. Hostname matching is exact, so to redirect "www.google.com", you must specify "www.google.com" exactly, not just "google.com". Regular expression matching uses the entire URL for testing. Be sure to write regular expressions that distinguish keywords in the pathname and query sections. Even if automatic redirect is enabled, the extension still allows navigating to the original page once after entering the "Reader View" mode, which can be useful for opening links from the original page that are not included in the Reader View."
-
Said:
Unfortunately competitors work better: tested in Edge 116 and Firefox 116.
Don't stay under the train, try it.
-
@DoctorG Bigger difference I notice is competitors just remove such svg icons and sidebars completely.
It has sense because aren't part of the article. The nice part is stylus can hook the reader view too so can be workarounded per site:article.entry-content + svg {display: none;}
(tested on canaltech site and works fine) -
Said:
The nice part is stylus can hook the reader view too so can be workarounded...
Good discovery.
Perhaps this code can be used in a general way:
[class*="ico"], [class*="fa"], [class*="control"], [class*="button"], [role*="button"],[type*=button], button, [id*="button"], [class*="btn"], [class*="mjx"], [class*="vjs"], [class*="bb"], [class="ll"], i, [class="i"], img, svg {display: none;}
-
The biggest issue with reader view is that the whole page navigation is shown. I would expect this should be rather simple to fix, but Vivaldi hasn’t put any manpower into reader view for years it seems. On desktop you can use other solutions, but on Android the situation is worse—there is no reader view at all.
-
@barbudo2005 Probably
article.entry-content + [class*="ico"], article.entry-content + [class*="fa"], article.entry-content + [class*="control"], article.entry-content + [class*="button"], article.entry-content + [role*="button"], article.entry-content + [type*=button], article.entry-content + button, article.entry-content + [id*="button"], article.entry-content + [class*="btn"], article.entry-content + [class*="mjx"], article.entry-content + [class*="vjs"], article.entry-content + [class*="bb"], article.entry-content + [class="ll"], article.entry-content + i, article.entry-content + [class="i"], /*article.entry-content + img,*/ article.entry-content + svg {display: none;}
But I can't really test it not having links for reader view which use these selectors.
Also, unsureimg
ori
should be removed. -
@Hadden89 You can try this somewhat by adding it as a "filter" in "Page Actions". I tried it with a file put here on Linux:
/opt/vivaldi/resources/vivaldi/user_files/Filter_ReaderView.css
I just made up the file name. I couldn't get it to work using your full selectors, not sure why. I'm a very poor coder... This is what I ended up using, "25%" to better visualize what it was doing.
[class*="ico"], [class*="fa"], [class*="control"], [class*="button"], [role*="button"], [type*=button], button, [id*="button"], [class*="btn"], [class*="mjx"], [class*="vjs"], [class*="bb"], [class="ll"], i, [class="i"], img, svg {max-width: 20% !important;}
Switch to Reader mode and then enable the new "Page Action". It seems to run on top of Reader mode. Don't know if there is another way to add a "Page Action"
-
@lfisk and @cabalstone
Adding a filter and having to activate it each time is a very archaic and difficult way to achieve the goal.
The following are two efficient and automatic ways to do this:
1.- Use built-in Reader view and install Stylus to modify the style and to not display what should not be displayed in a reader view mode. (thanks @Hadden89 for discovering it)
2.- Install the extension "Reader view" from this link https://chrome.google.com/webstore/detail/reader-view/ecabifbgmdmgdllomnfinbmaellmclnh and use his built-in "Custom styling" to do the same.
In addition, this extension has the possibility to define which web pages will automatically switch to reader view mode without having to do anything.
-
@barbudo2005 It’s not archaic, it’s native. You can even combine reader view and a custom page action in a command chain.