• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Community Beginner ,
May 21, 2021 May 21, 2021

Copy link to clipboard

Copied

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.

Caution.png

 

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.

 

 

Views

477

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 22, 2021 May 22, 2021

Copy link to clipboard

Copied

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

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 24, 2021 May 24, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
May 22, 2021 May 22, 2021

Copy link to clipboard

Copied

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:

Stefan-Gentz_0-1621709991947.png

 

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 24, 2021 May 24, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
May 24, 2021 May 24, 2021

Copy link to clipboard

Copied

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 😃

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 24, 2021 May 24, 2021

Copy link to clipboard

Copied

Best response, yet. Thanks for the encouragement.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
May 25, 2021 May 25, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 26, 2021 May 26, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
May 27, 2021 May 27, 2021

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 27, 2021 May 27, 2021

Copy link to clipboard

Copied

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

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 27, 2021 May 27, 2021

Copy link to clipboard

Copied

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.

WYSIWYG.pngHTML5.png

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
May 27, 2021 May 27, 2021

Copy link to clipboard

Copied

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:

Stefan-Gentz_1-1622139430469.png

 

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>

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
May 27, 2021 May 27, 2021

Copy link to clipboard

Copied

LATEST

The vertical alignment to the top for the cell content is coming from the vertical-align: top; in the table cells:

<td style="padding: 5px; vertical-align: top;">

Note, that the styling in this example is with "inline" styling. The smarter approach would be to define a class for the table with all the formatting info.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 27, 2021 May 27, 2021

Copy link to clipboard

Copied

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

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp