I am making a pagination system for my search page and currently have something that looks like this:
.pagination-wrapper{
display: flex;
justify-content: center;
padding-top: 50px;
}
.number{
border: thin solid rgb(80 80 80);
padding: 0.2rem 0.3rem 0.2rem 0.3rem;
text-align: center;
margin: 0 0.2rem;
min-width: 1rem;
}
<div class="pagination-wrapper">
<span class="number">1</span>
<span class="number">56</span>
<span class="number">111</span>
<span class="number">888</span>
</div>
I put min-width on the number elements to make the border have the same size for single and double digit numbers which works as expected.
Problem
When I have a "small" 3-digit number like 111 it takes up less space than a larger one like 888. The difference is subtle in the fiddle, it is much larger with my current font. Image for reference with my font:
What I want
I want the boxes of each 3 digit number to be the same size. Not the same size as the single and 2 digit ones, it can be larger. So the sizes for each 1 and 2 digit numbers are as the min width, say 16px. Then all 3 digit numbers should have the same width of the box, say 24px. And each 4 digit number should have 32px etc.
What I tried
I have tried to apply the attribute monospace to the font family with no help, I guess it is because my font is simply not monospaced. I solved it with Javascript by when I click on a page it will check the page numbers and apply a different min-width to each element depending on the size of the number. This feels a bit overkill though.
If it's of any help I use bootstrap 3 as framework, but the problem applies without it too.
Is there a way to solve this with HTML/CSS without JS or without changing to monospaced font?
A solution proposed here is inserting each character into its own span of fixed width:
How to imitate a monospace font with a variable-width font?
In your class, you can try this property. As per your request, I'm sure it will work
.number { flex: 1 1 0%; }
Try adding font-kerning: none; to the numbers class. Perhaps in combination with letter-spacing: 0.1rem;, which you can adjust using positive and negative values, if needed.
Related
I have this code:
<p style="line-height: 1;overflow: hidden;">blah_blah</p>
<p>blah_blah</p>
<p style="line-height: 1;overflow: hidden;">qypj;,</p>
<p>qypj;,</p>
which results in (notice no underscore, and cut characters):
That is, it behaves that way in Firefox (66.0.3 on Windows 10). Other browsers seem to render the underscore. The above snippet runner also seems to work (even in Firefox), unless you run it in "Full page".
This Q is similar to Text changes height after adding unicode character except there are no tricks here. "_" is just a simple ASCII character.
My question is which behavior is the correct one.
Is specific character allowed to change line height (I thought it was only supposed to be font dependent)? Shouldn't line-height: 1 imply it can fit exactly any text?
I suppose some characters are special, such as "p", "g", "j" (and possibly "_") that draw below its line. Still which behavior is the correct one. Is it considered overflow or not?
PS: Furthermore I find it funny either overflow-x: hidden;overflow-y: visible; and overflow-x: visible;overflow-y: hidden; still causes this. Which seems more like an actual bug to me.
My question is which behavior is the correct one.
All of them are correct because we don't have the same default font in all browsers and it's also different depending on the OS.
Is specific character allowed to change line height (I thought it was only supposed to be font dependent)?
Character doesn't change line-height. To be more accurate, line-height is a property that can only be changed by setting line-height but you are probably confusing with the line box that is defined by the line-height and a character alone cannot change it.
Shouldn't line-height: 1 imply it can fit exactly any text?
Not necessarely, line-height:1 means that the line box will be equal to the 1xfont-size 1 but is the font designed to include all the character inside this space? Probably most of them will do but we don't know.
Basically, you have two things to consider. The content area that is defined by the font properties and the line box that is defined by the line-height. We have no control over the first one and we can only control the second one.
Here is a basic example to illustrate:
span {
background:red;
color:#fff;
font-size:20px;
font-family:monospace;
}
body {
margin:10px 0;
border-top:1px solid;
border-bottom:1px solid;
animation:change 2s linear infinite alternate;
}
#keyframes change {
from {
line-height:0.2
}
to {
line-height:2
}
}
<span >
blah_blah
</span>
The red is our content area and its height is defined by the font properties and if you inspect the element you will see it has a height equal to 23px (not 20px like the font-size) and the borders define our line box that we control using the line-height.
So if the line-height is equal to 1 we will have a line box equal to 20px which is not enough to contain the 23px of the content area thus it will get truncated and we may probably hide some characters (or a part of them) which is logical:
span {
background: red;
color: #fff;
font-size: 20px;
font-family: monospace;
}
body {
margin: 5px;
line-height: 1;
overflow:hidden;
}
html {
overflow:auto;
}
<span>
blah_blah ÂÄ j p
</span>
a different font-size will remove the underscore in Firefox:
span {
background: red;
color: #fff;
font-size: 26px;
font-family: monospace;
}
body {
margin: 5px;
line-height: 1;
overflow:hidden;
}
html {
overflow:auto;
}
<span>
blah_blah ÂÄ j p
</span>
Another example with a Google Font where the result should be the same cross browser. The underscore is visible but not the ^/¨
span {
background: red;
color: #fff;
font-size: 26px;
font-family: 'Gugi', cursive;
}
body {
margin: 5px;
line-height: 1;
overflow:hidden;
}
html {
overflow:auto;
}
<link href="https://fonts.googleapis.com/css?family=Gugi" rel="stylesheet">
<span>
blah_blah ÂÄ j p
</span>
Another example where the underscore is not visible:
span {
background: red;
color: #fff;
font-size: 27px;
font-family: 'PT Sans', sans-serif;
}
body {
margin: 5px;
line-height: 1;
overflow:hidden;
}
html {
overflow:auto;
}
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<span>
blah_blah ÂÄ j p
</span>
You can clearly see that we have a different overflow everytime we use a different font which confirms that this is font related. We have no control over it unless we know how the font is designed.
Related questions:
Understanding CSS2.1 specification regarding height on inline-level boxes
Why is there space between line boxes, not due to half leading?
Line height issue with inline-block elements
Here is a good article to get more accurate details and calculation: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
A quote from this article:
It becomes obvious that setting line-height: 1 is a bad practice. I remind you that unitless values are font-size relative, not content-area relative, and dealing with a virtual-area smaller than the content-area is the origin of many of our problems.
1 : I considered a simplified explanation but in reality the calculation of the line box is not only relate to the line-height property.
The default line-height (depending on the font-family) when not otherwise specified is about 1.2 in most browsers. This includes Firefox.
This would explain why the underscore did not show in FireFox when the line-height was set to 1 - the bottom was of the line was cut off. So I don't think it's entirely to do with the font (although this does contribute), but also browser defaults.
Some font-sizes are bigger than other even at seemingly the "same" font size (as I'm sure you've seen when typing documents in e.g. Georgia vs Times new Roman/Baskerville ; so you wouldn't be guaranteed that text would always show on a specified line height of 1 (or 1.2). There are ways of measuring a font in pixels however
Hope this helps
If I use the browser tools in Firefox to inspect my snippet below, there is no height difference between the lines with and without underscore. The only difference is caused by the line-height setting: 16px with line-height: 1, 19.2 px with the browser's default line-height. So the underscore doesn't make a difference here (Firefox 66.0.3 on Mac), and it is visible in both cases.
Note that I set margins to 0 to see the "pure" line-height without distances between the lines. Also, I didn't specify a font-familiy setting, so the default font of the browser for p tags is used.
The only reason for what you describe which I can think of is a font with very particular dimensions/settings, where the descenders (i.e. the parts of letters like p q j which extend below the baseline) are not inside the line-height as defined by the font.
After a bunch of comments back and forth: I suppose it could be caused by the different default (system) fonts on Windows and Mac. Still a bug, I would say (if you are using the default font).
html,
body {
margin: 0;
padding: 0;
}
p {
background: #fb6;
margin: 0px;
}
<p style="line-height: 1;overflow: hidden;">blah_plah</p>
<p style="line-height: 1;overflow: hidden;">blah plah</p>
<p>blah_plah</p>
<p>blah plah</p>
This is my problem in short: https://jsfiddle.net/b6wLwkfs/
Long story: I have a div with some text in it. It initially creates some space on top and bottom of my div (this is not padding). I would like my div to only cover the text and not create extra space. This is my only css:
div {
background-color: black;
color: white;
font-size: 50px
}
<div>This is the text</div>
What I am looking for is to narrow down the div to only contains the text without creating any space on top of bottom. I acknowledge that if you tweaking a bit with px, you will achieve that but I am looking for more generic approach since font size will be different by cases.
Your code below is missing a (;) after font-size: 50px; now to achieve the space reduction I suggest you use line-height with the same font-size refer to my correction
Your Code
div {
background-color: black;
color: white;
font-size: 50px
}
My Correction
div {
background-color: black;
color: white;
font-size: 50px;
line-height: 50px;
}
There is likely no 'generic' way to do this, as that spacing you're seeing is actually part of the font face, and whatever adjustments you make to solve the 'problem' for this font, will not necessarily work on other fonts.
For example, just take a look at how Arial displays, as it's different than the default font that is used without setting a specific font-family, and as such a fix for the default font would likely have to be adjusted for Arial.
p {
background-color: black;
color: white;
font-size: 50px;
line-height: 1;
font-family: arial;
display: inline;
}
<p>
Oh hi i'm different
</p>
In the above snippet I've added a line-height of 1 to help normalize the spacing a bit. You could try to adjust further with setting the line-height to be at, or close to the exact font-size in pixels, but this will likely result in undesired spacing if you have lots of text in the element (text should also be in an appropriately semantic element like a p, or li, not just in a div).
In the end, can you achieve the result you're looking for? Definitely. Using things like line-height, margins and/or transforms. But you are likely not going to find a silver bullet to achieve the effect you want, consistently, if swapping out font faces.
As Sebastian Brosch mentioned in the question's comments, working off from Is it possible to change inline text height, not just the line-height? is likely going to be your best path forward.
Say I have a single span element defined as an inline-block. It's only contents is plain text. When the font size is very large, you can clearly see how the browser adds a little padding above and below the text.
HTML:
CSS:
span {
display: inline-block;
font-size: 50px;
background-color: green;
}
<span>BIG TEXT</span>
Looking at the box model, it's clear the browser is adding padding inside the content edge. I need to remove this "padding", one way is to simply alter the line-height, as with:
http://jsfiddle.net/7vNpJ/1/
This works great in Chrome but in Firefox the text is shifting towards the top (FF17, Chrome 23, Mac OSX).
Any idea of a cross-browser solution? Thanks!
It appears as though you need to explicitly set a font, and change the line-height and height as needed. Assuming 'Times New Roman' is your browser's default font:
span {
display: inline-block;
font-size: 50px;
background-color: green;
/*new:*/
font-family: 'Times New Roman';
line-height: 34px;
height: 35px;
}
<span>
BIG TEXT
</span>
The browser is not adding any padding. Instead, letters (even uppercase letters) are generally considerably smaller in the vertical direction than the height of the font, not to mention the line height, which is typically by default about 1.2 times the font height (font size).
There is no general solution to this because fonts are different. Even for fixed font size, the height of a letter varies by font. And uppercase letters need not have the same height in a font.
Practical solutions can be found by experimentation, but they are unavoidably font-dependent. You will need to set the line height essentially smaller than the font size. The following seems to yield the desired result in different browsers on Windows, for the Arial font:
span.foo
{
display: inline-block;
font-size: 50px;
background-color: green;
line-height: 0.75em;
font-family: Arial;
}
span.bar
{
position: relative;
bottom: -0.02em;
}
<span class=foo><span class=bar>BIG TEXT</span></span>
The nested span elements are used to displace the text vertically. Otherwise, the text sits on the baseline, and under the baseline, there is room reserved for descenders (as in letters j and y).
If you look closely (with zooming), you will notice that there is very small space above and below most letters here. I have set things so that the letter “G” fits in. It extends vertically a bit farther than other uppercase letters because that way the letters look similar in height. There are similar issues with other letters, like “O”. And you need to tune the settings if you’ll need the letter “Q” since it has a descender that extends a bit below the baseline (in Arial). And of course, if you’ll ever need “É”, or almost any diacritic mark, you’re in trouble.
I'm a designer and our devs had this issue when dealing with Android initially, and our web devs are having the same problem. We found that the spacing between a line of text and another object (either a component like a button, or a separate line of text) that a design program spits out is incorrect. This is because the design program isn't accounting for diacritics when it is defining the "size" of a single line of text.
We ended up adding Êg to every line of text and manually creating spacers (little blue rectangles) that act as the "measurement" from the actual top of the text (ie, the top of the accent mark on the E) or from the descender (the bottom of a "g").
For example, say you have a really boring top navigation that is just a rectangle, and a headline beneath it. The design program will say that the space between the bottom of the top nav and the top of the headline textbox 24px. However, when you measure from the bottom of the nav to the top of an Ê accent mark, the spacing is actually 20px.
While I realize that this isn't a code solution, it should help explain the discrepancies between the design specs and what the build looks like.
span::before,
span::after {
content: '';
display: block;
height: 0;
width: 0;
}
span::before{
margin-top:-6px;
}
span::after{
margin-bottom:-8px;
}
Find out the margin-top and margin-bottom negative margins with this tool:
http://text-crop.eightshapes.com/
The tool also gives you SCSS, LESS and Stylus examples.
You can read more about it here:
https://medium.com/eightshapes-llc/cropping-away-negative-impacts-of-line-height-84d744e016ce
I had a similar problem. As you increase the line-height the space above the text increases. It's not padding but it will affect the vertical space between content. I found that adding a negative top margin seemed to do the trick. It had to be done for all of the different instances of line-height and it varies with font-family too.
Maybe this is something which designers need to be more aware of when passing design requirements (?)
So for a particular instance of font-family and line-height:
h1 {
font-family: 'Garamond Premier Pro Regular';
font-size: 24px;
color: #001230;
line-height: 29px;
margin-top: -5px; /* CORRECTION FOR LINE-HEIGHT */
}
This worked for me:
line-height: 80%;
If its text that has to scale proportionally to the screenwidth, you can also use the font as an svg, you can just export it from something like illustrator.
I had to do this in my case, because I wanted to align the top of left and right border with the font's top |TEXT| . Using line-height, the text will jump up and down when scaling the window.
The best way is to use display:
inline-block;
and
overflow: hidden;
I've been annoyed by this problem often. Vertical-align would only work on bottom and center, but never top! :-(
It seems I may have stumbled on a solution that works for both table elements and free paragraph elements. I hope we are at least talking similar problem here.
CSS:
p {
font-family: "Times New Roman", Times, serif;
font-size: 15px;
background: #FFFFFF;
margin: 0
margin-top: 3px;
margin-bottom: 10px;
}
For me, the margin settings sorted it out no matter where I put my "p>.../p>" code.
Hope this helps...
When I have two line of text with different font-size, they overlap.
Look at this example :
http://jsfiddle.net/3WcMG/1/
All the 'j' and 'g' are hiding the to of the second line. It does that with all main fonts.
Why Does it acts like that? What can I do to avoid that?
EDIT: I know what's 'em' means, I know how to use the margins, I know how to increase the line height, I know what is the effect of the reset css of JSFiddle and that is not my question. My question is: Why the bottom of the 'j' is out of the box of the text? It looks like if I put negative margin-top on the second line (except that I haven't, it looks like that by default).
Is there a way to make the font fit in the box.
EDIT2: It seems that it is a browser issue! I am on chrome 21.0 on Mac and I see that :
1em is equal to 1 times the number of pixels in a font size. So if your font-size is 60px, 1em = 60px. If it is 14px, 1em = 14px, and so on. Setting the line-height to 1em makes it equal to 1 times the number of pixels.
There may be some confusion because the default line-height set by the user agent stylesheet is usually somewhere around 1.5em, so a 12px font-size would result in an 18px line-height.
em unit
Equal to the computed value of the ‘font-size’ property of the
element on which it is used
Source: http://www.w3.org/TR/css3-values/#font-relative-lengths
See also: http://www.w3.org/TR/CSS21/syndata.html#length-units
Based on this, your original example is exactly what I would expect to see. For reference, here is what I see in Chrome:
Your first line is 60px tall, but the computed value (W3's term) of the second is 14px (dictated by the class applied to it). Both have a line-height of 1em. Thus, the line-heights are 60px and 14px respectively. Since that is the same as the font sizes, the two lines touch (this can vary from font to font).
If you are seeing overlapping behavior, that's a different problem.
To change the behavior, you can use a different line-height, padding, margin, etc. As a side note, rem units may be more intuitive though support is lacking in older browsers.
For an overview of CSS units, see: http://css-tricks.com/css-font-size/
Fonts not aligned with edges of box
Updated Question/Problem
With regards to the updated question, see: http://www.w3.org/TR/css3-fonts/#propdef-font-size which states that:
Note that certain glyphs may bleed outside their EM box.
This happened in varying degrees with different fonts that I tried (some bleed both X/Y, some in one direction, some not at all).
I'm not sure there is any way to change this behavior, especially since each browser may use a different algorithm for anti aliasing which can slightly alter the edge of the character.
I think line-box-contain: glyph may be relevant, but I only see it mentioned in an editor's draft and I'm sure browser support is absent/inconsistent.
http://dev.w3.org/csswg/css3-linebox/#line-box-contain
Increase the line height in your CSS
line-height: 2em; (From 1 to 2em)
Which is in the p element.
You can give your "test" class line-height or margin-top whatever you feel comfortable with.
.test{
font-size: 14px;
line-height:18px;
}
The default line height is relative size, 150% of the font size in a p for example. If you change line height using em or %, the browsers will interpret that as "em/% compared to the font size."
http://jsfiddle.net/P7LaP/
<div class="small">
<p>Normal pq</p><br/>
<p class="short">Short pq</p><br/>
<p class="tall">Tall pq</p><br/>
</div>
<div class="normal">
<p>Normal pq</p><br/>
<p class="short">Short pq</p><br/>
<p class="tall">Tall pq</p><br/>
</div>
<div class="large">
<p>Normal pq</p><br/>
<p class="short">Short pq</p><br/>
<p class="tall">Tall pq</p><br/>
</div>
The example has three sets of three p tags with normal height, short, and tall. While the three sets are the font size.
p {
color: ffffff;
background: #777777;
}
.short { line-height: 1em; }
.tall { line-height: 2em; }
.small { font-size: 8px; }
.normal { font-size: 16px; }
.large { font-size: 32px; }
I hope this helps. I'm not sure exactly what you're trying to do, but it looks like you should just delete the line-height line from your stylesheet.
How to automatically change the space between the letters.I want the text to take up the entire width of the div. Text is not static. (Always changing text, can be 123" or "text text"...)
<style type="text/css">
#menu{
width: 200px;
background-color: #000;
color: #336699;
font-size: 16px;
letter-spacing: 100%;
}
</style>
<body>
<div id="menu">
tekstas
</div>
EDIT: Unfortunately this only changes word spacing, not letter spacing. There is not way to do kerning in CSS. Possibly CSS3, however.
This is easily accomplished with the text-align: justify CSS attribute:
#menu
{
width: 200px;
background-color: #000;
color: #336699;
font-size: 16px;
text-align: justify;
}
There is no way of doing this purely with CSS. The letter-spacing attribute doesn't take percent values. text-align: justify won't work either because it only affects the space between words, not the font kerning and it also only applies to those rows of text that are followed by another row.
You could try using JS to do this by counting the number of characters in a particular div and then calculate the needed space between the characters so it would fill out the width, but this solution would only work right with mono-spaced fonts (fonts that have the same width for all the characters).
Here's a solution will not work for everyone, but it turned out to solve the problem for me: if you are displaying a short amount of headline text, you can put a space between every character of every word "L i k e t h i s".
For my particular design, this happens to look fine, and of course it allows align: justify to fully do its magic within the div.