How to get even spacing around different fonts? - css

Different fonts sit differently within these boxes:
I'm trying to find a way to make the padding "around" the text the same no matter what font is chosen. So the space between the bottom of the y and the border should be the same as the top of the T and the border.
(I hope that makes sense?)
I can manually adjust line heights/paddings to make each font sit nicely in the middle of the box, but it would be nice if there was some automatic way to do this.
jsfiddle for that screenshot: http://jsfiddle.net/dtbaker/4qkv2ncL/2/
html:
<div id="bg">
<div class="text">
<span>Asdgh YiyjJT</span>
</div>
<div class="text">
<span class="font1">Asdgh YiyjJT</span>
</div>
<div class="text">
<span class="font2">Asdgh YiyjJT</span>
</div>
<div class="text">
<span class="font3">Asdgh YiyjJT</span>
</div>
</div>
css:
#import url('https://fonts.googleapis.com/css?family=Special+Elite:400,700,400italic,700italic|Lora:400,700,400italic,700italic|Lobster:400,700,400italic,700italic');
#bg{ background-color: #000; padding:20px; }
.text{
padding:20px;
}
.text span{
color:#CCC;
background:#FFF;
font-size:60px;
font-weight:bold;
line-height:1em;
padding:2px;
}
.text span.font1{
font-family:"Special Elite";
}
.text span.font2{
font-family:"Lora";
}
.text span.font3{
font-family:"Lobster";
}

It’s not possible, because the phenomenon depends on the design of the font. CSS has no access to font metrics. The way in which glyphs use the vertical space defined by the height of the font (and possibly extend beyond that space) is decided by the font designer. There is no single quantity that describes it.
The only quantity related to font metrics that is even theoretically available is the x height, via the em unit and via the font-size-adjust property. The latter has very limited and buggy support. Besides, the x height is just the height of letter x and similar lowercase letters with no ascenders and descenders, so it would not help to get at the total heights of glyphs.

Related

Reset the rem or font-size only for all the elements inside a particular div

I've a typical HTML structure as shown in the code below.
<div class="common-parent">
<div class="parent>
<div class="child">
<h2>Child 1</h2>
<span>Some text here...</span>
</div>
<div class="new-child">
<h2>New Child</h2>
<div>
<span>Some text here...</span>
</div>
</div>
</div>
</div>
Now, I need to change the font-size or the rem size of all the elements inside the div.parent including itself.
Since the default rem size is equal to 16px, I need to reduce it to 12px that is 75%. I can't change it on 'html' tag as it will affect all the other elements as well.
How do I change it only for 'div.parent' and all the elements inside that using SCSS or CSS?
The CSS length unit 'rem' means 'Root EM' and it always depends on the root element <HTML>. So if you want a font size depending on a particular parent element's font-size settings, you may use other units like em or percentage.
If you can live with a solution that works on all browsers except Firefox, use this:
.parent {
zoom: 0.75;
}
For Firefox, use quirks like:
.parent {
transform: scale(0.75);
transform-origin: top left;
width: 133.33%;
}
Just use a pixel measurement to "reset" the base font-size:
.common-parent div.parent{
font-size: 12px;
}
Then, each element contained in .common-parent div.parent will read 1em as 12px.
Note: Normally you shouldn't mix pixel units with ems, but for resetting base font-sizes, it's a justified solution.

Random space to the left of header tag

I have an h3 tag which hold text inside of it that doesn't align correctly with the content below it. It can't be margin or padding because it is the h3 itself which contains the extra space to the left of it. I have use position relative to align it with the content below it ,but I want to understand what the problem is.Thanks in advance!
HTML:
<div class="details_section">
<h3>Details</h3>
<p class="bold">Name:</p>
<p>Kaleb Meeks</p>
<p class="bold">Age:</p>
<p>19</p>
<p class="bold">Location:</p>
<p>Mississippi,United States</p>
</div>
CSS:
.details_section {
width:100%;
height: 100%;
padding-left:5%;
margin-top:7%;
}
.details_section h3 {
font-size:28px;
color:#005689;
font-weight:normal;
}
.details_section p {
display:block;
font-size:14px;
color:#000;
}
It's just the font that determines that. Change the font to Times New Roman and the margin is gone. Change the D into a T and there is no spacing anymore. In a font, each letter has some kind of bounding box and some letters have a bigger bounding box than the letter itself.
If you want to remove it, (I would definitely not recommend that, since it is made like this because of the good lookings), you can do it by applying a negative margin-left to the tag. But keep in mind that this can change from device to device and especially between various starting letters. So just don't do it ;-)
See the work around in action here: http://jsbin.com/jexijonuru/edit?html,css,output
Including a reason why it is not a good idea.
You could nudge this with position:relative; right:2px; but that needs to work with whatever else your doing.

Make a row of Font Awesome Icons height identical

