I was under the impression that line height would be slightly larger than font-size(about 20%). What I am seeing instead is that I have to set line height below that of font size to get a reasonable line height.
I need to set line-height manually for layout purposes. What am I doing wrong?
Here's jsfiddle showing huge line-height when font-size and line-height are the same.
In case fiddle goes down:
HTML:
<h2>Contact Me</h2>
<p>You can Contact Me at sample#smaple.com or use the contact form below:</p>
CSS:
h2 {
font-size:2em;
line-height:2em;
float: left;
background-color:red;
}
p {
background-color:yellow;
font-size:2em;
line-height:2em;
}
Related
I have a form, ending with an "I agree to these terms and conditions line" with a checkbox.
The code that I have for the checkbox is currently:
Although all is functioning well, the width of the checkbox element is too much. This causes a very wide space between the "I agree..." statement, and the actual checkbox. Any tips on how I can left align the checkbox, or reduce the width of the checkbox's element.enter image description here
Standard checkboxes in Rails could be changed with CSS in the following way:
input[type="checkbox"]
width: 10px //or however wide you desire
height: 10px
Although you should be detailed with your selector in case your checkbox is wrapped in some div with an ID, in which case the above will look slightly different:
#div input[type="checkbox"]
width: 10px //or however wide you desire
height: 10px
I created Solid Gauge chart using Highchart.
but when screen resolution changed chart is still displayed with original size.
i need responsive Solid Gauge chart.
Demo Link
The solid gauge chart handles size changes quite well by itself. I've updated the demo JFiddle to show how the gauge can handle resizing.
The main idea here is that when the window is resized, the width of the div is changed by CSS:
<div id="container-speed" style="width: 50%; float: left"></div>
And the height of the div is changed by JS:
function setDivHeight() {
var div = $('#container-speed');
div.height(div.width() * 0.75);
div = $('#container-rpm');
div.height(div.width() * 0.75);
}
$(window).on('load resize', function(){
setDivHeight();
});
Note that the ratio between width and height for the gauge seems to be ideal at 4:3, which is why the code multiplies by 0.75 to set the height.
Managing the text elements will be CSS/JS/HTML positioning and resizing of your choice, depending on how many screen sizes you wish to handle.
Following solution manages responsivity in both vertical and horizontal direction. Furthermore, it does not require additional JS to resize the container div.
Check this fiddle:
https://jsfiddle.net/istibekesi/bm3d1zng/
Highchart sets the height of the chart to 400px by default.
So the trick is to set the height of the chart by percentage:
#container-speed {
height: 180%
}
I have a body content in my wicked-pdf report with variable font-size
If i add font-size to paragraph like
p {
font-size: 16px !important;
}
then whole paragraph font-size will become 16px, there may be a word containing 22px font-size also in that paragraph
so i need to increase the font size to their normal font-size values
for example
If the word containg font-size 16px then i should make that to 17px; or if the word containing font-size 22px; then i should increase to 23px; in my pdf report
I mean If my tag contains the value <p style="font-size:16px"> then it should convert to <p style="font-size:17px">
I mean i need to increase or adjust the font-size values little bit more to their normal size values in my pdf report
You can pass in a value for zoom that is equivalent to zooming the page of a web browser:
render :pdf => 'mypdf', :zoom => 1.5
In a document like:
<p class="wrapper">
<span class="ref">
<span class="text">English</span>
</p>
the following rules are applied:
.wrapper {
background:green;
position:relative;
padding-left:20px;
font-family:Times;
}
.text {
line-height:1;
background:blue;
font-size:80px;
}
.ref {
position:absolute;
left:5px;
width:10px;
height:80px;
background:black;
}
In Chrome (Version 22.0.1229.79) or IE9, the background of the span element containing 'English' seems to have a height larger than font-size, yet in Firefox (13.0.1) the height equals font-size. (See the output)
Can anybody explain this?
I thought the height of the content area would have the same value as specified by font-size.
Here's a diagram showing the various reference lines available when rendering text:
As you can see, there are many choices. It seems like Firefox is using a different baseline than Chrome/IE when rendering.
I have a element and it is possible that it is longer than one line, so i have to set a line-height>1 otherwise it looks crappy. But if i do that, the lines are higher than the text, and the text is centered. So it does not match the top. How can i change the position of the text to the top of the line, or is there another way to get some space between two lines?
Line height by definition centers the font-size within the given line height. If you have a 12px font and a 16px line-height, the text will be centered within the 16px, leaving 2px on both the top and the bottom.
One solution to push this text up while maintaining the line height is to add a negative margin to the element and push it up negatively:
float: left;
margin-top: -2px;
Try this:
<style type="text/css">
.spacer
{
line-height:1px;
}
.spacer:after
{
content:".";
visibility:invisible;
line-height:1px;
}
</style>
You can increase the line height in the above CSS code there and use it like this:
your line one
<p class="spacer"></p>
your line two