Make font to occupy space of specific font size - html

Let's say I have button and it has text 'Submit' inside in it with font-size of 16px.
Now I want 'Submit' text to occupy as same space as if it was of font-size of 32px, with having font-size 16px.
Is there a to way achieve this? I tried with line-height but unable to get desired results.

You can also use the em unit as a font size for your element. It was designed so you can scale from your base font size e.g. 2em will make the span text twice the size of your base font size
If you just want to have your text fit a container then you can use something like the fittext plugin
body {
font-size: 16px;
}
span {
border: 1rem solid #370DD7;
background-color: white;
padding-inline: 0.5rem;
}
.bigtext {
font-size: 2em;
}
<span>This is some text</span>
<span class='bigtext'>This is bigger text</span>

You could transform the button contents by scaling a 32px font by a factor of 0.5. As transforms are a paint-time operation, they won't affect the layout or the size of the button. Like this:
button {
display:block;
font-size: 32px;
}
button.size16 span {
display: block;
transform: scale(0.5);
}
<button class="size32"><span>Submit</span></button>
<button class="size16"><span>Submit</span></button>

Font Size is the attribute which decides how much space a text would occupy.
So, when you put 32px as font size it means the text will occupy 32px. And, when you put 16px it will only occupy 16px.
What you are expecting now cannot be done and also does not seem to be a valid requirement.
Can you please describe your exact requirement in more details.
Do you want the text to occupy the whole 32px or just the parent to have 32px.
Also try to share the code snippet.

Related

How can I create the same aspect ratio to align size of button and increment counter?

I've created a page of increment counters for collecting stats on football games but the text of the increment '0' doesn't change in relation to the button size. I am trying to make all the buttons fit on the screen without scrolling.
Larger buttons are unchanged. but the smaller buttons are set at a height to 4% as there are 24 rows of buttons.
Code for each row is:
.row5{
display: flex;
text-align: center
}
buttons are set to:
.button{
color: #000000;
background-color: #ffffff;
font-weight: bold;
font-size-adjust: auto;
width: 16%;
padding:0;
margin:0;
border-color: #ff9900;
height:4%;
}
Please can somebody help to change the size of the text for '0' but make it proportional to button size. I know I can change the font size to 10px for example but I don't think this will help working on a smaller screen.
Hope this makes sense. Thanks in advance for any answers.
You can use font-size: clamp(value1, value2, value3) for responsive font-sizes.
The first value is the minimum value - the font-size will never be lower than what you set here.
The second value is the preferred value. The element will try to set the font-size to this value.
The last value is the maximum value. The element's font size will never exceed this.
As for setting the values, I suggest using either em, rem or vw-units for a fully responsive effect. Using the em-unit on the font-size property allows setting the font size of an element relative to the font size of its parent. When the size of the parent element changes, the size of the child changes automatically.
Read more about em & rem on the font-size-property: https://www.geeksforgeeks.org/difference-between-em-and-rem-units-in-css/
Play a bit around with the values! Try resizing the browser in a new tab with the example snippet and see the effect of how powerful clamp() is.
body {
width: 800px;
font-size: 20px;
}
div {
width: 50%;
font-size: clamp(0.5em, 4vw, 3em);
}
<body>
<div>
Font size
</div>
</body>

How to adjust size of letter background?

I have a word with a background colour. This is fine except that I want the background color a certain size in relation to the word. Simply putting background-color: blue,gives the word a background color and display: inline-block makes the color fit the word exactly. So far so good. The problem is as soon as I increase the font size, the background colour shape warps and either goes into a square covering half the word or goes into a line covering the width but not the height.
#media (min-width: 768px) {
.about5 {
color: red;
background-color: blue;
display: inline-block;
position: relative;
font-size: 90px;
left: 320px;
font-weight: bolder;
transform: rotate(90deg);
bottom: 100px;
z-index: 3 !important;
}
}
<div class="about5">About</div>
This gives a background colour of blue which covers half the word but not the other half.
So how do I get it to cover the whole word and fit exactly, even to perhaps add a bit of padding?
Can I just apply width and height or is there another way?
Thanks.
The page is here and it differs according to desktop mobile.
I inspected the element on your site and saw that your about5 class has the attributes of width and height both set to 100px. Either you specified those dimensions or they were inherited from a parent element. Get rid of your height element only, then change width to auto and add padding: 3%. That's what ended up working for me in the Inspector for your site, although the code works just fine for me in this JSFiddle: https://jsfiddle.net/z0keyftb/

make link text same height as link background

