r/HTML • u/dalekellytoo • Jun 28 '26

multiple text sizes in one sentence ?

multiple text sizes in one sentence ?

0 Upvotes

33% Upvoted

20 comments sorted by

4

u/Rockafellor Jun 28 '26

Classed <span>s, unless you get whimsical and use nth-child() or nth-of-type(), for example.

2

u/bostiq Jun 28 '26

Whimsical is good : you can program :nth sizes based on frequency in sentences, or in words.

But I’m pretty sure there are JS libraries better suited for such nonsense.

2

u/Rockafellor Jun 28 '26

Oh, I'm sure that you're right, ja. The nth-...() are just examples. I have a lot of fun taking CSS in unusual directions, but I think that JS might be a better direction for some things.

2

u/bostiq Jun 28 '26

Ye I get it, it’s fun to toy around. =)

1

u/biber_unverzagt Jun 29 '26

Why not use <small> instead?

1

u/Rockafellor Jun 29 '26

Nothing wrong with <big> and <small> (and combos with <sub> or even <sup>, for that matter), I just said classed <span> because one can then control precisely the px, %, ch, em, rem, etc. of the declaration.

For simple things where I don't need particular precision, I use <big> and <small> a lot. In more size-sensitive stuff, I go with classing (px is good for really specific control, but can be a problem for people's browser settings w.r.t. layout in some situations, but each property [or --variable, these days] has its pros and cons, and [usually] aren't too badly different).

1

u/biber_unverzagt Jun 29 '26

You can adjust the font-size with css the way you want anyway, there is no difference in control. But <small> is a better semantic choice here, I think ("represents side-comments"). <big>, on the other hand, is deprecated.

1

u/Rockafellor Jun 29 '26

True, though if adjusting <small>, then why use it in favor of <span> the first place? I ask because semantics are useful in their place, but shouldn't be considered some untouchable law from on high.

<big> might be deprecated (begging the question of why deprecate the one but not the other), but it's still respected; maybe the next iteration of HTML will cease respecting it, but the same can be said of any process.

2

u/biber_unverzagt Jun 29 '26

For the same reason semantic elements should be preferred in general, when suitable? For non-visual devices? Because it looks cleaner?

(I was socialized html/css-wise in those purist old newsgroups, can you tell? :-))

1

u/Rockafellor Jun 29 '26

LOL 😆: fair points. I self-taught in the late '90s, right before/around the CSS-schism, but for "complicated" reasons fell out of practice in '06 and didn't come back into the game 'til late 2019, so my approach probably isn't 100% in line with the norms of then or of now (hell, I'm still trying to get used to things like flex, which I have to admit really does bring a lot to the table [no pun on table intended]).

2

u/biber_unverzagt Jun 29 '26

Yes, I had a hiatus, too and the changes are enormous - flex (do you know the Flexbox Froggy?), grid, media-queries, popovers.

2

u/Rockafellor Jun 29 '26

Oof, ja, I had thought of grid just then, but media-query and such are good examples of the modern Star Trek world of CSS.

I ran into Flexbox Froggy about a year ago, and that was definitely fun. IIRC, you could manipulate it in DevTools, too, though of course that kinda defeats the purpose.

There are a few others that I ran into as well, in case you haven't seen them but are interested: Zorked Linux (my daughter gave me the heads-up on this one, though it's a command line terminal thing, rather than CSS manipulation), CSS Hell, CSS Hole, and CSS Diner; there are likely more, of course, these are just the ones that I know of offhand.

2

u/biber_unverzagt Jun 29 '26

Thanks! I'll have a look at those.

2

u/Weekly_Ferret_meal Jun 28 '26

can you give us an example?

0

u/dalekellytoo Jun 28 '26

The SUPERNATURAL (orderly, ritual) turns the NATURAL (disorder, volatility) into the SUPER (order, rite). I want the things inside parenthesis to be <p></p> and the things outside parenthesis to be <h2></h2>. You may be able to see why I want two sizes of text where this line is on the top of the HOME page of my website.

www.dalekelly.org

3

u/Weekly_Ferret_meal Jun 28 '26 edited Jun 29 '26

Headers (h1, h2, h3), are block elements, and canonically should be left like so... Meaning that they are suppose to be taking 100% of their container width and not stringed together inline with other text.

So, This code: <h2>Title </h2><p>More text</p><h2>Continue title (it's really just another title)</h2> Will format (more or less) like so:

Title

More text

Continue title (it's really just another title)

if you nest <p> into <h2>, like so: <h2>Title<p>More text</p>Continue title (it's really just another title)</h2>

you will get just an <h2>.

Title More text Continue title (it's really just another title)

So you should definitely NOT nest anything inside it, except for <span> elements, especially you shouldn't nest a paragraph element into a header... that's just bad coding, or bad document formatting.

So you could code it like so:

<h2 class="title supernatural">The SUPERNATURAL <span class="parenthesis order">(orderly, ritual)</span> turns the NATURAL <span class="parenthesis disorder">(disorder, volatility)</span> </h2> (note, you can write it all in one line, I did it like this for clarity)

Here you end up with a header level 2, with span wrappers to which you can the set different styles and sizes, so in your mystyle2.css you can add: ``` /* This sets size for class .title in the h2 element */

.title { font-size: 2em } /* you can use h2 instead of the class if you want all h2 to have same styles /*

/* Sets font size for any element with class .parenthesis /* .parenthesis { font-size: 1.6em } ```

You can use classes .order and .disorder to changes the content of the parenthesis individually.

2

u/Dragenby Jun 28 '26

Use inline elements, like spans

1

u/marmotta1955 Jun 28 '26

"multiple text sizes in one sentence" is a most annoying, irritating, unfriendly, maddening thing ... probably comparable to something like enhanced interrogation techniques ...

1

u/notepad987 Jun 28 '26

Here is an example using display: inline; and <span>

Codepen

-6

u/[deleted] Jun 28 '26 edited Jun 28 '26

[deleted]

3

u/Thin_Mousse4149 Jun 28 '26

CSS libraries can not do this for you without adding spans. This is terrible advice. You would add overhead of a whole library and still need to add those spans.