Participating Frequently

Question

Create a Caution/Warning note using a .png image before text

Forum|Forum|4 years ago
May 21, 2021
5 replies
1230 views

I believe I've done my due diligence for this. But, surprisingly, I haven't seen an answer for how you might create a note using an image before the running text, and format the text properly. I'm trialling RoboHelp 2020. I'm just getting acquainted with CSS. And here's where I've gotten so far in the WYSIWYG editor.

And here's the CSS I have for the p.caution style at this point (the ::before clause lifted from a post here).

p.caution {
/* Styling for the regular text */
padding-left: 0px;
line-height: 1.15;
margin-top: 10px;
margin-bottom: 0px;
padding-top: 5px;
padding-bottom: 5px;
vertical-align: bottom;
font-family: Calibri;
margin-right: 0px;
margin-left: 0px;
display: inline;
font-size: 11pt;
}
p.caution::before {
--prefix-gap: 3pt;
margin-right: var(--prefix-gap);
counter-increment: p\.caution;
content: url('../images/Images-HAT_Trial/Caution.png')counter(p\.caution1, none);
}

What I'd like to achieve is the ability to wrap the text starting at the top right corner of the image to its bottom and then continue below the image with or without indentation (I won't be picky here).

My sincere thanks to anyone who'd like to take a stab at it. These styles have been around for ages. So I'm guessing there's a way to do it.

This topic has been closed for replies.

Peter Grainge

Community Expert

It wasn't aimed at you @Stefan Gentz but I will admit I did think of you as I wrote it. 🙂

I think we would all like to be able to code like you but we do what we can how we can.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Peter Grainge

Community Expert

Purists will say you shouldn't use tables but it requires a lot of HTML/CSS knowledge to avoid them. I would say most RoboHelp users work with tables.

I'm not sure why you had problems. This page on my RoboHelp Tour has a table and it resizes fine if you change the window size. Outputs General (grainge.org)

Tell us more on that if you can't resolve the problem.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

C

C_Whirl_MAuthor

Participating Frequently

I'm afraid I've unnecessarily stirred up some controversy about using tables. I'm just getting started, so I should be careful with my words.

In any case, when I generate HTML5 output the table is stretched and leaves excesssive space between the image and text. Maybe there's a way to constrain the spacing between the two elements. But I don't know offhand.

By the way, those alert notes on your "Outputs General" page are close to the place where I'm trying to get. Thanks for sending.

S

Stefan Gentz

Community Manager

Hehe, we're not discussing – just exchanging knowledge and viewpoints 🙂

I would make the table width 100% and define the left column (column 1) to a fixed width:

Code:

<h3>A simple warning table</h3>
<table border="1" cellpadding="1" cellspacing="1" style="border-collapse: collapse; width: 100%; border: none;">
  <colgroup>
    <col style="width: 150px;" width="150px" />
  </colgroup>
  <tbody>
    <tr>
      <td style="padding: 5px; vertical-align: top;"><img alt="CAUTION" src="../../assets/images/caution.png" style="margin: 0px;" /></td>
      <td style="padding: 5px; vertical-align: top;">
        <p style="margin-top:0px;">Do not crush antenna when installing. Ensure bottom of antenna clears the fuselage during installation.</p>
        <p>Some more content.</p>
        <p>And some more.</p>
      </td>
    </tr>
  </tbody>
</table>

K

Karin Albrecht

Legend

This might be a "dirty" solution, but how about using an invisible table? You could put the image in the first cell and the text in the second one.

Best regards

Karin

C

C_Whirl_MAuthor

Participating Frequently

Thanks for the suggestion, Karin. Not bad. I have nothing against "dirty" solutions and would have been quite happy with that fix. Unfortunately the presentation of tables will vary from output to output. And somewhere I came across some information that says Adobe doesn't encourage using tables for page layout and positioning. Sure enough, I tried the workaround and it looked good in my WYSIWYG editor. But it was kind of wonky in HTML5 output. A good idea, though. Thanks again.

