Paragraph spacing

Elements Typography
1

How do I set paragraph spacing? I tried putting a style into the HTML markup of a text element but it ignores this.

2

did you include !important after the declaration.

3

I could use an example. What I did was insert the following at the top of the HTML box, along with paragraph tags in the text.

<style>{margin-bottom: .5em;}</style>
4

You haven’t written a selector that you want your declaration to effect

you need something like:

<style>p {margin-bottom: .5em !important;}
/* this applies the rule to all p elements (you can change this to whatever you want)
and the !important makes sure it overrides any other rules */
</style>
6

Hi Trey

You need to understand CSS and how to apply it to elements.
in the inner HTML (HTML box) of a text element you can write the following:
Here are some examples:

<style>
#myDiv {
    color: red !important;
}

.blue {
	color: blue;
}

p {
    margin-bottom: 40px;
}

.reset-margin {
	margin-top: -40px !important;
}
</style>
<div id="myDiv">
    <p>This is a div <span class="blue">with</span> an id of myDiv</p>
    <p>This is more text! You can see the space between us is 40px</p>
    <p class="reset-margin">This is the footer. I have a class that resets the margin</p>
    <p>I am the last and I have a margin.</p>
</div>

You can see it in action here http://hype-expert.uk/test.html

7

I wasn’t trying to create a huge gap between paragraphs but a narrow one — one that makes for good visual formatting. What I pasted was c**p — the umpteenth attempt to do something that should have been drop-dead easy.

The reason why the style didn’t work is that I was trying to create a space that was smaller than 1em. Apparently Hype won’t allow that (I wasn’t trying to create a gap of 40 px, but of .5 em. I also tried 4px, etc.) The style doesn’t work.

Another issue is that Hype treating a hard return as a break and not as a paragraph. To make your style work I had to manually insert paragraph tags.

–––––––––––––

Frankly, the handling of blocks of type has always been an issue with Hype. If you copy and paste type elements within a block of text, Hype inserts a white fill that you have to go in and clean out manually. Because of this, I have to keep a text editor open to clear out formatting so I can paste text without making a mess.

Example: I typed this into a text box:

sample block of styled text

I copied it and pasted it at the end of the end of the line of text. The bold and italics were dropped and a white fill appeared behind the text. When looking at the inner HTML, this is what I found:

sample <b>block</b> of <i>styled</i> text&nbsp;<span style="color: rgb(0, 0, 0); font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-style: normal; font-variant: normal; text-align: left; text-transform: none; text-indent: 0px; line-height: normal; letter-spacing: normal; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);">sample block</span><span style="color: rgb(0, 0, 0); font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);">&nbsp;of&nbsp;</span><i style="color: rgb(0, 0, 0); font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-variant: normal; text-align: left; text-transform: none; text-indent: 0px; line-height: normal; letter-spacing: normal; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);">styled</i><span style="color: rgb(0, 0, 0); font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);">&nbsp;text</span>

Based on the width of this editor in the Hype forum, that works out to one line of text and eleven lines of junk. Pretty impressive.

It is natural for a developer to focus on cool stuff, but this type issue has been a problem from day one and, boring as it may be, I’d like to see the text formatting to be sorted out; the white fill bug first, and then the ability to set a narrow space between paragraphs.

8

First of all, above, is what you replied with. This is incorrect syntax hence my post.

Secondly, I wasn't using your exact sizes. It was just a mere example of correctly applying the write syntax.

Thirdly, text elements aren't really designed for WYSIWYG editing. Hence why the hard return doesn't produce a paragraph. That's why there is a innerHTML box for adding your own HTML. EDIT I'm not sure why you're applying css styling anyway. Why not use more than one text box and position however close or far away you want?

I suggest if you want to bring in your own html into a hype project I would use a HTML widget. This is what it's designed for and you'll find that if you populate the HTML box ( innerHTML) it will correctly style.

i appreciate it can be frustrating sometimes but rather than simply state in what I can only interpret as sarcasm.

Make the appropriate request in Feature Requests.

It's not like these forums aren't helpful and friendly and the developers don't visit and comment and help out.

Tip: If you are bringing in text from somewhere else and you just want the text and nothing else then use the Edit->Paste and match style (⌥⇧⌘V) option with a text element. You can then go ahead and apply basic styling using the Typography inspector. I know you haven't asked for this but it's kinda related.

9

I appreciate your suggestions. The white fill item has already been posted under known issues and feature requests (I post this concern there around once a year).

I also used the code with the !important bit. I tried all sorts of permutations.

As for the paragraph spacing in regard to the look of the text, it becomes important if someone is using the app for more than standard motion graphics, such as when creating a web page with a fair amount of text (Tumult provides a nice example of this - something on Lake Turkana or Magadi, I can’t remember which - but without managed paragraph spacing.) Handing paragraph spacing by using separate boxes only works with rigid boxes, as text reflow can mess things up.

Thanks again.