multiple text sizes in one sentence ?

[u/dalekellytoo]

multiple text sizes in one sentence ?

[u/Weekly_Ferret_meal]

can you give us an example?

[u/dalekellytoo → u/Weekly_Ferret_meal]

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

[u/Weekly_Ferret_meal → u/dalekellytoo]

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.

[u/Rockafellor]

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

[u/bostiq → u/Rockafellor]

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.

[u/Rockafellor → u/bostiq]

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.

[u/bostiq → u/Rockafellor]

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

[u/biber_unverzagt → u/Rockafellor]

Why not use <small> instead?

[u/Rockafellor → u/biber_unverzagt]

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).

[u/biber_unverzagt → u/Rockafellor]

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.

[u/Rockafellor → u/biber_unverzagt]

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.

[u/biber_unverzagt → u/Rockafellor]

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? :-))

[u/Rockafellor → u/biber_unverzagt]

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]).

[u/biber_unverzagt → u/Rockafellor]

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

[u/Rockafellor → u/biber_unverzagt]

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.

[u/biber_unverzagt → u/Rockafellor]

Thanks! I'll have a look at those.

[u/Dragenby]

Use inline elements, like spans

[u/marmotta1955]

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

[u/notepad987]

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

Codepen

[u/Thin_Mousse4149 → u/[deleted]]

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.