Vertically centre an image in CHM

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

Moderators: Alexander Halser, Tim Green

Re: Vertically centre an image in CHM

Unread postby Simon_Dismore » Tue Jan 29, 2019 3:24 pm

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).
Simon_Dismore
 
Posts: 115
Joined: Thu Jul 13, 2017 2:57 pm

Re: Vertically centre an image in CHM

Unread postby John Johann » Tue Jan 29, 2019 6:09 pm

@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: 149
Joined: Mon Aug 21, 2017 7:35 pm

Re: Vertically centre an image in CHM

Unread postby John Johann » Wed Jan 30, 2019 8:29 am

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?
John Johann
 
Posts: 149
Joined: Mon Aug 21, 2017 7:35 pm

Re: Vertically centre an image in CHM

Unread postby Simon_Dismore » Wed Jan 30, 2019 12:46 pm

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.
Simon_Dismore
 
Posts: 115
Joined: Thu Jul 13, 2017 2:57 pm

Re: Vertically centre an image in CHM

Unread postby John Johann » Fri Feb 01, 2019 2:43 pm

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.
John Johann
 
Posts: 149
Joined: Mon Aug 21, 2017 7:35 pm

Previous

Return to Help & Manual 7 Forum

Who is online

Users browsing this forum: No registered users and 7 guests