SVGs in TOC appear squished in eWriter

[Olivier Beltrami]

Hello,

The TOC SVGs used in both my WebHelp and eWriter, look fine in WebHelp, but look squished in eWriter (see image below). What should I be fixing in the eWriter skin ?

Very best regards,

Olivier

[Tim Green]

Hi Olivier,

They're not squished, they're clipped because of slightly different rendering by the Windows WebView component instead of a regular browser. You need to adjust the position and size for your custom icons in the TOC CSS you entered. Try moving the vertical position up a pixel, for example.

[Olivier Beltrami]

Hi Tim,

In some cases it's clipped (top leaf "What's New?") but in other cases it's squished (bottom leaf "Main Toolbar").
Is this the section I should be changing in hmwebhelp_toc_desktop.css ?

Code: Select all

ul#toc li > span {
	display: block;
	padding: 0.143rem 0.143rem 0.143rem 1.786rem;
	background-repeat: no-repeat;
	background-position: 0.5rem 0.1rem;
	background-size: 1.1rem;
	color: <%TOC_TEXTCOLOR%>;
	}

BTW: I get the same issue with the default TOC SVGs (that's why I started looking for replacements).

Very best regards,

Olivier

[Tim Green]

Hi Olivier,

Yes, that is the correct CSS. The two parameters you want to change are the background-size and background-position. The size is the rendering size of the icons (you can use up to 3 decimal places for the rem value for accuracy). The two position values are for the horizontal position (first value) and vertical position (second value).

[Olivier Beltrami]

Thank you very much !

[Olivier Beltrami]

Hi Tim,

Sorry to be a pest, but I am still having problems.

I tried a few combinations of moving the image up by 1px (0.0625 rem) and reduced its size also by 1pt, but the result still looks bad. More importantly, the effect is not systematic. If you look at the zoomed-up screen shot below, you can see that the leaf icons are sometimes clipped and sometime not. The effect is the same in the real-size screenshot. Do you have any suggestion ?

This displaying of the same SVG inconsistently is odd. Could this be a bug in the rendering engine ?

Very best regards,

Olivier

[Tim Green]

There are separate background position settings for all levels. You will get inconsistent results if you only adjust the main setting, which is for level 1.

[Olivier Beltrami]

Hi Tim,

Yes, I thought as much.
But if you look at the leaf topics below "Scripts", they are all at the same level, and yet they are rendered differently.
Sorry to nitpick, but my users are all graphists and this type of detail will catch their eye immediately.
Very best regards,

Olivier

[Tim Green]

Hi Olivier,

I'm just finishing up a larger maintenance update to Premium Pack 4.1 so before the release I'm going to look into this in more detail and see what can be done to improve it and make it easier to adjust. I'll let you know here when I have some more information on it.

[Olivier Beltrami]

Great
Would you like me to send you a small sample project to test ?

[Tim Green]

Would you like me to send you a small sample project to test ?

I don't think so but I'll let you know if I need it.

[Tim Green]

Hi Olivier,

I can't reproduce this. Two important questions:

• Are you using SVG icons? You won't be able to adjust the sizes correctly with PNG.
• Are you making all changes with rem units? You mention points in one of your replies above, and that also won't work correctly.

Otherwise I do need a small demo project and the skin you are using at support AT ec-software.com (replace the AT with @). Please put everything in a zip and provide a download link. Skins will be blocked by mail servers since they contain scripts.

[Olivier Beltrami]

Hi Tim,

I'll build a small project and send you a download link.
In response to you questions:

• Yes, I am using SVG icons (and the issue was also happening with the default icons supplied with the skin).
• I mentioned points, but in the CSS everything was in REMs.

Some additional info:

• I'm using the 64-bit version of the eWriter viewer
• my eWriter skin is Version 3 (AFAIK there are no v4 eWriter skins)
• the SVG icons and TOC CSS file are the same for my eWrtier and Webhelp projects, and all looks fine in the WebVersion

Very best regards,

Olivier

[Tim Green]

Update: This issue is caused by a bug in Internet Explorer, which is still used by Windows for WebView in programs like eViewer. The bug involves background clipping, and it isn't possible to work around it with CSS in this specific situation because IE doesn't obey the background-clipping attributes when they are set on a span displayed as a block. What you need to do is use SVG icons for the TOC that have at least one pixel of empty margin at the bottom, better two. Then you won't experience this clipping effect because it is neutralized by the margin in the image. That is why only the topic icon was affected in this case: the folder icons already had a free margin at the bottom.

The newer Chromium WebView is theoretically available, but Windows does not yet include all the runtime components necessary for it and these cannot be installed along with the Windows Store version of eViewer.

[Olivier Beltrami]

Thank you very much for your great support, as always.