Seems simple but I can't seem to do it, I would like to make the text of my link the same height as the background of the link.
<a href='link.htm' style='background-color: red; display: block; height: 30px; font-size: 30px;'>Link text</a>
The problem is there is always a margin around the text
I think it's because you are using text-decoration: underline.
If you remove height: 30px, the block will rezise to the size of font.
Here are examples: Width static height , Removed height property.
Or you can set text-decoration: none and then it will fit the block.
It it what you wanted? If not, please provide some screenshots with explanation.
The font-size doesn't reflect the physical height that the text occupies, you have to account for descenders as well. You could set the line-height:
<a href='link.htm' style='background-color: red; display: block;
height: 30px; font-size: 30px; line-height: 30px;'>Link text</a>
(You should use a stylesheet rather than inline styles, although this perhaps is just to demonstrate the issue?)
Setting the line-height does make the height setting redundant for this small example though and, usually, the line-height is larger than the font size, defaulting to roughly 1.2.

Why is 1em shorter than the default font size?

I was doing some experiments, and then I ran into this issue. I sat a div's height to 1em, and I expected the div to contain the whole height of the text within, but it did not. 1em is my browser is 16px.
When I did not specify the div's height, it successfully contained the whole height of the text, and when inspected, it turned to be of height 19px.
Is my understanding of em wrong, as I thought it should represent the default font height of the browser.
div {
margin: 0;
padding: 0;
}
.first {
height: 1em;
background: green;
}
.second {
background: orange;
}
<div class="first">سلامًا Say I Wantأًّ</div>
<br />
<div class="second">سلامًا Say I Wantأًّ</div>
https://jsfiddle.net/9t43kyu2/1/
The typographical line-height of a text isn't surely the actual height of the rendered text in pixels:
The line-height css parameter of a text contains only the height between "caps height" and the "baseline". It is on most cases 1em on my experience and also on most non-standard sources of the net. But its standardized details are better described in #web-tiki 's answer.
If there are characters which have parts over it or below it, they will result a text whose height (in pixels) is bigger as the line height (in pixels).
The text can have small details which are below or over the standard text line. For example, the lowest part of an y, or the uppest parts of a non-ascii Ű character. These causes continously problems in the positioning.
If you don't set the div height, it will be by default auto, which mean, the whole content will be in it. If you specify the div height to the actual line size, without padding, border and margin, then some pixel of your text will maybe overflow. You only didn't see it, because the default value of the overflow css-parameter is visible.
Best test for that: create a div with the following settings:
#divId {
height: 1em;
line-height: 1em;
overflow: hidden;
}
...and copy-paste an yŰ into its content (but characters are also okay). You will see it clipped on both sides.
The fact that the second div is higher is because of the default line-height property. It's default value is normal.
normal
Tells user agents to set the used value to a "reasonable" value
based on the font of the element. The value has the same meaning as
. We recommend a used value for 'normal' between 1.0 to 1.2.[...] [source w3.org]
This makes your second div ~=1.2em high depending on your user agent. You can set it's line-height:1em; to see the difference :
div {
margin: 0;
padding: 0;
}
.first {
height: 1em;
background: green;
}
.second {
background: orange;
line-height: 1em;
}
<div class="first">سلامًا Say I Wantأًّ</div>
<br />
<div class="second">سلامًا Say I Wantأًّ</div>

Resize text based on div resizing?

To start things off, here is my code:
.header{
width: 100%;
height: 10%;
background-color: #FF4545;
}
.headertext{
font-family: 'Duru Sans', sans-serif;
font-size: 65px;
float:left;
margin-top: 0px;
margin-bottom: 0px;
}
.headermenu{
font-family: 'Duru Sans', sans-serif;
font-size: 65px;
float: right;
margin-top: 0px;
margin-bottom: 0px;
}
So both the .headertext and the .headermenu are html p statements that are embedded within the .header div. Now, the .header div has a bg color. When I resize my window, the div resizes (very clearly with the bg color) however the text does not resize. It makes sense that the text doesn't resize given that I have assigned a concrete font size for them. I wanted to ask how I can have the font size dynamically scale so that the text is always kept within the div? At this point it pokes out the bottom when you resize, meaning half the text is within the bg colored div and half of it is sticking out into whitespace. I hope this is clear enough, thanks!
Try to use change it like this:
1) Add "font-size: 65px;" to the class ".header"
2) Replace the definition of font-size in the class ".headertext" and ".headermenu" by "font-size: 1em;"
Thus, the child will get the same size of the parent node. Therefore, when the parent is resized, the children nodes will be resized too.
Defining your font size in pixels makes them definite sizes instead of something that will scale well with a fluid layout. Define your fonts in em instead of pixels. To find the proper em size you divide the font size by 16 which is the standard font size for browsers. For instance, your font size of 65 pixels would become 4.0625em (65 / 16 = 4.0625).
I think there is no CSS way to make font-size smoothly scale on window resize.
You might try CSS Media Query too set font-size relative to specific widths/heights
See example: http://jsfiddle.net/Ww4hB/
Otherwise, you need JavaScript to update font size on page load and window resize.
edit:
There is also something called viewport unit, but it isn't supported in all browsers.
See more: http://css-tricks.com/viewport-sized-typography/