Make single word bold

HTML & CSS
1

I want to bold only the word “Code” in my following CSS syntax. It is a code for inserting some instruction in a page of a book so Pls help

 .bloom-page.insideFrontCover .bloom-contentNational1:before {content: "  This is my Code "  ; font-size: 17pt ! important; font-family: Annapurna Nepal ! important; word-spacing: 5pt ! important; line-height: 1 ! important; font-color: 3px 2px green ! important;}
2

Hi,

You can’t bold just one word unfortunately unless you can wrap a tag around it and you can’t do that with the content property as tags are not allowed as content.

As usual you can ‘hack’ something into submission but has a very limited scope and depends on circumstance.

Your best bet is to change the html so that it allows you to do what you want.:slight_smile:

3

So can you pls help on recoding this so I can bold just a word
:before {content: " This is my Code "}

Thanks.

4

Paul has given you an example. Have you tried using the code he supplied?

We’re here to help you, not to do everything for you. smile Try it for yourself, and if you run into problems, post again, showing your updated code.

2 Likes
5

The simple answer is NO you can’t bold a single word in that snippet.

Your choices are as follows:

  1. Adjust the html so that it allows you to do what you want (add an empty tag at the start of the element and then you can target it with the content property for just one word).

  2. Use js to find the word you want and then add suitable tags around the word to allow you to style it from the css.

  3. Use the hack that I have shown in my codepen albeit that it has very limited use cases and will be hit and miss.

  4. Use an image in the content property instead of text.

5 Likes
6

Might unicode be an acceptable alternative?

Code vs. Code

Code vs. Code

Code vs. 𝐂𝐨𝐝𝐞

Code vs. 𝐂𝐨𝐝𝐞

* Caveat: if a browser can’t display those code points users will see squares, diamonds with question marks or something ugly looking in their place.

2 Likes
7

:+1:

And as pseudo content, the OP text would be:

content:"This is my \1d402\1d428\1d41d\1d41e";
2 Likes
8

Wow that’s great, but I have trouble finding such code for the bold character in Devnagari unicode

9

I tried an internet search for “Devanagari unicode”

This Wikipedia article was the top listed item found:

Perhaps that will help?

10

I can find the unicode for the regular but cant find for the Bold like for latin ‘C’ its U+1D04 and for bold C it is 1d402, I want similar for Devnagari

11

The bold ASCII is really a “cheat” in that it’s an abuse of the intended use

Unicode expressly recommends that these characters not be used in general text as a substitute for presentational markup; the letters are specifically designed to be semantically different from each other.

AFAIK Devanagari characters are not used in mathematical formulae. In other words, you will need one of the approaches PaulOB mentioned in post # 5

3 Likes
12

<off topic>
@sachinkit, May I ask why the wish to create one bold work in a generated string is being sought? Is this a school project or a client’s order?

Interestingly, about two or three times a year, several members will ask very similar odd questions within a very few days. Within the past two days, at least 3 people have asked a question very similar to this one. It seems funny, so I am simply curious to know why.

You do not have to answer if you do not wish to. I am just very curious. cat
smile
</off topic>

2 Likes
13

Yes that could be a problem as some browsers are now taking note of generated content and announcing them. They would likely get a mathematical equation read out rather than text.

4 Likes
14

Indeed, a screen reader saying
“This is my Celsius small o notation distance electron”
would not be a good user experience.

2 Likes
15

Use Example

and put the below code in CSS

.makemebold{
font-weight:600;
}

You can change the boldness by entering value between 100-1000

16

Hi ghanendra,

How does that target only the last word in that pseudo content?

17

Please read the question properly and then see how your answer applies to the problem in hand?

18

Thanks @ghanendra, revisiting this topic made me think again on this unsolved problem. :slight_smile:

@sachinkit and @PaulOB, What about this:

<!DOCTYPE HTML><html lang="en"><head><meta charset="utf-8">
<title>Single Word Bold</title>
<style>
.test{
}
.test:before{
	float:left;
	content:"This is my\a0";
}
.test:after{
	float:left;
	font-weight:bold;
	content:"Code:\a0";
}
</style>
</head><body>

<div class="test"> This is the normal text in the div.</div>

</body></html>

It would work if the div contains only one line of text.

Made a JSFiddle to play with: https://jsfiddle.net/Erik_J/jhp3Lmez/

1 Like
19

Yes that would be fine as long as the line of text doesn’t wrap :slight_smile:

I’m assuming though that the OP wants to add the text as a sort of heading to a longer piece of information.

Good thinking anyway :slight_smile:

1 Like
20

Yes, if the OP could add something like an empty span or anything that can hold the generated content this floated bold word is going to work as wanted I think. :slight_smile:

I have added an empty span to the JSFiddle:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Make Single Word Bold</title>
<style>
div{ 
	padding:1em;
}
.test{
	display:block;
	overflow:hidden;
}
.test:before{
	float:left;
	content:"This is my\a0";
}
.test:after{
	float:left;
	font-weight:bold;
	content:"Code:\a0";
}
</style>
</head><body>

<div class="test"> This works when the div has only one line of text. Resize window to test.</div>
<div><span class="test"></span> This works also when the div has more than one line of text. Resize window to test.</div>

</body></html>

EDIT)

I didn’t notice that. :slight_smile:

I then suggest making the span a block display. (Edited the code above.)

1 Like