I am designing a website, with a quote on every page. I am applying CSS to this quote to make it look the best it can and stand out. However I am having a couple of issues.
.quote {
font-size: 18pt;
padding-top: 50px;
padding-bottom: 15px;
text-align: center;
line-height: 0.25;
}
.speech_mark_large {
color: #203D69;
font-size: 120px;
vertical-align: top;
}
<div class="quote">
<span class="speech_mark_large">“</span> Leading the way with innovative design of corrugated Point of Sale displays and packaging offering bespoke design to fulfill your brief.
<span class="speech_mark_large">”</span>
</div>
Also on JSFiddle.
I want the two lines of the quote to be closer together, but when I apply a line height, to solve this, it pushes the speech marks up into the previous line. How do I solve this?
You should set the line-height on the complete .quote element. Next you set vertical-align to top for the inner .speech_mark_large element. By changing the line-height of the .quote element you can tune the line spacing to what you think looks the best.
EDIT: I have added top and position to .speech_mark_large so you can change the vertical position of the quotes.
CSS
.quote {
font-size:18pt;
padding-top:15px;
padding-bottom:15px;
text-align: center;
line-height: 30px;
}
.speech_mark_large {
color:#203D69;
font-size:50pt;
vertical-align: top;
top: 5px;
position: relative;
}
See this updated JSFiddle
try this:
.speech_mark_large {
color:#203D69;
font-size:50pt;
line-height: 35px;
vertical-align:text-top;
}
line height will make them take up less space from the inline text height (which in-turn makes them float over your other text).
The vertical-align will fix this by telling the quotes to align themselves to the text's bottom, rather than normally.
Related
I have been struggling to find answers as to why this does this so I'd figured I'd post it here to see if anyone else knows this happens and if there is an explaination. Or maybe it is just a CSS/HTML bug I am unaware of.
I created the following jsfiddle for an example.
#import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900');
body {
background-color: #20262e;
height: 100%;
margin: 0px;
padding: 0px;
}
.title {
margin-bottom: 0 !important;
padding-right: 100px;
color: #ffffff;
font-size: 50px;
font-family: 'Playfair Display', serif;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
line-height: 1;
position: relative;
display: inline-block;
}
.title::after {
background-color: #f5a800;
width: 80px;
height: 4px;
content: '';
position: absolute;
top: 50%;
right: 0px;
}
<div class="container">
<h1 class="title">
This Is An Awesome Title
</h1>
</div>
Simple effect and works great as long as the H1 is one line. However, once you resize the screen and the H1 breaks to 2 lines, it seems that the behavior of the H1 changes? inline-block->block? If you inspect the H1 in devtools, it goes from having its "space" go from wrapping the text to full width when it breaks and the pseudo element is then pushed way out to the right of the screen instead of the right side of the text like it is when it is on one line.
I am all out of ideas on hacks around this, I've tried floats and flex to no avail.
Open to any suggestions on how to accomplish this, or maybe its a lost cause and I am stuck with changing font sizes and padding using media queries.
Thanks.
EDIT
Here are a few screenshots to further clarify what I am asking:
Text on one line: https://screencast.com/t/W83PxIck
Text when it breaks to two lines: https://screencast.com/t/Lx8xjHkrWx
Nope, that's the expected behavior. It is still inline-block. The right side of the block is the rightmost side of the text, not the right side of the final line.
If you're looking to place it immediately after the final line, you need to use display: inline, not inline-block.
You can view the boxes by using dev tools, which will clearly show you where they begin and end.
I have a piece of code that compares the same line across multiple poems. It works fine, except for when the initial letter of the line appears in the manuscript original as a large capital, like this:
As you can see, when that happens the comparison gets all wonky. As far as I can tell, this is because the W is a span encapsulated inside of a div:
<div class="comparison" id="EETS.QD.1" style="display: block;">
<div class="compare_item" style="margin-left: 25px;">London, British Library Harley 2251:
<a style="text-decoration:none; color:#D5D5E5;" href="Quis_Dabit/British_Library_Harley_2251/British_Library_Harley_2251_f42v.html">
<span class="capital_2_blue">W</span>
ho shal gyve · vnto my hede a welle
</a>
</div>
</div>
with the style attributes generated via javascript because the comparison is generated onClick. The CSS I use to style both the divs and the span is as follows:
div.comparison {
display: block;
height: auto;
width: 755px;
margin-right: 10px;
padding-left: 10px;
margin-left: auto;
background-color: #454595;
border-width: 1px;
font-size: 12pt;
color: #EFFFFF;
display: none;
}
span.capital_2_blue{
float: left;
color: blue;
font-size: 60pt;
line-height: 12pt;
padding-top: 30px;
padding-bottom: 20px;
padding-right: 20px;
}
My question is this: how can I display each of the lines so that any oversized letters appear at the beginning of the actual line of text, as expected? This is what I'm shooting for:
I've been able to achieve it, sort of, by adding display:contents to the styling for my span, but that makes the W extend outside of the generated div on the page:
How would I go about styling these elements to achieve the look I'm hoping for, with the initials staying the height they're displayed in the text proper but not wrapping as they are currently? And how do I make sure the span plays nicely with its surrounding div? Thank you.
You should remove float:left and add display:inline-block to span.capital_2_blue.
That is because floated content removed from normal flow and other content will wrap around it.
https://developer.mozilla.org/en-US/docs/Web/CSS/float
I have an issue while using custom font(poppins-regular.ttf). The issue is when I set background-color for span tag which is wrapper of text.
The words like g,y,.. etc got cut at the bottom. But, If I change the font-family from poppinsRegular to tahoma it looks good.
But the real issue here is i need to maintain same line-height
.passageBody, .passageBody2 {
width: 414px;
padding: 10px 0;
margin: 0px;
font-size: 24px;
line-height: 32px;
font-family: 'Poppins', sans-serif;
}
.passageBody2 {
font-family: tahoma;
}
.highlightPhrase {
background-color: yellow;
}
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<div class="passageBody">
<span>“Good-bye to you and your funny feet.</span>
<span class="highlightPhrase">Thanks for all the eggs to eat!” I was speaking to Bess, our chicken, and Mother laughed.</span>
</div>
<hr/>
<div class="passageBody2">
<span>“Good-bye to you and your funny feet.</span>
<span class="highlightPhrase">Thanks for all the eggs to eat!” I was speaking to Bess, our chicken, and Mother laughed.</span>
</div>
Example jsFiddle link here...
You can either remove the line-height property or try to set it in em units.
line-height: 1.5em;
Edit 1
If you don't want to change line-height, use vertical align with inline display
.highlightPhrase {
background-color: yellow;
display: inline;
vertical-align: text-bottom;
}
Edit 2
The above code might have visually changed the line height. So this example might be an elegant solution to your problem. Just wrap the content in another element and set the position to relative, so that background of each line will not hide the above line.
.highlightPhrase span {
position:relative;
}
or you can use some small image as background and repeat it to highlight entire text.
Problem here is the vertical placement of the glyphs.
Designer decided to set the font glyphs like that.
So, basically designer decided how much space there is below the baseline, and how much space is above the height of uppercase letters. Typically these spaces are equal, but they don't need to be.
I think that only solution for you is to put bigger line-height on the paragraph that is using that font or just choose a different font.
Change:
line-height: 32px; to line-height: auto;
Try this
.highlightPhrase {
padding:5px;
}
This question already has answers here:
Why does this inline-block element have content that is not vertically aligned
(4 answers)
Closed 8 years ago.
Here's a fiddle that shows my code in action
The result seems crazy to me: in Chrome second button is slightly above the first.
In Firefox it is slightly below.
<div id="accounts">
<button class="account">
<h1>VISA Card</h1>
<span class="balance">-433.18</span>
</button>
<button class="account">
<h1 class="plus"><i class="icon icon-plus-sign"></i></h1>
<span class="plus-text">Add Account</span>
</button>
</div>
What is even more confusing is that padding on the h1.plus affects the position of the whole div.
What is going on here? I want two buttons to show up on the same line and simply don't undestand why they aren't. Is this a bug in the rendering engine?
UPDATE:
Narendra suggested an easy fix - float:left the buttons. I want to figure out why this misalignment happening in the first place.
You are using display:inline-block, so the buttons are aligned by their vertical-align property, which defaults to baseline.
This is a diagram from the specs which illustrates exactly that:
You can see in the first two boxes how padding and the font size of the content influence the positioning.
As a fix, use vertical-align: top or bottom, or even middle.
Edit: The image is from the table section and the situation is slighty different for inline-blocks.
Add this to your button.account: vertical-align: middle; .
And you can lose the display: inline-block; property, as it is not needed.
Check below code
button.account {
display: block;
float: left;
height: 80px;
margin: 10px 10px;
padding: 10px 5px;
width: 170px;
}
.account h1 {
font-size: 16px;
height: 16px;
margin: 0 0 5px;
padding: 4px 0 2px;
}
.account .balance {
display: block;
font-size: 24px;
}
.account h1.plus {
font-size: 24px;
padding-top: 0px;
}
Here is the fiddle http://jsfiddle.net/Gq3U8/13/
If you are using inline-block, the main concern is about the whitespace (you will see the default margin around the element). To fix this just add vertical-align:top, instead of using float:left. It will align the element to the top.
.account {
display: inline-block;
vertical-align: top; /*add this one*/
margin: 10px 10px; /*remove this one then can see whitespace*/
}
I've got some words like WORD and REALLYLONGWORD. Both have light font and I want them to become bold on mouse over. Both have float: left; width: auto;. I can't give them fixed width.
The problem is when I hover WORD, the REALLYLONGWORD jumps to the right because WORD gets bolder font (and larger width value). Is there any CSS-only workaround to that?
EDIT (I can't answer my own question, so I'm posting answer below):
I found some CSS-only solution. HTML:
<div class="thtitled-thtitle"><div class="thtitles-title">WORD</div><div class="thtitles-titlebold">WORD</div></div>
<div class="thtitled-thtitle"><div class="thtitles-title">REALLYLONGWORD</div><div class="thtitles-titlebold">REALLYLONGWORD</div></div>
CSS:
.thtitled-thtitle { float: left; }
.thtitles-titlebold { visibility: hidden; color: #F5F5F5; cursor: pointer; float: left; font-family: 'BOLDFONT',Arial,sans-serif; font-size: 72px; line-height: 96px; min-height: 100px; text-transform: uppercase; width: auto; word-wrap: break-word; }
.thtitles-title { color: #F5F5F5; cursor: pointer; font-family: 'LIGHTFONT',Arial,sans-serif; font-size: 72px; line-height: 96px; min-height: 100px; text-transform: uppercase; width: auto; word-wrap: break-word; position: absolute; }
.thtitles-title:hover { font-family: 'BOLDFONT',Arial,sans-serif; }
Basically, I create one more hidden container with BOLD font (its width is main width) and put LIGHT font inside. After hover it still has width of BOLD word so there is no jumping.
You do not want to add any width to fonts at all, I suggest you delete the width property competely. (I also hope you noticed the writing error in your css, with should be width)
The next thing is assign a class to the the ahref this can be easily done with SPAN tags
once done in the css just do:
.firstlinkclass{
font-weight: bold;
}
Use letter spacing. For example {letter-spacing:0.04em}
If you style your WORD with enough letter spacing to make it the same overall width as the same word when it is bold, and remove the letter spacing when it is bold, everything else will stay put.
It works - try this (this just demos the concept - not what I'm recommending for production):
<b>Rotterdam</b><br>
<span style="letter-spacing:0.04em">Rotterdam</span><br/>
<b>and</b><br>
<span style="letter-spacing:0.04em">and</span><br/>
<b>Oslo</b><br>
<span style="letter-spacing:0.04em">Oslo</span><br/>
<b>letter</b><br>
<span style="letter-spacing:0.04em">letter</span><br/>
I know this was asked a long long time ago, but I just came up with a solution to fix the jump that works well so I thought I'd share.
Instead of making the font bold on hover, make it have a text-shadow. No jump, same effect, one line of CSS.