Can i style an integer value in html with css

Question

i was wondering, is there a way to style integers only in a given class?

My html looks like this:

<div class="output">0 hours 12 minutes and 40 seconds remaining</div>

So i want to make only the integres bold

I am looking for another option then this:

 <div class="output"><b>0</b> hours <b>12</b> minutes and <b>40</b> seconds remaining</div>

Why don't you add 0 and the css .integers{font-weight:bold;} — user1725382, Aug 16 '16 at 22:03

score 5 · Accepted Answer · answered Aug 16 '16 at 22:04

You can use regular expressions and a .replace for this.

$(".output").html(function() {
 return $(this).text().replace(/(\d+)/g,"<strong>$1</strong>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output">0 hours 12 minutes and 40 seconds remaining</div>

Or with plain JavaScript.

// See this answer about getting text: http://stackoverflow.com/a/6743966/1150683
var el = document.getElementsByClassName('output')[0];
var text = el.innerText || el.textContent || '';

el.innerHTML = text.replace(/(\d+)/g,"<strong>$1</strong>");

<div class="output">0 hours 12 minutes and 40 seconds remaining</div>

Awesome solution! Thanks – Jack Maessen Aug 16 '16 at 22:10 — Jack Maessen, Aug 16 '16 at 22:10

score 4 · Answer 2 · answered Aug 16 '16 at 22:35

Your question mentioned wanting to style integer values in HTML by using CSS off of a single class. Although there's a working answer with JS, this can be accomplished with only CSS.

There is a unicode-range value which can be added to @font-face rules to only apply the font to certain characters. It is supported in all modern browsers and IE back to version 9 (https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range).

You can use it to apply different fonts with different weights inherent to the font to the digits only. Consider the following, which applies Arial Black to '0-9' and '.' characters:

@font-face {
    font-family: boldDigits;
    src: local('Arial');
}

@font-face {
    font-family: boldDigits;
    src: local('Arial Black');
    unicode-range: U+0030-0039, U+002E;
}

body {
  font-family: boldDigits;
}

Example live at: http://codepen.io/honzie/pen/ZOPKvr.

Note that there are a couple downsides to this: you can't apply different font-weight properties directly here. So, if you want a font that's not Arial, you may have to either use a Google Font or a custom-designed font.

I almost can't believe it! This is genius! Learning something new every day :) — Aziz, Aug 17 '16 at 01:37

score 1 · Answer 3 · answered Aug 16 '16 at 22:16

1

Maybe this solution is worth trying, because it doesn't require any additional Javascript :)

HTML:

<div class="output">
    <span data-num="0">hours</span>
    <span data-num="12">minutes</span>
    and
    <span data-num="40">seconds</span>
    remaining
</div>

CSS:

.output span:before {
    content: attr(data-num) "\00a0";
    font-weight: bold;
}

Live example: http://codepen.io/anon/pen/bZkWLR

answered Aug 16 '16 at 22:16

jedrzejginter

402
3
10

I don't see the advantage of this. You say that this doesn't need JavaScript, but it needs the same amount of JS as the accepted solution. To transform the given example into your HTML, you also need JS. Otherwise, if the HTML was free to start with, OP could simply wrap the integers in `strong` tags themselves. Unless I misunderstood, and alternative HTML structures were allowed. – Bram Vanroy Aug 16 '16 at 22:39

Can i style an integer value in html with css

3 Answers3