S

Stefan Gentz

Community Manager

Just to add to this: There is no official Adobe statement that encourages not using tables for page layout purposes, and Adobe would not make such a statement.

However, individual Adobe folks might give this advice. I guess that person encouraging not to use tables for layout purposes might have been me 😉

And this is why I think so:

A table is a construct in information architecture to arrange data in a grid with rows and columns. Making a table "invisible" and using a table construction for the purpose of arranging information objects like a warning icon and a corresponding text is not only a lot of data overhead in the code – it also makes your content less reusable for different output channels. In this case, you would have a two-column layout that spreads horizontally. If you display the content on a mobile device with a small horizontal viewport the text can easily become too small or you run into some other layout problems. You would then need to add additional data overhead in the CSS to fix that again.

In a nutshell: Using tables for layout purposes – especially in the context of web-based, responsive layouts is generally not a good idea in terms of manageability and information architecture.

But … that said: Theory aside, it's a like @Peter Grainge said this morning:
"Purists will say you shouldn't use tables but …"
(I'm wondering if he meant me with that 😂).
If tables work fine for you and you find it easier to use, go ahead. Sometimes an "if it works" approach is the better approach!

S

Stefan Gentz

Community Manager

Here is an approach based on making the icons with FontAwesome. But the approach with a PNG would be the same. Just that you change "content:".

CSS:

div.note {
  background-color: #fff3d4;
  border: 1px solid #fff3d4;
  border-left-color: #f6b73c;
  border-left-style: solid;
  border-left-width: 5px;
  display: block;
  margin-bottom: 15px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 10px;
  min-height: 60px;
  padding-bottom: 5px;
  padding-left: 60px;
  padding-right: 10px;
  padding-top: 30px;
}
div.note:before {
  color: RGB(50, 50, 50);
  content: "\f044";
  font-family: "Font Awesome 5 Free";
  font-size: 20pt;
  font-weight: 900;
  margin-left: -50px;
  margin-top: -20px;
  position: absolute;
  text-decoration: inherit;
  z-index: 1;
}
div.note>p:first-child:before {
  color: RGB(50, 50, 50);
  content: "NOTE";
  font-style: normal;
  font-weight: bold;
  margin-left: 0;
  margin-top: -25px;
  position: absolute;
  text-decoration: inherit;
  z-index: 1;
}

/* From here you can create many other variations, e.g.: */
div.attention:before {
  content: "\f024";
}
div.attention>p:first-child:before {
  content: "ATTENTION";
}

HTML:

<div class="note note">
  <p>This is a <code class="xmlelement">div</code> with <code class="xmlatt">class</code> set to <code class="codeph">note</code>.</p>
  <p>This is a placeholder for a simple note.</p>
</div>

Result:

The beauty of it is, that the note itself is very simple in the HTML code of the topic: You just create a div and assign class="note note", class="note attention" etc.

C

C_Whirl_MAuthor

Participating Frequently

It might have been helpful to include that I'm working in the style editor in RoboHelp, and just clicking the icon for the CSS (rather than relying on the user-interface friendly options). So I haven't been dipping into the HTML. Although I have been picking bits and pieces from the responses and trying out different things to make the style behave as I'd like. No good luck at this point. But thank you for the suggestions.

S

Stefan Gentz

Community Manager

Cheer up. We all started somewhere at some point. The good news is that with RoboHelp, HTML5, and CSS3 (and sometimes a little JavaScript), almost anything is possible. The "bad" news is that it just takes a bit of time to get your head around these web technologies. But we are here to guide you and help where we can – step by step 😃

Peter Grainge

Community Expert

Does this help? How to wrap text around an HTML image using CSS (homeandlearn.co.uk)

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

C

C_Whirl_MAuthor

Participating Frequently

The resource is helpful. I'm still having difficulty aligning the text with the image - the positional relationship between them is the trouble. The text will not align with the top of the image (and stay), no matter what I do with margins or padding. But this and the response below gives me a lot more to work with. Thanks.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded