How to have regular leading / line-height in html when using <sup>

Elements Typography
1

In my hype document I have a lot of superscript in the text. This screws up all the line leading. Is the a way to fix that?

1 Like
2

Add this CSS to the head of your document to make sure superscript doesn’t affect the line-height:

<style>
    sup {line-height:0; vertical-align:text-top;}
</style>

You should also uncheck ‘Protect from external styles’ in the Document inspector.

3 Likes
3

Thanks for the answer Daniel. Where do I find the css file for my hype?

4

Can I add it to the html header of my export from hype?

5

You can edit the contents of the <head>…</head> of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector.

1 Like
6

Do I put that in between brackets or what? When I put that between <> it
becomes blue. Is that ok???

7

There’s a few ways you can do this, and it seems like if you don’t want to have any affect on other lines of text you want to set line height on the SUP and vertical-align:text-top:

vertical-align experiments.hype.zip (87.6 KB)

So in this example I’m doing all the CSS within the actual text element, but you could also do it like this within the <head> of your document like so:

8

Let me rephrase my question Daniel. I am no good in html being mostly a
graphic designer. Can you give me the full line I need to put in my document
head? not only the command. When I put the line you gave me as you gave it
to me it doesn¹t do anything. (sup {vertical-align:text-top;}) I see the
first line in the head of the Hypwe document is written <meta
name=sup{vertical-align:text-top;} / >. What is it I need to add to (sup
{vertical-align:text-top;}) ???

Martin Pilon
514.933.8543
fusioncd@videotron.ca

forumreplies+e34c9d558943f1db9fb14b8e26958c8c@tumult.com

9 
	<style>
	sup {line-height:0;vertical-align:text-top;}
	</style>
10

I drop all 3 lines in the head of my document. Nothing else?

11

Oh and by the way, thanks for all the help Daniel. If I want hype to run at
its best, what kind on configuration should I be looking at? I’m on an Imac
i7 with 12 Gig. Everytime im doing hype, I have the impression that I’m at
the end of ram.

12

You'll also want to uncheck Protect from external styles in the Document Inspector.

It is entirely dependent on the document, amount of scenes, and animations. It sounds like that's a beefy machine, so there's probably not much to do! You're welcome to send an example of your document and a full system profile and we can see if there's any more specific suggestions.

1 Like
13

I was having a look at this topic since I needed to style some dates in advertising banners (an expiration date should appear) so this topic came very handy! :slight_smile:

About this advice regarding deactivating Protect from external styles, I think I shouldn't do this since the banners will be place who knows where and my guess is that the banner design could be affected. I'm I right? I'm still learning. Thanks for your patience.

14

You could avoid deactivating 'Protect from External styles' if you're more specific with your CSS:

A SUP element on the Hype scene can be drilled down like this:

.HYPE_scene sup { }

2 Likes
15

That was easy to fix… Thank you Daniel :slight_smile: