larger font cheatsheet and/or update app/img/cheatsheet.svg

[gknittl]

Checklist

• [y ] I searched the :help documentation using / for helpful information
• [ y] I have read the frequently asked questions
• [y ] I did find similar issues in the issue tracker
• see Cheatsheet for default Vieb bindings #203

Addition or change

• please bigger cheatsheet font for older eyes, viewers usually do a better job compressing than expanding fonts
• in the feh viewer, the transparent png has a checkerboard background by default it was extra steps to add the same white background that displays in vieb
• ideally, scalable vector graphics that would make the links clickable etc.
• app/img/cheatsheet.svg appears to be an incomplete version

• Alternatives considered The cheatsheet png may have been generated from cheatsheet.svg. It may be as simple as regenerating with a larger font and/or updating the SVG file at app/img/cheatsheet.svg

[Jelmerro]

The SVG is perfectly fine, it just doesn't render properly in browser, if you use for example Inkscape it renders properly. The SVG is only meant to be a scaling and editable alternative source for the PNG, the PNG is to be used across sites and for users. The size of the font doesn't matter in SVG terms, as a bigger font would mean a bigger exported picture, thus keeping the relative font size the same. I do agree that there is a lot of text in the cheatsheet, and while zooming the image is a perfectly fine thing to do, it does get a bit too blurry at higher zoom levels. This would actually be solved by exporting a higher res PNG, not by changing the SVG itself, for example using: inkscape --export-type=png --export-dpi=200 cheatsheet.svg The default dpi being 96 as far as I can tell.

A higher resolution does however mean a bigger filesize. A trade-off will have to be made between high-res and low filesize. And using the SVG is not widely supported as you noticed, so that's not an option sadly. I can make a bigger render of the cheatsheet in PNG format, but given the current filesize of ~700kb for the current resolution I don't see it as a good solution to make the size even bigger, just so that the text gets less blurry when zoomed (though it IS important for accessibility, I would recommend to view the SVG in a proper SVG viewer). I can make a separate high-res render and refer to it in the readme/help page and website, if that would fix the font render issues, but maybe I can even list the inkscape command to have users make a larger render themselves.

Let me know what you think of this, which solution you prefer, or any further questions you might have, I hope we can find a good solution for better rendering of the cheatsheet without making the size a lot bigger for all users.

[gknittl]

When getting started with Vieb, I prefer to display the cheatsheet in an application other than Vieb - just to make the learning curve less steep. cheatsheet.svg, incomplete as it is, appears to render acceptably in Firefox and if I had to use Inkscape that would be ok too.

Unfortunately I've looked in both github branches and I can't find the cheatsheet.svg file that matches cheatsheet.png. app/img/cheatsheet.svg is incomplete/out of date. Hopefully this is as simple as updating the cheatsheet.svg file on github. The cheatsheet.svg file that was used to generate cheatsheet.png would be sufficient for my purposes and avoids the size/resolution tradeoff.

If this is not possible then exporting cheatsheet.png at higher resolution would also work.

[Jelmerro]

I most definitely does NOT render correctly in Firefox. Here is the latest SVG cheatsheet from master in a range of applications: Firefox: Vieb: Nomacs: As you can see it DOES NOT render correctly, and a huge part appears missing, this is because none of these apps properly support SVG, now compare the very same file in Inkscape: This is why the PNG is a must, because otherwise inferior versions of the cheatsheet are viewed, which are then assumed to be incomplete, while it's just a rendering issue of the programs not supporting the full SVG standard. The SVG in the repo is the main source for the PNG in the repo, I don't have a secret other file that I use, the very same SVG that you are viewing in Firefox is the one used to generate the PNG.

As for solving this issue, I do see the option to generate bigger PNGs from the SVG, preferably as separate files to still keep the small file size option, but I prefer to host them outside the repo to not make the git clone process substantially slower.

[gknittl]

Right you are! Thanks. I've just verified I can view and zoom cheatsheet.svg correctly on Inkscape. I'm fine with that. If I get a chance I will look at what part of the SVG code might be defeating the non-Inkscape viewers. If I need a bigger raster image, I can now generate it from Inkscape. I would suggest advertizing cheatsheet.svg with the caveat that it requires Inkscape to render correctly, but I can understand if you want to avoid the potential issues that might raise.

[Jelmerro]

I'll close this issue since there isn't any issue with the current SVG, but feel free to make improvements to it via PRs if you ever figure out why it doesn't render in Firefox and others. I am indeed not going to recommend the SVG until it properly renders, so maybe someday when SVG support is better.

[gknittl]

cheatsheet.svg uses flowRoot, flowRegion, flowPara. According to Google searches, the SVG flow elements originated in 2004 or earlier and are still not widely supported. After following the instructions at https://github.com/z--m-n/svg-text-flow to convert the SVG flow elements to plain text, Firefox and Vieb do render the full sheet, although with small blemishes in the text layout.

Another option to flow text would be to retain the keyboard layout diagram as SVG and embed it in html. Convert the columns underneath to html tables and/or CSS. This would allow the columns to display in Vieb, and allow actionable http: and vieb: hyperlinks etc.

I would be inclined to reduce the amount of information on the page by removing Customization for example. By the time one is attempting to customize Vieb, one presumably knows how to access the help page. Perhaps the Customization text could exist as a printable summary within the help page, with just a link to it from the cheatsheet. Btw, I could not figure out how to print portions of the help page and ended up with 173 PDF pages of help...

[Jelmerro]

I have briefly looked into this once again, and it does indeed seem to work to convert the flow elements to plain text elements. This does make them render in Firefox and other places. However, since this completely messes up the layout and I don't have the knowledge to fix it myself (somebody else made the cheatsheet, I just update it), I hope that somebody will take the time to do this. I accept PRs to fix it, but will not work on it myself.