I am writing a web to print application, and trying to understand how the browser is rendering text within a paragraph. The link below was very valuable in understanding the relationship between line-height, font metrics and vertical-align:
https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
However, as my codepen below demonstrates, the browser renders the overall height of paragraphs differently when its text nodes inherit from one font-family (Allura in this example), but are styled inline with another (Pt Serif in this example), as opposed to the paragraph itself simply having a font-family of "PT Serif".
https://codepen.io/itozer/pen/LzOoxp
<style>
p {
text-align: center;
width: 500px;
font-size: 50px;
line-height: 1.4em;
}
</style>
<p id="paragraph1" style="position: absolute; top: 0; left: 0; font-family: PT Serif;">
The lamp once out<br>
Cool stars enter<br>
The window frame.
</p>
<p id="paragraph2" style="position: absolute; top: 0; left: 550px; font-family: Allura;">
<span style="font-family: PT Serif;">
The lamp once out<br>
Cool stars enter<br>
The window frame.
</span>
</p>
(Note: I know that changing the vertical-align of the span of paragraph2 to top will render the paragraphs the same, but this ultimately does not solve my problem)
Can someone provide information about why the overall height of paragraph2 in the codepen above is greater than the overall height of paragraph1?
Related
text (instagram and shop) moves downwards into black area as you can see in the following pictures
https://imgur.com/a/zevB8Op
heres the code:
HTML
<div id="rightBlock">
<a target="_blank" href="http://instagram.com/pierrebassene.world" style="text-decoration: none; color: black; font-weight: bold; font-family: Helvetica ;font-size: 2vw ;">INSTAGRAM</a>
</div>
<div id="mid">
<a style="font-family: Helvetica ; font-weight: bold; font-size: 2vw;">SIGN UP </a>
</div>
CSS
#rightBlock {
position: fixed;
top: 90%;
left: 45.2%;
bottom: 0;
right: 0;
z-index: 1;
}
#mid{
position: fixed;
top: 82%;
left: 47%;
bottom: 0;
right: 0;
z-index: 1;
}
I've already tried several methods including absolute and fixed positioning but nothing seems to be working :/
The cause is almost certainly due to the use of percentage values in the 'top' property (can't confirm without more contextual code). Try instead to re-write/re-structure your code so that you are not using percentage values which will change relative to the devices screen size.
You could try switching to pixel values. EG:
margin-top: 200px; //replace with desired px value
Also, it is a good habit to enforce the 'separations of concerns' concept with your code.
HTML is the markup language which describes the structure and contains the actual contents of the page. CSS is used for styling the pages content.
I recommend you move all the style attributes into your CSS. This keeps your HTML clean and easier to read/maintain for the future, whilst also making it clear where to modify style changes as all the styles are defined in one place (the CSS stylesheet - and not the CSS stylesheet and/or the HTML style attributes).
I'm building a very simple site using HTML and CSS. It consists of a headline, a paragraph of text, and an image.
When I view the site on Chrome, the placement of all three objects works perfectly. But in Firefox and Safari, they're scrambled. When I then optimize for one of those two, the Chrome version looks off. Etc.
Here's the CSS:
img {
position: fixed;
bottom: 280px;
right: 800px;
}
and the HTML:
<img src="bob.jpg" height="50%" width="20%">
Is there a relatively simple way to fix this? Can I specify the positioning depending on the browser -- something like so?
img {
position: fixed;
/* Chrome
bottom: 350px;
right: 925px;
/* Firefox
bottom: 200px;
right: 800px;
}
etc.
And a second question: What property can I assign the image so that text always wraps around the image, rather than rendering in front of or behind it?
Thank you!
If you want the image to be centered and aligned with the page's content, there is no need to add any additional CSS since you have text-align: center added to the body.
The image will be centered since it is an inline element. Also, your code has many issues, consider a simplified version:
body {
background-color: white;
text-align: center;
font-family: "Courier New", Courier, monospace;
}
p {
text-align: left;
font-size: 12px;
max-width: 50%;
margin: 0 auto;
}
hr {
width: 50%;
margin: 3em auto;
}
<div class="marquee">
<h3>THE X-FILES EPISODE GENERATOR</h3>
<hr>
<p>Make your own episode!</p>
<p>The X-Files generator mixes people, places and plots from different episodes to create new adventures.</p>
<hr>
<div class="wrap">
<button onclick="sentenceLoad()">Generate</button>
</div>
<div class="container">
<h5></h5>
</div>
<img src="https://bobbyfestgenerator.github.io/X.jpg" alt="">
</div>
Use CSS margin instead of repetitive <br> tags
No need to redefine the font since it is inherited from body
Add CSS rules to external file instead of inline (for <hr> for example)
Use margin: 0 auto to center block-level elements like <p>
jsFiddle: https://jsfiddle.net/azizn/d1xmv65m/
I have a heading (<h1>) that has a sort of tagline below it. (I used a <small> tag and set font-size to a certain percent so it lines up perfectly when I change font-size of the heading for smaller screens. I'm using em units, if that matters.)
At first, the <small> tag sat nicely underneath the main heading, but I realized I forgot the HTML5 DOCTYPE declaration. So, after I discovered this omission and corrected it, the spacing was all wrong.
Here's my code:
HTML:
<h1 class="banner">Justin Wilson<br /><small>WEB + GRAPHIC DESIGNER</small></h1>
CSS:
h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd; }
h1.banner > small {
font-family: Helvetica, Arial, sans-serif;
font-size: 27%;
color: #888;
letter-spacing: 1px;
font-weight: 100; }
And here's the before and after:
I have searched through StackOverflow, but I'm not sure how to proceed. I've read that a <br /> tag simply line breaks, but it inherits the line-spacing, and line-spacing: (value) does not work, nor do margins or padding.
What I need is a simple, cross-browser solution. I used Chrome for the screenshot. Support for IE6-7 is not needed, though support for IE8 would be nice.
The problem is caused by the default line height for the heading element. The default depends on the browser and on the font, but it tends to be about 1.1 to 1.3 times the font size. In any case, with a very large font size set, this creates a problem, because the line height value also sets the height of the second line. By CSS specifications, for a block element, line-height sets the minimum height of line boxes.
There are various ways around this. Setting display: block on the small element is one way, since then its default line height will be determined according to its own font size. Another way is to set a line height that is considerably smaller than the font size, e.g.
h1.banner { line-height: 0.5; }
You need to control the line-height css property (see W3 Schools) to make sure all browsers set the same height for each line.
It's actually advisable to do this to pretty much all elements containing text, which is why most people use CSS resets for production, which sets a default line-height across all elements.
In this case, the <span> and <h1> will likely have different line heights.
I'm sure the <br /> tag is doing nothing wrong, unless you've altered its properties with CSS which I would not advise.
There's also a shorthand version in case you're setting other font properties for the same element(s):
font: <font weight> <font size>/<line height> <font face>;
For example:
font: bold 12px/18px sans-serif;
Hope this helps.
Drop the <br /> and set the display of the <small> element to block.
http://cssdeck.com/labs/uoqfo4xw
<h1 class="banner">Justin Wilson <small>WEB + GRAPHIC DESIGNER</small></h1>
h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd; }
h1.banner > small {
font-family: Helvetica, Arial, sans-serif;
font-size: 27%;
color: #888;
letter-spacing: 1px;
font-weight: 100;
display: block; }
An alternative is to set the span to display: block; and then adjust the line-height of the <h2> tag.
I would do this, instead of using a <br /> tag.
Ultimately the answer that works as the best solution is found here (3rd example):
http://www.w3.org/html/wg/drafts/html/master/common-idioms.html#sub-head
#cimmanon posted a very helpful solution, but to be safe, I'll stick with what Steve Faulkner said about this being a more semantic and SEO-friendly solution over using an <h1> tag and <h2> tag for a subheading, or inline elements inside a heading tag, regardless of styling.
Here's the solution:
HTML:
<header>
<h1 class="banner">Justin Wilson</h1>
<p>WEB + GRAPHIC DESIGNER</p>
</header>
CSS:
h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd;
font-weight: normal;
margin: 1em 0 0 0;/*purely for display purposes, really*/ }
header > p {font-family: Helvetica, sans-serif;
font-size: 1.75em;
color: #888;
letter-spacing: 1px;
font-weight: 100;
text-align: center;
margin:0; }
And the live demo (might not look good to you without the free Arvil font, from Lost Fonts).
http://cssdeck.com/labs/xysgkffs
Thanks for all the answers thus far.
UPDATED....
Change <small> to <p> in HTML and CSS and add line to the h1.banner > p
margin: 0 auto;
FIDDLE
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.
<font color="#FFFFFF">
<span style="float: left; position: relative; top: 25px; left:100px">
text here<br>and more text here....
</span>
</font>
Perhaps there's a more imperative style associated with that element somewhere else in the cascade? Load that sucker up in Chrome and inspect the element via Web Developer extension - it will show the computed style on that element, and any overridden styles.
EDIT:
In response to comments:
<p style="line-height:1.2em;">Your text here</p>
That should do it, or adjust the 1.2em upward by small amounts. Remember though, this will only apply the line height style to that specific <p> tag. If you can /need to / want to be consistent, apply that style="line-height:1.2em;" to the paragraph's containing element, like:
<div style="line-height:1.2em;">
<p>Paragraph 1 will have the same line-height as</p>
<p>Paragraph 2.</p>
</div>
This is not true usage. I think the true usage is;
<span><font></font></span>
But you should try this;
<style>
.class1{
height: 100px;
width: 250px;
background-color: #000;
color: #fff;
font: normal 12px Verdana;
line-height: 100px;
}
</style>
<div class="class1">your text message is here...</div>
you can use another way for line-height in font property;
font: normal 12px/100px Verdana;