Vertically centre an image in CHM

Please post all questions and comments regarding Help & Manual 7 here.

Moderators: Alexander Halser, Tim Green

Simon_Dismore
Posts: 205
Joined: Thu Jul 13, 2017 2:57 pm

Re: Vertically centre an image in CHM

Unread post by Simon_Dismore »

John Johann wrote:If I insert a link with the image as the representation, it doesn't work.
I found a way to put a link over the svg here.

Alternatively, how about inlining your SVG? Then you can add links to it directly with <a xlink:href= ...>. If the SVG is too verbose to paste into the HTML object, you might be able to add it to the page as an image which gets turned into inline as part of its onLoad event. Iconfu's svg-inject might help with this (I've not tested it though).
John Johann
Posts: 305
Joined: Mon Aug 21, 2017 7:35 pm

Re: Vertically centre an image in CHM

Unread post by John Johann »

@Simon :D
This is what I curently have, and it appears to work.
I added the svg file to the Baggage.
The TitlePage template in the skin only contains a background colour for the body and a margin=0px.
The topic page is without a header and only contains the two HTML code objects.

Code: Select all

  <body>
    <para styleclass="Normal" style="text-align:center;"><html-code width="100" height="16" inline="true"><![CDATA[<style type="text/css">
a.centerimage {
   position: absolute !important;
   top: 50% !important;
   left: 50% !important;
   width: 800px !important;
   height: 500px !important;
   margin-top: -350px !important; /* Half the height */
   margin-left: -400px !important; /* Half the width */
}
</style>
]]></html-code><html-code width="100" height="16" inline="true"><![CDATA[<a href="ui_introduction.htm" class="centerimage">
<object data="cover_ill_user_interface.svg" type="image/svg+xml" class="svg">
</object>
</a>
]]></html-code></para>
  </body>
John Johann
Posts: 305
Joined: Mon Aug 21, 2017 7:35 pm

Re: Vertically centre an image in CHM

Unread post by John Johann »

Just done a little tweaking to only have one html object and specify the size of the svg in the object tag.

Code: Select all

<style type="text/css">
a.centerimage {
   position: absolute !important;
   top: 50% !important;
   left: 50% !important;
   width: 800px !important;
   height: 500px !important;
   margin-top: -250px !important; /* Half the height */
   margin-left: -400px !important; /* Half the width */
}

</style>
<a href="ui_introduction.htm" class="centerimage">
<object data="cover_ill_user_interface.svg"  width="800px" height="500px" type="image/svg+xml" class="svg">
</object>
</a>
I tested an a.centerimage: hover section to change the background-color of the image but that didn't take -- is there a neat way to create a mouseover effect for this in CHM output?
Simon_Dismore
Posts: 205
Joined: Thu Jul 13, 2017 2:57 pm

Re: Vertically centre an image in CHM

Unread post by Simon_Dismore »

John Johann wrote:is there a neat way to create a mouseover effect for this in CHM output?
You'd like an svg image that (i) receives mouseover messages and (ii) is styled differently for hover?

I think your problem is that when you use <object> there's a boundary between the html page document and the svg object document, and the styling stops at the boundary. I've heard of three ways to get around that, assuming all the resources are hosted on the same domain:
  • Use inline svg. The svg document is merged into the HTML document, so they share the same style. Explanation on CSS-tricks here. Another example here. As I mentioned before, you can inline an external file using svg-inject.
  • In advance, add a hover style to the svg file you're referencing with <object>. You can do this by editing the svg to add a style directly, or by referencing an external stylesheet (e.g. <?xml-stylesheet type="text/css" href="myproject.css"?>), which can be the same as your main stylesheet if you like. Explanation on CSS-tricks here.
  • When the <object> is loaded, add javascript that modifies the svg document to add a stylesheet reference. There's a write-up on stack overflow here.
The svg properties that can be controlled with CSS are listed here. Sara Soueidan has done a good write-up Styling And Animating SVGs With CSS, too.
John Johann
Posts: 305
Joined: Mon Aug 21, 2017 7:35 pm

Re: Vertically centre an image in CHM

Unread post by John Johann »

Got this to work with a few minor adjustments to my svg (link to css and an overlay rectangle linking to the topic) plus a css for said rectangle in the baggage.
Post Reply