I'm using a custom font. The design doesn't allow me to change font.
While the number change, the content after it got pushed around due to the different width of digits.
Is there a way to make all the digits same width? I don't want to assign the width of the span component because I need this to be inline and the width should be determined by the number of digits it has.
const numberDom = document.querySelector('.number');
let number = 0;
function tick() {
number += 1;
numberDom.innerText = number;
}
setInterval(tick, 50);
p {
font-size: 1rem;
}
.number {
font-family: 'Carter One', cursive;
font-size: 1.5rem;
color: #365;
}
.number::after {
content: 'pt';
font-size: 0.75em;
margin-left: 0.1em;
color: #587;
}
<link href="https://fonts.googleapis.com/css?family=Carter+One&display=swap" rel="stylesheet">
<p>You got <span class="number"></span>, good job!</p>
Okay so first I made a function that it changes the looks of your <p>. after that the only solution I could find to stop the jiggling was to put the number in an inline-block.
Here is my fiddle
Edit
I made a script that changes the width of the inline-block. It's an if statement that if your number is 1000 or higher the width will change.
Fiddle
You can always make an else if with over 10000 et cetera.
Change your number class as:
.number {
font-family: 'Carter One', cursive;
font-size: 1.5rem;
color: #365;
width: 56px;
display: inline-flex;
}
You can use
.numbers{
font-family: Tahoma;
}
It will fix the number jumping/height abnormality issue.
Related
A site I'm busy working on has a section with some very large headings. There's something I'm not sure how to handle:
The heading may be one two short or long words, e.g: "Cyprus" to "Nouvelle Zelande", and it must scale to be roughly the width of the viewport. That means "Cyprus", being shorter, will have larger individual characters than longer text than "Nouvelle Zelande".
This would be relatively easy to do with JavaScript, I think, but I'd like to go for a pure HTML/CSS solution. So: how can I scale text to fit the width of the viewport? So far, I'm stumped and not sure how to do it, myself.
Some details:
You only need to target the most recent version of each browser, which includes IE11.
You may use any and all HTML5 and CSS3 that works within those browsers.
It's okay if you make the text "Nouvelle Zelande" word-wrap, as long as the longer of the two words still roughly fits to the width available.
You may add extra elements inside/around the headings.
Note that viewport units are not a solution. Previous questions asking about this (Pure CSS to make font-size responsive based on dynamic amount of characters, Font scaling based on width of container) have answers of "use viewport units, like vw!", but that doesn't handle this scenario at all, and astute readers even pointed this out. I've even used vw in the code sample below to demonstrate its non-solution-ness. It'll size based on the viewport just fine, but won't do any sizing based on the amount of text.
Code sample
h2 {
font-family: sans-serif;
text-transform: uppercase;
font-size: 14vw;
white-space: nowrap;
overflow-x: hidden;
margin: 0;
}
<h2>Nouvelle Zelande</h2>
<h2>Australia</h2>
<h2>Cyprus</h2>
The only unit, if being used to set font size, that is relative to the size of its container, is viewport units vw/vh, which will not solve your case alone, even if the container is the same width as the viewport, since it does not calc the letter size to fit into the container.
The closest non-script solution I can come up with is to use the CSS element counter trick, and wrap each letter in a span
The 130vw I set here, worked best for the given font, though this might need to be adjusted based on which font family is being used.
h2 {
display: inline-block;
font-family: sans-serif;
text-transform: uppercase;
white-space: nowrap;
overflow-x: hidden;
margin: 0;
}
/* 1 letter */
h2 span:first-child:nth-last-child(1) {
font-size: 130vw;
}
/* skipped 2-5 in this demo */
/* 6 letters */
h2 span:first-child:nth-last-child(6),
h2 span:first-child:nth-last-child(6) ~ span {
font-size: calc(130vw / 6);
}
/* skipped 7-14 in this demo */
/* 15 letters */
h2 span:first-child:nth-last-child(15),
h2 span:first-child:nth-last-child(15) ~ span {
font-size: calc(130vw / 15);
}
<h2><span>N</span><span>o</span><span>u</span><span>v</span><span>e</span><span>l</span><span>l</span><span>e</span> <span>Z</span><span>e</span><span>l</span><span>a</span><span>n</span><span>d</span><span>e</span></h2><br>
<h2><span>C</span><span>y</span><span>p</span><span>r</span><span>u</span><span>s</span></h2>
Here is the same concept using a script, and without the span's
(function (d,t) {
window.addEventListener("resize", throttler, false);
window.addEventListener("load", throttler(), false); /* run once on load to init */
function throttler() {
if ( !t ) {
t = setTimeout(function() {
t = null;
keepTextFit(d.querySelectorAll('h2'));
}, 66);
}
}
function keepTextFit(el) {
var f = el[0].getAttribute("data-font");
for (var i = 0; i < el.length; i++) {
var c = el[i].textContent.split('').length;
el[i].style.cssText =
'font-size: calc(' + f + ' / ' + c + ')';
}
}
})(document,null);
h2 {
display: inline-block;
font-family: sans-serif;
text-transform: uppercase;
white-space: nowrap;
overflow-x: hidden;
margin: 0;
}
<h2 data-font="130vw">Nouvelle Zelande</h2>
<h2>Australia</h2>
<h2>Cyprus</h2>
Note, since resize events can fire at a high rate, the throttler is used to reduced the rate so the handler doesn't execute expensive operations such as DOM modifications too often.
If you want to make a perfect fit, check this post: fit-text-perfectly-inside-a-div
If you are looking to use a plugin there's
http://fittextjs.com/
wich can do that for you
Guys this question is related to this one > Apply CSS to the words in a paragraph written in brackets (parenthesis)
As the databse is not in my control, i'm trying to find some alternatives. Is there a way in CSS to count the number of characters in a sentence and then apply CSS to the rest of the characters?
1ch = width of a "0" (zero)
1ex = height of an "x" (lower case)
ex seems more accurate. Like #BoltClock♦ said, it's not counting, but it's a way to limit the number of characters. I'd try to "do some CSS with the rest" but OP was not specific, and frankly, I have no idea.
Update
The best I can come up with is putting the remaining text in a :after and then style the content.
p.fifteen { max-width: 15ex; outline: 1px solid red; }
p.seventeen { max-width: 15ch; outline: 1px solid red; }
p.fifteen:after { content: 'fghijklmnop'; font-size: 36px; color: red; }
p.seventeen:after { content: 'hijklmnop'; font-variant: small-caps; font-weight: 900; }
<p class="fifteen">123456789abcde</p>
<p class="seventeen">123456789abcdefg</p>
You'll need JavaScript to do that just use somestring.length like so:
var someString= 'abc';
var str = someString.length;
console.log(string);
Result: 3
Check this out for more info http://www.quirksmode.org/js/strings.html
or jQuery method is:
Html
<div id="selector">Some Text</div>
jQuery
$('#selector').text().length;
On my website i use non standard cyrillic font. It looks well but it have problems with some special symbols, for example - quotes (for some reason opening and ending quote look different).
I would like to set font-family for specific symbols using CSS. Is it possible?
You can manage this using a unicode range #font-face rule
MDN Reference
I'm unsure as to how well this demo will work in a Snippet as it will depend on you have the designated font installed. However, in general, it's something like this:
#font-face {
font-family: 'Algerian';
src: local('Algerian');
unicode-range: U+022-026;
}
div {
font-size: 4em;
font-family: Algerian, sans-serif;
}
div {
text-align: center;
}
p {
font-size: 72px;
}
<div>
<p>" Lorem & Ipsum "</p>
</div>
In this instance I've applied the rule to open & closed quotes and the ampersand.
Support: CanIUse.com
For Firefox though:
Support can be enabled in Firefox using the layout.css.unicode-range.enabled flag
If you want to change your symbols to a new font then you'll have to wrap them in a tag and assign a class...
in your CSS add a class for the font
.symbol {
font-family: Arial;
}
Then in your HTML you will need to use this class on your symbols...
<p>Jesse Jackson? Do you even... ah, I see you have a telephone at least. You know that blinking thing I've been calling you on?
<i class="symbol">"<i>I will break this, I will BREAK THIS.<i class="symbol">"<i> </p>
If the problem is only for quotes?
You could set the :before and :after pseudo for a <blockquote></blockquote>, which could be set to a icon font. Perhaps fontawesome?
blockquote {
position: relative;
padding: 1em 2em;
}
blockquote:before,
blockquote:after {
position: absolute;
font-family: FontAwesome;
}
blockquote:before {
content: "\f10d";
left: -1em
}
blockquote:after {
content: "\f10e";
right: -1em
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="stylesheet">
<blockquote>Jesse Jackson? Do you even... ah, I see you have a telephone at least. You know that blinking thing I've been calling you on? I will break this, I will BREAK THIS. Damn druggie idiot. Is this what you've been doing the whole time I've been trying to reach
you?</blockquote>
you can use easily like
.custom-font{
font-family:any
}
and then
<div>hello there <span class='custom-font'>i am custom</span> but i am not</div>
I would like to create a tile which is inherited from sap.suite.ui.commons.GenericTile and displays only an icon (centered in the middle of the tile). Due to the centering, I cannot use the standard aggregations or property as they have the icon placed at a specific position (which is on the left lower side).
I have tried the following but with no luck:
$.sap.declare("myAddTile");
sap.suite.ui.commons.GenericTile.extend("myAddTile", {
init: function() {
// do something for initialization...
sap.suite.ui.commons.GenericTile.prototype.init.call(this);
},
renderer: function(oRm, oControl) {
var oPlusIcon = new sap.ui.core.Icon({
src: 'sap-icon://sys-add'
}).placeAt(oControl);
sap.suite.ui.commons.GenericTileRenderer.render(oRm, oControl);
}
});
The resulting tile is empty...
I played around a bit with the renderer and came up with this solution:
rm.write("<div");
rm.addClass("myAddTileIcon");
rm.addClass(oControl.getSize());
rm.writeClasses();
rm.writeAttribute("id", oControl.getId() + "-icon");
rm.write(">");
rm.renderControl(new sap.ui.core.Icon({
src: 'sap-icon://sys-add',
size: "5rem"
}));
rm.write("</div>");
Of course, the right alignment of the icon needs to be taken care of, too:
.myAddTileIcon .sapUiIcon {
font-family: SAP-icons;
font-size: 5rem;
line-height: inherit;
cursor: default;
text-align: center;
display: block;
padding-top: 20%;
vertical-align: middle;
color: grey;
}
If someone has a comment how to solve this in a more elegant way, please post.
Cheers
I'm confused about ampersand behaviour in LESS compiler with BEM syntax and font unit
When using pxtoem to convert px to em with base font size in px is 12px (0.75em), but when converted to 11px, it is 0.917em.
About ampersand behaviour
Example:
<div class="search-form search-form--full">
<p class="search-form__text">
</div>
As I know, & will just join (concatenate) the nested selector to the whole list of outer selectors or maybe same level, so:
search-form{
&__text{
font-size: 10px;
}
}
Will be complied to:
search-form search-form__text{
font-size: 10px;
}
How can I join --full selector.
Thank in advance
To get search-form--full, you have to do this :
.search-form{
display:block;
&__text{
font-size: 10px;
}
&--full {
color: #fff;
}
}
you will have :
.search-form {}
.search-form__text {}
.search-form--full {}
About the PxToEm convertor, be careful to which element is the parent.
If we have a LESS or Sass Mixin to convert like .pxtoem();
E.g :
body { font-size: 16px }
span { .pxtoem(12) }
It's 12/16 = 0.75em
but if you do :
E.g :
p { font-size: 12px }
p span { .pxtoem(11) }
This time, it's 11/12 = 0.91em and not 11/16 (body font size);
Your mixin is certainly child divided by parent and not child divided by body
If you want this, use REM. Check this : http://snook.ca/archives/html_and_css/font-size-with-rem