I'm building a website and I want to visually have a row of font awesome icons appear to have the same height. This also means I want them to all sit on the same baseline.
Due to the nature of the icons being different shapes with varying aspect ratios, when you place font awesome icons with the same font-size or fa-2x (etc) on the same line, their heights and baselines do not line up horizontally. In fact, I've noticed there doesn't seem to be much of a default for how the icons sit vertically in a row beside each other. Some sit above the baseline at random heights. Also at the same fa-size or font-size, the icons can visually appear to be dramatically different in size. For example the mobile-phone icon vs microphone.
The odd thing about the mobile-phone icon is how it floats above the baseline because it seems to have a built in padding that I can't seem to find a way to override. Using vertical-align:baseline etc does not help.
Here's the HTML:
<div class="some-class">
<i class="fa fa-microphone"></i><i class="fa fa-mobile-phone"></i>
<h3>TEXT</h3>
</div>
<div class="some-class">
<i class="fa fa-automobile"></i><i class="fa fa-cubes"></i>
<h3>DIFFERENT TEXT</h3>
</div>
The CSS:
.some-class {
float: left;
height: 160px;
padding: 15px;
text-align: center;
}
Anyone know of a proper way to align my font awesome icons with CSS so they appear visually to be exactly the same height when placed side by side?
Some of the glyphs size and centers are different by design from the majority (https://github.com/FortAwesome/Font-Awesome/issues/928) as you have found yourself. it might be worth to request reconsideration to the FA team.
I could align the icons in your layout though by using some css adjustments to compensate specifically for the "fa-mobile-phone". I added "fa-2x" to all icons and additionally the following css the the "fa-mobile-phone":
font-size: 42px;
top: 4px;
position: relative;
After that all the icons seem aligned vertically and all seem to have the same height. You might want to do similar adjustments in your layout.

CSS: automatically sizing a image based on its dimensions, and having similar div fill the gap

I have a question pertaining to CSS and HTML. I currently am building an article template, and am a little stumped on one aspect.
I plan to have a picture on one side, and have a text box of the same height on the opposite side. Both are surrounded with div tags as seen in the source following.
<!--begin article-->
<div id="article">
<div id="article_header">
Title goes here
</div>
<div id="article_body">
<!-- begin text. used for actual text of article-->
<div id="text">
Text Goes here
</div>
<!-- end text-->
<!-- begin article media. used for pictures -->
<div id="article_media">
<img src="source_goes_here" alt="This is an image!">
</div>
</div>
</div>
And the CSS...
#article{
border:1px solid gold;
margin-bottom:20px;
}
#article_header{
padding:5px;
font-family:arial;
font-size:36px;
font-style:bold;
color:white;
background:url('orangegradiant.png');
}
#article_body{
padding:5px;
display:inline-block;
width:auto;
}
#article_media{
border: 1px solid pink;
text-align:center;
display:block;
width:48%;
height:48%;
}
#text{
display:block;
width:51%;
float:right;
}
I know I probably over div at times, but I have been toying with this for about an hour and have hit a brick wall. I have the layout set, or so it would seem, by using the float property. The question is how do I get the image div to dynamically change, and have the text div go up or down in size based on the size of the image? Is there a way to set a ceiling for the image size? I would like to see the image be no bigger than about 50% of the div, that way massive images don't skew everything out of proportion.
Any help is greatly appreciated!
P.S. apologies for any code formatting issues. I am still trying to get everything figured out on that front.
Add to your CSS
#article_media img { max-height:50%; }
Or if you want the containing div itself
#article_media { max-height:50%; }

Specifying exact percentage widths in relation to parent DIV in CSS

I am attempting to create a visual element using DIV elements and CSS which should display data in the format demonstrated below.
[-----50%-----|--25%--|--25%--]
When using the code and CSS I've specified below, my final element always spills onto the next line and the CSS percentage values I'm specifying don't seem to create the layout properly.
Could anybody suggest a better way to do this?
My HTML
<div class="visual-indicator-title">
All Items</div>
<div class="visual-indicator-holder">
<div class="vi-internal-element" style="width: 25%; background-color: #5E9BD1;">
25%</div>
<div class="vi-internal-element" style="width: 25%; background-color: #AB884D;">
25%</div>
<div class="vi-internal-element" style="width: 50%;">
50%</div>
</div>
<div class="visual-legend">
<ul class="inline-block">
<li>
<div class="legend-blue">
</div>
Sales</li>
<li><span class="legend-tan"></span>Processed</li>
<li><span class="legend-grey"></span>Pending Processing</li>
</ul>
My CSS
.visual-indicator-title{
font-size:12px;
font-weight:bold;
color:#777777;
}
.visual-indicator-holder
{
width:100%;
background-color:#666666;
height:28px;
border-radius: 8px;
}
.visual-indicator-holder .vi-internal-element
{
font-size:11px;
text-align:center;
color:#ffffff;
background-color:#777777;
border-radius: 6px;
display:inline-block;
}
The reason this happens is that with inline or inline-block, white space in the element will affect the rendering (adds space). Here is your demo working with white space removed, no changes to the CSS: http://jsfiddle.net/fZXnU/
Removing white space is not trivial though, so you'd be better off floating the elements (which triggers display:block). Working demo with plenty of white space: http://jsfiddle.net/fZXnU/1/
You can use float: left, position: relative, and then define width in percentage as you are.
I modified your code to use float here: http://jsfiddle.net/Z3kdP/.
If you remove the white-space between the divs then it works as intended.
http://jsfiddle.net/TeJuU/
EDIT: See this question: How to remove the space between inline-block elements?
You can make font-size: 0 on the parent element if you don't want to edit your html.
http://jsfiddle.net/TeJuU/1/
All of those elements have margin and padding with them as well as the percentages creating rounding errors during calculation. So you need to make sure you set, or take into consideration, what margin is doing to this. For rounding errors, it's typical to let the percentages add up to something less than 100% but then add margin: auto to center the whole thing.

Resources