paragraph spacing based on line height

Ive been trying to think of a way yo adjust margin bottom on a paragraph based on the line height

e.g. lets say the cap height of my p tag is 16px and the line-height is 1.5 that will give me 16/24 but if I wanted to add paragraph spacing of half the line height then I would normally type in

margin-bottom:12px What I am trying to work out is if theres a way to link it to the line height so if the text scales and the line height scales with it then the paragraph space will scale accordingly

I am fairly sure I can’t to do this with just pure css but I am not sure…. does any one else know. or does any one else know of a js library that would link the two together so they can grow and contract in unison

All the best max


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

Hi Max,
If your text size is 18px and your leading (line-height) is 150% (=24px) the space after should be set to 75%. Freeway will set the margin-bottom to 0.75em which will give you 3/4s of the text size regardless of what the font size is.

The math(s) is;
target margin / cap height = ratio for margin
which gets you;
12/16 = 0.75

Regards,
Tim.

On 15 Oct 2014, at 14:57, max wrote:

e.g. lets say the cap height of my p tag is 16px and the line-height is 1.5 that will give me 16/24 but if I wanted to add paragraph spacing of half the line height then I would normally type in

margin-bottom:12px What I am trying to work out is if theres a way to link it to the line height so if the text scales and the line height scales with it then the paragraph space will scale accordingly


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

Hi Max -

Since pixels are absolute measurements, you might try relative measurements
like ems or rems.

Paragraph leading of 150% in Freeway Pro produces line-height: 1.5; in
the CSS output. This is already an appropriate scaling measure. If you
input a fixed height like 18px, then try scaling type in the browser to see
the difference.

I like ems for margins - one em is equal to 1 x font-height… so if your
font is 16px, a Space After setting of 1em in Freeway Pro will produce
margin-bottom: 1em; in the FWP CSS code - which will appear as 16px in
the browser. However, as the text scales the bottom-margin will scale with
it.

I do not think you should try to use line-height to space paragraphs - that
is best covered by the margin-bottom setting.

That said, FWP adds the .f-fp and .f-lp classes to first and last text
blocks, respectively. This is to control the application of the margin
top-and-bottom setting, ostensibly to provide more visually pleasant
spacing.

If you have dynamic text that neither you nor FWP is directly styling,
there are CSS pseudo selectors like :last-child and :last-of-kind that can
be applied, but that truly depends on how much prediction you can have
about your containers and their contents.

Best wishes,


Ernie Simpson
843-475-3523

On Wed, Oct 15, 2014 at 9:57 AM, max email@hidden wrote:

Ive been trying to think of a way yo adjust margin bottom on a paragraph
based on the line height

e.g. lets say the cap height of my p tag is 16px and the line-height is
1.5 that will give me 16/24 but if I wanted to add paragraph spacing of
half the line height then I would normally type in

margin-bottom:12px
What I am trying to work out is if theres a way to link it to the line
height so if the text scales and the line height scales with it then the
paragraph space will scale accordingly

I am fairly sure I can’t to do this with just pure css but I am not sure….
does any one else know. or does any one else know of a js library that
would link the two together so they can grow and contract in unison

All the best max


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 tim yep thats works
cheers max :o)


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