The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to have different size text on the same line
David Webdesign
post Nov 4 2022, 04:45 PM
Post #1





Group: Members
Posts: 6
Joined: 20-October 22
Member No.: 28,600



How to have different size text on the same line and have the 2 words butt up next to each other with different colors as this example: BustedComputer

Question:
How can this be done with out using a span tag as when you shrink the width of the browser window or view on a cell phone the title BustComputer will break but at one letter at a time to the next line if not for the media query shrinking the text. I think it would be better to have a larger text with the whole word Computer going to the next line if the width was not wide enough on the cell phone to accommodate both words on the same line.
You can remove the media query to see the effect as you shrink the width of the browser or view on a cell phone.

See the link below for what I have done. I think there has to be a better way!

How to have different size text on the same line

This post has been edited by David Webdesign: Nov 4 2022, 04:52 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 5 2022, 01:00 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Remove the word-wrap: break-word to start with. Then you could try adding a zero width space between the two words.

CODE
<h1>Busted&#x200B;<span class="h2span">Computer</span></h1>


I don't understand some things you are saying. Why do you need to make the H1 display inline "so all the headings can appear on the same line"? There is only one heading and it would appear on one line anyway. And why would a SPAN be needed to butt the words together? If there was a space it must have been because there at one point was space in the markup and the SPAN would do nothing about that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
David Webdesign
post Nov 5 2022, 01:42 PM
Post #3





Group: Members
Posts: 6
Joined: 20-October 22
Member No.: 28,600



As an example: how to have the h1 "Busted" and the h2 "Computer" text on the same line and butt up next to each other. The margin and padding are 0px
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 5 2022, 02:19 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



OK. I'll try again.

1. The two words are already butt up if you don't do anything to stop that. They are written together in the markup. Like this: BustedComputer. The browser doesn't know they are two words. It sees a string of letters with no space between them - one word.

2. To make the line break between the words (in the middle of the string as the browser sees it) when the window gets narrow you must do something. Otherwise the line won't break in the middle of a string (when you have done the step 2). I suggested you add a zero width space.

3. You must remove word-wrap: break-word. It's your addition of that that makes the line break letter by letter and you said you do not want that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
David Webdesign
post Nov 5 2022, 06:47 PM
Post #5





Group: Members
Posts: 6
Joined: 20-October 22
Member No.: 28,600



Thanks for replying. I modified it quite a bit and removed the span tag.
I may end up adding back the media queries to resize the title text.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 5 2022, 09:55 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



The H1 will still break letter by letter because you use word-wrap: break-word.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
David Webdesign
post Nov 6 2022, 03:45 AM
Post #7





Group: Members
Posts: 6
Joined: 20-October 22
Member No.: 28,600



At the link I did explain why.

"I added word-wrap: break-word; to the h1 tag only. The h2 tag word in this case Computer will break to the next line as a whole word. The word Busted would break by individual letter but the width of the screen would be less then any cell phone so not a concern.

Without the word-wrap: break-word; the word BustedComputer would run out of the div container."




pandy' date='Nov 5 2022, 09:55 PM' post='144381']
The H1 will still break letter by letter because you use word-wrap: break-word.
[/quote]
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 6 2022, 03:57 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



And that would be terrible given such a small screen isn't likely? OK, if that's how you want it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post Dec 25 2022, 06:22 AM
Post #9


Advanced Member
****

Group: Members
Posts: 100
Joined: 25-December 22
Member No.: 28,719



What would make the first word the (singular) headING (singular) on your page that everything on the page -- and possibly the entire site / collection of pages -- is a subsection? What makes the second word the start of the primary content subsection of the page? (aka the first content bearing tag inside your MAIN tag?)

That's the same "broken semantics" as what HTML 5 initially tried to do with HGROUP, something that proved the WhatWG wasn't qualified to make 4 Strict's successor.

You do know these tags have semantic meanings and that if you choose them for presentational reasons you're doing it all wrong, right?

I would go with the span inside the H1 if this is indeed your structural H1 candidate, but since you would/should only ever have one H1 I wouldn't be slopping a "class for nothing" on it.

<h1>Busted<span>Computer</span></h1>

If you leave the H1 alone and set the span to inline-block, the span acts as a soft keep-together.

CODE

h1 span {
  display:inline-block;
}


Is literally all you needed.

Here's a pen:
https://codepen.io/jason-knight/pen/rNrOmKx

Side note, don't worry. A LOT of even seasoned developers don't know that trick. I use it in footers all the time so that sections like:

CODE

<footer>
  <span>&copy; CutCodeDown</span>
  <span>Jason M. Knight</span>
  <span>Paladin Systems North</span>
</footer>


Can appear together on one line when the screen is wide enough, but each subsection "keeps together" when it's narrow enough for the text to wrap all thanks to just setting display:inline-block;

This post has been edited by Jason Knight: Dec 25 2022, 06:25 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 06:51 AM