Floating a div to right - works on PDF, Web looks bad

This Forum is for General Issues about Capture

Floating a div to right - works on PDF, Web looks bad

Postby sdcinvan on Tue Jun 10, 2014 9:56 am

Greetings all,

I wanted to flow text around some smaller images, so I added "style="float: right". This additional works out fairly well for print output, however, the web output looks ridiculous because in full screen, the image is WAYYY to right and far from the accompanying text. So far, the only solution I can think of is to float: left instead.

Code: Select all
<div class="figure" style="float: right; width: 120px;height: auto;">
            <p>
                <img src="Resources/Images/02_Workloads_hotspots_dash_indicator_02.png" />
            </p>
            <p class="figurecount" MadCap:autonum="&lt;b&gt;Figure 2 - &lt;/b&gt;">Dashboard hotspot indication.</p>
        </div>


Is it possible to float: right without the image being thrown to the far right, away from the text? How do others handle this kind of situation?
Shawn in Vancouver, Canada
Main tools used: Flare 11.x, InDesign, Google Docs, Lectora, Captivate.
Report bugs: https://www.madcapsoftware.com/feedback/bugs.aspx ▪ Feature requests: https://www.madcapsoftware.com/feedback/featurerequest.aspx[/i]
User avatar
sdcinvan
Propellus Maximus
 
Posts: 1260
Joined: Wed Aug 21, 2013 11:46 am
Location: Vancouver, Canada

Re: Floating a div to right - works on PDF, Web looks bad

Postby doc_guy on Tue Jun 10, 2014 11:27 am

In your <body> tag in the CSS, add a max width. Despite the wideness of our computer monitors in modern times, long lines of text are very difficult for people to read and follow down to the next line. I typically set a max width to my body tag like this:

body {
max-width: 900px;
}

Here is an example from a client I'm currently working on:

Image
Last edited by doc_guy on Tue Jun 10, 2014 11:30 am, edited 2 times in total.
Reason: Edited to reduce image size so you could see the whole thing
User avatar
doc_guy
Propellus Maximus
 
Posts: 1956
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West

Re: Floating a div to right - works on PDF, Web looks bad

Postby sdcinvan on Tue Jun 10, 2014 1:44 pm

Never mind just the drink... I owe you a dinner and a drink. :)

Thank you. Totally missed this one. Whoosh....

Instead of a pixel size, I used % instead. Very nice change! Thank you.

Code: Select all
body
{
   font-size: 11pt;
   font-family: 'Proxima Nova Rg', Calibri, sans-serif;
   font-variant: normal;
   font-style: normal;
   font-weight: 100;
   /* letter-spacing: 0.12%; */
   color: #404040;
   line-height: 1.2em;
   max-width: 70%;
}
Shawn in Vancouver, Canada
Main tools used: Flare 11.x, InDesign, Google Docs, Lectora, Captivate.
Report bugs: https://www.madcapsoftware.com/feedback/bugs.aspx ▪ Feature requests: https://www.madcapsoftware.com/feedback/featurerequest.aspx[/i]
User avatar
sdcinvan
Propellus Maximus
 
Posts: 1260
Joined: Wed Aug 21, 2013 11:46 am
Location: Vancouver, Canada

Re: Floating a div to right - works on PDF, Web looks bad

Postby doc_guy on Tue Jun 10, 2014 4:05 pm

Awesome.

I still think you should use a pixel size, rather than a percentage, since if somebody views the help on a 28" screen (becoming more and more common), they are still going to have to turn their head to read the whole line, which decreases comprehension and retention of information.

Studies suggest that the typical line length should be 50-75 characters per line, so maybe the best solution would be to set the width in EMs like in this JS-fidle: http://jsfiddle.net/Z2T8K/

That way the width will adjust to the ideal size for the font size you use. The line can get wider if the text is larger, but it will stay at about 50 characters.
User avatar
doc_guy
Propellus Maximus
 
Posts: 1956
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West

Re: Floating a div to right - works on PDF, Web looks bad

Postby smajors on Mon Nov 23, 2015 12:10 pm

If you have responsive output enabled, do you still need to set a max-width in the body?
Technical Writer
Training & Development Team/Marketing Department
smajors
Sr. Propeller Head
 
Posts: 180
Joined: Mon Oct 21, 2013 9:28 am
Location: Midwest United States


Return to Capture's General Discussion

Who is online

Users browsing this forum: No registered users and 0 guests