[Pro] Inflow item and baseline align

Hi

I’ve got some text with 30px leading, and set up a 30px grid, which the text baseline is aligning to.

I’ve now inserted a Graphic Item, the full width of my HTML Item containing the text and given it a height of 30px. With Align set to Baseline. Much to my surprise the inflow item doesn’t align to the 30px grid. Any ideas why not?

Thanks

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I am struggling with visualising what you are trying to do - can we see an online example?

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi

Here’s a link http://www.greensparkmarketing.co.uk/untitled2.html

Given all the text has 30px leading and the Graphic Item is 30px high, why isn’t it aligning to the grid?

Thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I worked a lot on this, and can’t come up with a satisfactory solution.

http://cssway.thebigerns.com/workbench/du_jour/mark-base-align/

I changed the background image to be 1px shorter on the bottom, so as to
preserve the 30px vertical on repeat.

I changed some of the text styles so to simplify the code. For example, I
moved the line-height attribute from the individual text tags to the body
tag. I got rid of the span class style that was applied to the text to
simplify as well.

I don’t know why the inline images seem to shift, but I think it has
something to do with how text occupies space. I’ve highlighted some of the
text in my example to make that area visible.

To get my example to work, I used a combination of a negative margin-top
attribute and a relative position shift on the paragraph image ( p img ).
However, I’m not confident that it will work across browsers.


Ernie Simpson

On Fri, Nov 2, 2012 at 6:58 AM, Mark email@hidden wrote:

Hi

Here’s a link http://www.greensparkmarketing.co.uk/untitled2.html

Given all the text has 30px leading and the Graphic Item is 30px high, why
isn’t it aligning to the grid?

Thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Ernie

Your example looks fantastic. I’m surprise Graphic Items don’t automatically align to the text baseline. In DTP this would be so easy!

I’d like to copy what you’ve done in FW, but in the Inspector window I can’t give the top margin of my Graphic Item a negative margin. Nor do I know how to do or what the ‘relative position’ is. Would I have to make a Style called p.img in the Style window and use Extend?

You say you’re not confident it will work across browsers, why? Because of the negative margin?

Thanks for your help

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On Fri, Nov 2, 2012 at 4:21 PM, Mark email@hidden wrote:

I’d like to copy what you’ve done in FW, but in the Inspector window I
can’t give the top margin of my Graphic Item a negative margin. Nor do I
know how to do or what the ‘relative position’ is. Would I have to make a
Style called p.img in the Style window and use Extend?

Since Freeway Pro writes the code for these images inside of paragraph
tags, I made a special Tag Style for it. (Please check the forum for Tag
styles if you are unfamiliar with making them in FWP)

p img

Written this way, this style automatically targets images inside of
paragraph text. Use the Extended option to add these attribute names and
values:

margin-top: -10px;
position: relative;
top: 2px;

You say you’re not confident it will work across browsers, why? Because of
the negative margin?

I’m not confident because I haven’t checked, and I know that font sizes can
vary across browsers. I’d like to say that I’m fairly certain it will
present well, but I’m not certain.

Let me know about your progress, I’ll look over your code.


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hey guys,

There are easier ways, both possible without resorting to extended styling in Freeway. You need to do one of two things:

  1. Make the vertical alignment bottom, not baseline. Using baseline will automatically resize your leading/line-height to 30px + the distance between the baseline and the bottom of the line.

  2. If you don’t want/need variable height images (I can’t think of a reason why, but it wasn’t clear if this’s what you wanted), make the height of the graphic representative of the size of the font (i.e. 20px, not 30px) and leave the alignment as it is.

Here’s a screenshot showing both on Ernie’s helpful demo page: http://cl.ly/image/1H291y2K0i0O

Hope this helps,

Joe


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think an overview of the vertical-align options and how they work is
a good thing. I found this article – the discussion and samples both
very interesting.


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi

Joe: I can see that the second option works for Graphic Items the same height as the text. But my Graphic Items will be a multiple of the line-height. And then the first option of simply making the Graphic Items Align: Bottom doesn’t align my text and Graphic Items to my 30px baseline grid.

To achieve the vertical spacing I want I’ll need to follow Ernie’s advice. Thanks for that.

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Just read this on the link:

But if you don’t want to align the element in relation to images or other block-like inline elements, then you can instead choose the values text-top or text-bottom, so the element will align in relation to the text on the line.

At first I thought this was the answer, but text-bottom isn’t the same as the texts baseline, it’s not going to work. I presume text bottom is the bottom of the pink text background in Ernie’s mock-up.

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ve been doing some research. There are plenty of articles about web design and vertical flow or grids - but I haven’t found one that deals with aligning text AND images to the grid.

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi

http://www.greensparkmarketing.co.uk/untitled2.html

It’s better, but still not perfect. How did you calculate:

margin-top: -10px;
position: relative;
top: 2px;

What does “position relative” do? Is “top” padding?

Thanks

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Whenever you want to position an element with CSS, you first have to declare if that position is an absolute coordinate within its parent element, or relative to its current position. In this case, position:relative followed with top:-2px shifts the element (img) up 2 pixels. Both padding and margin describe the space immediately around content, resulting in how much space it occupies or respecting how much space can exist between elements. Short answer to your question would be yes, you could have used padding-bottom (or even margin-bottom) to shift the apparent position of the img element – CSS can be very creative. However, because it is also cumulative in effect, I’ve found that the simplest solutions are the most desirable.

I suppose that I could have achieved the entire shift through the position attribute, but wasn’t being very scientific I’m afraid. I just kept trying things to achieve a visual result but can not really proscribe a formula for predicting or understanding how it behaves. I would like to come back to this issue when I have more time to play the detective. :slight_smile:


Ernie Simpson

On Nov 5, 2012, at 6:57 AM, “Mark” email@hidden wrote:

Hi

http://www.greensparkmarketing.co.uk/untitled2.html

It’s better, but still not perfect. How did you calculate:

margin-top: -10px;
position: relative;
top: 2px;

What does “position relative” do? Is “top” padding?

Thanks

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options