I’m glad this worked out, as I watched it all day but have been too busy to reply.
Freeway wraps every inline image in paragraph tags, unless the image is placed into a heading like h1, or another text tag like the <li>
tag in a list.
This is, for the most part, a good practice. As long as you understand that all text tags have some extra dimensions even when there is no text-- margin
and of course, line-height
(Freeway calls this “leading”).
For any text wrapped in a text tag, like <p>
p { font-size:16px; line-height:1.2; margin:1em 0; }
In the above scenario, the font itself will occupy a vertical space of 16 pixels, plus a space of 120% of the font-size, or 19.2 pixels (split evenly above and below the text), plus a space of 1em (or 1x the current font size) above and below the font/line-height space:
16px + (16px * 1.2 = 19.2px) + (16px * 2 = 18px) = 53.2 pixels
So when there’s no text, the line still reserves 37.2 pixels vertically across the block. Images can also have margins and other space-reserving properties to add to this, but the wrapping text tags are just so easy to forget about in Freeway because it seems like nothing is there but the image.
###Remove Paragraph Tags Action
The Remove Paragraph Tags action is one of my oldest favorite Freeway actions, but there are a couple things to watch for when using it.
-
Do I really need it? – It is kind of a nuclear-option, so it’s also a good idea to make sure that you’re not leaning too heavily on it. After all, CSS gives you many options… maybe there is a better way to solve your problem, whatever it is.
-
Unintended consequences – The RPT action is applied to a container element and will remove ALL the p tags from the container… not just those surrounding the image.
Having your inline image as part of the content flow is not bad practice… and neither is having an img
tag that is in the flow but “unchaperoned”. You have to weigh the merits and decide for yourself.
###Styling difficulties
As a proponent of inflow construction with Freeway, I understand first-hand the difficulty of getting a cursor to the right place… especially to apply a style to a line of text with no text in it.
But there are a couple of tricks which make the whole damn thing easier…
First, your style needs to be what we have called a paragraph style… that means a style that will apply to an entire block of type, not just a selected subsection of it. Freeway shows those styles in the Styles palette with the paragraph symbol in front of the name. This is tricky as not all style option will invoke the paragraph status of the style. Generally, you should create/edit the style with the Style Editor. There, if you invoke a property from the Paragraph portion of the Editor, then you guarantee the style will apply to whole text blocks (paragraphs).
One way to trick Freeway into seeing a style with no paragraph attributes as a paragraph style, select from the Paragraph options in the Style Editor something called Force Graphic Paragraphs-- I’ve no idea what that does, don’t care-- just make sure it is unchecked. Ninety-nine percent of the time, the style will register as a paragraph style and you can use it as such.
Then, if you can just insert your cursor just before or after the inline image, that should be good.
But, what if your inflow space is so tight that you can’t squeeze the cursor into place before or after the image? I mean, it happens a lot that way with Inflow layouts.
Well, the trick we developed for div
selection in those tight circumstances works with images too. Using the element layout at left (or if you can select the image by eyeball) select the image element so that you see the corner handles on it. Now, press either the right or left arrow key ONCE… whether or not you can see it, the cursor is now resting on the block line the image occupies. Apply your paragraph style.
###The style you need in this situation
I think Todd is right about applying a style to counter this effect… in it’s simplest form it might be
.inline-image-only
line-height: 0; – as an Extended style as I think Freeway has issues with this value. Also, Freeway adds the colon and semicolon to the name/value pairs, so no need to include them.
margin-left (left indent) 0px
margin-right (right indent) 0px
margin-top (space before) 0px
margin-bottom (space after) 0px
###Other CSS ways to do this same thing
You can also target an item using CSS without having to apply any style within your construction… what this means is there are many ways to tell a browser how to make something appear with CSS code.
For example, I use the figure
element for images with captions (the figcaption
element within the figure
element). So I can make a Tag style in Freeway like this:
figure p { line-height:0; margin:0; text-align:center; }
The beginning or “tag” part is called the style Selector… in this case “figure(space)p” tells the browser “all p tags inside of all figure elements”. No application is necessary, the browser will work it out for me.
But since I will likely have p text in the figcaption element, I need to modify the selector into something like
figure > p
which instead tells the browser “only those p tags that are direct descendants of figure elements”. Since my caption text will be nested one more level down from the figure element in the figcaption element, the browser will not apply the style there. Logical.
There are many more ways to target an element with just CSS, so you are free to decide the best way to affect your design on your page.
###I like CSS shortcut notation for margins and padding, and most everything else
Just as a note, I think it’s better form to use CSS shortcut notation when using padding or margin properties-- for the most part, anyway. There will occasionally be an exception. Freeway will write the margin property with shorthand notation as long as there is a value entered for each of the four cardinal sides of the element, including zero. Otherwise, Freeway writes the sides individually.
Top - Right - Bottom - Left
margin: 5px 10px 15px 20px;
Top/Bottom - Left/Right
margin: 10px 20px;
Top - Left/Right - Bottom
margin: 10px 5px 20px
Whichever seems appropriate. Also, I like no units placed on a zero value-- zero pixels is the same as zero miles… zero is zero. Sadly, there is no one at Softpress to complain to anymore.
I know this is long and the problem is already solved, but for anyone else trying to understand the relationship between Freeway and the code it generates, I think this is helpful.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options