Vertically centre an image in CHM
Moderators: Alexander Halser, Tim Green
-
- Posts: 305
- Joined: Mon Aug 21, 2017 7:35 pm
Vertically centre an image in CHM
I'd like to centre an image (vertically and horizontally) on an intro page.
The page only contains a link which is inserted as an image (Insert > Link > Picture)
Is there a simple way to do this -- perhaps an extra template for the intro page only?
The page only contains a link which is inserted as an image (Insert > Link > Picture)
Is there a simple way to do this -- perhaps an extra template for the intro page only?
- Tim Green
- Site Admin
- Posts: 23181
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Vertically centre an image in CHM
Hi John,
There are a number of CSS ways of doing this but they require absolute positioning and that would conflict with HM's skins with non-scrolling headers. Also, vertical centering doesn't really work in scrollable HTML pages anyway, as it require that the user sizes their browser window to pretty much exactly the size you want to have it at. It only really works on printed pages with fixed dimensions, or PDF pages, which are just representations of printed pages on the screen. Rather than making this more complicated than it needs to be, just make the picture a percentage of the page size wide, center it horizontally in a centered paragraph and insert a reasonable number of empty paragraphs above it so that it's not too close to the top margin.
There are a number of CSS ways of doing this but they require absolute positioning and that would conflict with HM's skins with non-scrolling headers. Also, vertical centering doesn't really work in scrollable HTML pages anyway, as it require that the user sizes their browser window to pretty much exactly the size you want to have it at. It only really works on printed pages with fixed dimensions, or PDF pages, which are just representations of printed pages on the screen. Rather than making this more complicated than it needs to be, just make the picture a percentage of the page size wide, center it horizontally in a centered paragraph and insert a reasonable number of empty paragraphs above it so that it's not too close to the top margin.
Regards,
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
-
- Posts: 305
- Joined: Mon Aug 21, 2017 7:35 pm
Re: Vertically centre an image in CHM
Hi Tim,
I hear you -- as I need the background of this one title page to be a different colour anyway, it has a different template than the Default. Thought there may be an easy way to tweak that.
I hear you -- as I need the background of this one title page to be a different colour anyway, it has a different template than the Default. Thought there may be an easy way to tweak that.
- Tim Green
- Site Admin
- Posts: 23181
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Vertically centre an image in CHM
Hi John,
If you use it with a template that is completely without a header or a scrolling header or any table or DIV container for the content in CHM you could assign a CSS class to it in the Insert Image dialog and then try this CSS:
You need to insert the image with its native size (i.e. no % scaling in HM). The "!important" modifier is also important so that it overrides any inline formatting inserted in the image tag by HM. You need to adjust the width and height values to the actual dimensions you want, and the negative margin values need to be exactly half the width and height to achieve the centering.
If you use it with a template that is completely without a header or a scrolling header or any table or DIV container for the content in CHM you could assign a CSS class to it in the Insert Image dialog and then try this CSS:
Code: Select all
img.centerimage !important {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
Regards,
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
-
- Posts: 305
- Joined: Mon Aug 21, 2017 7:35 pm
Re: Vertically centre an image in CHM
Hi Tim,
Thanks. I'll have to look into that.
Am I right in thinking that the custom css would have to be in a baggage file in the individual projects and not in the master template -- different projects will have different image dimensions.
Thanks. I'll have to look into that.
Am I right in thinking that the custom css would have to be in a baggage file in the individual projects and not in the master template -- different projects will have different image dimensions.
-
- Posts: 206
- Joined: Thu Jul 13, 2017 2:57 pm
Re: Vertically centre an image in CHM
I just tried using SVG that would centre a 712x400 jpg filling up to 90% of the area. Seemed to work OK in skinless WebHelp and CHM, except it overlapped the title area when the height was very small. I had to create a new 'title-less' page template to fix that.
Steps were:
You can see an example demo on codepen. I'd be interested to hear whether it works for you.
Steps were:
- Optional, to set up a page template with no title area:
- Navigate to Configuration > HTML Page Templates > Default
- Add a new template (I called mine "coversheet")
- Delete everything in the <body> except <%TOPIC_TEXT%>
And now: - Create new topic
- Change the HTML Page Template in 'Topic Options' (to e.g. "coversheet") if you've set one up
- Write > Insert HTML code object
- Paste the code below
Code: Select all
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-396 -222 792 444" style=" display: block; position: absolute; top: 5%; left: 5%; width: 90%; height: 90%;"> <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/183593/malware-cycle.jpg" x="0" y="0" height="400" width="712" transform="translate(-356,-200)"/> </svg>
- Select 'HTML code must not be enclosed'
- Compile
You can see an example demo on codepen. I'd be interested to hear whether it works for you.
Last edited by Simon_Dismore on Mon Jan 28, 2019 5:06 pm, edited 1 time in total.
- Tim Green
- Site Admin
- Posts: 23181
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Vertically centre an image in CHM
It would be better to put it in the additional template itself, right before the closing </head> tag. Make sure that this reference in the templateJohn Johann wrote:Am I right in thinking that the custom css would have to be in a baggage file in the individual projects and not in the master template -- different projects will have different image dimensions.
Code: Select all
<link rel="stylesheet" type="text/css" href="<%STYLESHEET%>" />
If you are doing this in a skin the additional template needs to be defined both in the skin and in the project. The version in the project is just a dummy, the only important thing is the name, which has to be exactly the same as the one in the skin. It is generally fine to do this in a CHM skin, because since you are only skinning the topic page there isn't anything in the rest of the skin to cause errors if expected scripts and other components in the topic page aren't there. You can't generally do the same thing in a WebHelp skin without major acrobatics, however.
Regards,
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
-
- Posts: 305
- Joined: Mon Aug 21, 2017 7:35 pm
Re: Vertically centre an image in CHM
@Simon
Thanks for your feedback.
The images I am using are actually SVGs to begin with, so I'll have to look into centering my current content as you have done with the jpeg. I have had issues befre with transformations looking ok in my svg editor and then not being as I expected when saved as an optimised svg and displayed in the browser / CHM window.
I am using a skin, so I created my "TitlePage" template in it. I did not create this template in the projects -- just entered the name directly in the XML -- it shows up red in the TOpicOptions in the child projects but publishes ok.
@Tim is there an easy way to inject that template into all my projects -- I use a style repository so putting it there should do the business?
If I put the css in the template, I cannot adjust it individually for different cover image sizes.
Thanks for your feedback.
The images I am using are actually SVGs to begin with, so I'll have to look into centering my current content as you have done with the jpeg. I have had issues befre with transformations looking ok in my svg editor and then not being as I expected when saved as an optimised svg and displayed in the browser / CHM window.
I am using a skin, so I created my "TitlePage" template in it. I did not create this template in the projects -- just entered the name directly in the XML -- it shows up red in the TOpicOptions in the child projects but publishes ok.
@Tim is there an easy way to inject that template into all my projects -- I use a style repository so putting it there should do the business?
If I put the css in the template, I cannot adjust it individually for different cover image sizes.
- Tim Green
- Site Admin
- Posts: 23181
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Vertically centre an image in CHM
John Johann wrote:@Tim is there an easy way to inject that template into all my projects -- I use a style repository so putting it there should do the business?
No, that's not possible. A style repository doesn't share HTML templates and even if it did they would be ignored if you were using a skin, in the same way that all the templates in your project are ignored when you are using a skin. A style repository only contains styles and topics for use as snippets.
There's another way you can do it. Insert the CSS in the topic itself, right at the top, using an HTML code object. Place it right at the beginning of the very first character of the very first paragraph of the topic, and when using the code object tool in Write > Insert Object remember to set the option that the object shouldn't be enclosed in a block element. You need to use style tags for it, so the complete code object would look like this:If I put the css in the template, I cannot adjust it individually for different cover image sizes.
Code: Select all
<style type="text/css">
img.centerimage !important {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
</style>
Regards,
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
-
- Posts: 206
- Joined: Thu Jul 13, 2017 2:57 pm
Re: Vertically centre an image in CHM
If you are using SVG images, Jay Liu made a codepen based on this here. That was the starting point for my bitmap image example.John Johann wrote:Thanks for your feedback. The images I am using are actually SVGs to begin with, so I'll have to look into centering my current content as you have done with the jpeg.
An extra advantage of SVG is the ability to use fragment identifiers to choose a transformation or language-specific layer.
-
- Posts: 305
- Joined: Mon Aug 21, 2017 7:35 pm
Re: Vertically centre an image in CHM
Almost there -- the image is horizontally centred but not vertically.
The page:
The template:
The page:
Code: Select all
<title>Main User Interface</title>
<body>
<para styleclass="Normal" style="text-align:center;"><html-code width="100" height="16" inline="true"><![CDATA[<style type="text/css">
img.centerimage !important {
position: absolute;
top: 50%;
left: 50%;
width: 800px;
height: 500px;
margin-top: -250px; /* Half the height */
margin-left: -400px; /* Half the width */
}
</style>
]]></html-code><image class="centerimage" src="cover_ill_user_interface.svg" scale="100.00%" styleclass="Image Caption"><imagemap><area shape="rect" coords="0,0,800,500" type="topiclink" href="UI_Introduction"/></imagemap></image></para>
</body>
</topic>
The template:
Code: Select all
<%DOCTYPE%>
<html>
<head>
<title><%TOPIC_TITLE%></title>
<meta http-equiv="Content-Type" content="text/html; charset=<%DOCCHARSET%>" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta name="keywords" content="<%TOPIC_KEYWORDS%>" />
<meta name="description" content="<%TOPIC_DESCRIPTION%>" />
<IF_TOPIC_PICTURE><meta name="picture" content="<%TOPIC_PICTURE%>" /></IF_TOPIC_PICTURE>
<link type="text/css" href="<%STYLESHEET%>" rel="stylesheet" />
<style type="text/css">
body { margin: 0px; background: #132E35; }
</style>
</head>
<body>
<!-- Placeholder for topic body. -->
<%TOPIC_TEXT%>
</body>
</html>
- Tim Green
- Site Admin
- Posts: 23181
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Vertically centre an image in CHM
Hi John,
I made a mistake in my code and forgot something. The !important goes in the individual attributes, not after the style name -- sorry, that was a brain fart. It should look like this:
I've also included a minimum height for the body. You could put that in the template instead, and it isn't 100% necessary, but it doesn't hurt.
I made a mistake in my code and forgot something. The !important goes in the individual attributes, not after the style name -- sorry, that was a brain fart. It should look like this:
Code: Select all
<style type="text/css">
body {
height: 500px !important;
}
img.centerimage {
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 250px !important;
height: 126px !important;
margin-top: -63px !important; /* Half the height */
margin-left: -125px !important; /* Half the width */
}
</style>
Regards,
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
-
- Posts: 305
- Joined: Mon Aug 21, 2017 7:35 pm
Re: Vertically centre an image in CHM
Hi Tim,
Thanks again. That works if the image is just an image inserted on the page.
If I insert a link with the image as the representation, it doesn't work.
If I insert the image and then place a hotspot over it, it also doesn't work.
Thanks again. That works if the image is just an image inserted on the page.
If I insert a link with the image as the representation, it doesn't work.
If I insert the image and then place a hotspot over it, it also doesn't work.
- Tim Green
- Site Admin
- Posts: 23181
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Vertically centre an image in CHM
Well, no, because then you are not inserting an "image", you are inserting a completely different element that contains an image. In that case I would say that it's really not worth the effort, because centering it with all its nested container elements would be very complicated. Just center the image horizontally and add a couple of empty paragraphs before it to make sure that it's not too close the top of the page.John Johann wrote:If I insert a link with the image as the representation, it doesn't work.
If I insert the image and then place a hotspot over it, it also doesn't work.
Regards,
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
-
- Posts: 305
- Joined: Mon Aug 21, 2017 7:35 pm
Re: Vertically centre an image in CHM
Well, that's a pity -- because it was a whole lot prettier when it was centred