I am trying to draw a text-based GUI in HTML (just for fun) which looks like an old terminal app and I have ran into a problem:
When I have two lines (divs) and I put graphic characters in them like these:
░░░
░░░
I can't align the lines properly (vertically). If I just put terminal characters in my divs like this:
<div class="line">░█║▄▀</div>
<div class="line">░█║▄▀</div>
there is a little spacing between them. (probably height/line-height issue).
If I style them like this:
.line {
height: 1em;
line-height: 1em;
}
they overlap. I tried to fine-tune the values by hand but it seems that height and line-height does not work together well for example with font-size: 40px and line-height: 40px I have to use a height value of 45.5px. What is the problem with my approach? Is there a simple way to align my lines without fine-tuning?
Note that I zeroed all spacings/margins/paddings and I also checked the calculated css in developer tools so it is not an issue with either of these.
My base css is this:
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Code Pro', monospace;
}
I'd add font-family: monospace at least, see fiddle.
But to be honest I'd go with a pre tag and if neccesary spans - and not do line by line div.
I've tested this on the edge browser. I don't know what will happen on other browsers.
Bare in mind that for smaller font sizes (under .5em), some glyphs may become obscured based on monitor resolution, browser, and size.
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Code Pro', monospace;
}
.line {
/* height: 1em; */
/* line-height: 1em; */
font-size: 5em;
}
</style>
</head>
<body>
<div class="line">░█║▄▀</div>
<div class="line">░█║▄▀</div>
</body>
</html>
Related
I have an embedded browser control in my C++ / MFC dialog. It displays an HTML page with some transforms.
Everything renders fine, the transforms work and all that.
However!
For reasons I cant fathom, once every two weeks or so, something happens to the font side. Sometimes its too large, sometimes too small.
I go and change the CSS section of HTML to make the font size larger, it works for a couple weeks, then all of a sudden it gets too large, and I have to change the number back down again. Nothing I do to IE zoom levels, etc seems to have effect on the font size inside my MFC app.
I have a vague suspicion that it has something to do with networks connecting/disconnecting, but can not reproduce the issue.
Why would that happen, and how can I prevent that from happening?
Windows 10, IE 10.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box {
display: inline-block;
border-spacing: 0;
border-collapse: collapse;
padding: 0;
width: 0px;
height: 380px;
transform: rotate(90deg) translate(0%, 0%);
font-family: Arial;
font-size: 37px; /* <-- need to keep changing this */
}
.line1 {
color: white;
width: 1000px;
text-align: center;
transform: translate(-35%, 0);
display: inline-block;
}
</style>
</head>
<body id=CHtmlMirror bgcolor=black>
<div class="box">
<div class="line1">My Text</div>
</div>
</body>
</html>
You can try to reset css or enable compatibility mode in IE10.
OK, found a solution.
I can intercept the OnDocumentComplete method of CDhtmlDialog and ensure the zoom level is always set to some fixed value. Then tweak the CSS to look right for that zoom level, and it will not jump around again
void CMyDialog::OnDocumentComplete(LPDISPATCH pDisp, LPCTSTR szUrl)
{
CComVariant zoomLevel;
zoomLevel = 100;
m_pBrowserApp->ExecWB(OLECMDID_OPTICAL_ZOOM, OLECMDEXECOPT_DODEFAULT, &zoomLevel, NULL);
}
I've taken to using rem's to size fonts in recent projects, then using px as a fallback for older versions of IE.
I've also been setting a font-size of 62.5% on thehtml so I can more easily set font sizes later on in the stylesheet, I then set a font-size of 1.4rem on the body so unstyled elements have a base font-size of at least 14 pixels, see the code below:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
body { background: #fff; font-family: arial; font-size: 1.4rem; line-height: 1.6rem; }
The problem is, Chrome seems to handle this in a strange way ... Chrome seems to set the font sizes correctly on the inital page load, but on subsequent refreshes the font sizes are way bigger than they should be.
SEE FIDDLE (HTML copied below for future reference)
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Page Title</title>
</head>
<body>
<p>This is a test, this font should have font-size of 14px.</p>
<p>This is a test, this font should have font-size of 14px.</p>
<p>This is a test, this font should have font-size of 14px.</p>
</body>
</html>
Remember, you might need to hit run once or twice in Chrome to see said effect.
Does anybody know what is causing this or if there's a way around it? Am I committing a crime by setting a 62.5% font-size on the html element (I realise there are arguements against doing so)?
The easiest solution that I have found is to simply change the body definition to
body {
font-size: 1.4em;
}
Because it is the body, you don't have to worry about compounding – just use rems everywhere else.
Try:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
*{font-size: 1.4rem;line-height: 1.6rem; }
body { background: #fff; font-family: arial; }
Seems to look better on refreshing the page :)
FIDDLE
Yes, this is a known bug in Chrome, which has been linked already.
I found
html { font-size: 100%; }
seems to work for me.
The * selector is very slow, as the author of this bug in Chrome, I'd advise a workaround like this until the bug is fixed:
body > div {
font-size: 1.4rem;
}
Provided you always have a wrapper div anyway ;)
This seems to be a Chrome bug; see Issue 319623: Rendering issue when using % + REMs in CSS, and/or a partly-merged duplicate: Issue 320754: font-size does not inherit if html has a font-size in percentage, and body in rem
The answer of Patrick is right.
We have the same issue on Android 4.4.3 WebView.
Before:
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
After:
html {
font-size: 62.5%;
}
body {
font-size: 1.6em;
}
With em and not rem, it works !
The way I fix this is by setting an absolute font-size in the body-element. For all the other font-sizes I use rem:
html {
font-size: 62.5%;
}
body {
font-size: 14px;
}
.arbitrary-class {
font-size: 1.6rem; /* Renders at 16px */
}
I'm experiencing issue with Pacifico font, which is available in Google Fonts. This issue is happening only in Chrome and Safari, other browsers are okay.
Example:
http://jsfiddle.net/dRcaB/5/
The problem is that the D character is cropped on the left hand side. If I add some padding-left, it displays correctly. This is happening only with the Pacifico font.
What's wrong?
HTML:
<div class="pacifico">Deli D</div>
<div class="pacifico padding">Deli D</div>
<div class="damion">Deli D</div>
CSS:
#import url(http://fonts.googleapis.com/css?family=Pacifico);
#import url(http://fonts.googleapis.com/css?family=Damion);
.pacifico, .damion {
background: red;
margin-bottom: 20px;
}
.pacifico {
font-family: "Pacifico";
font-size: 60px;
}
.padding {
padding-left: 10px;
}
.damion {
font-family: "Damion";
font-size: 60px;
}
i also facing same problem but its browser rendering issue. when you select the character you will understand how browser gives space for the character.
the only patch to solve this issue is use overflow: visible && padding property to its parent DOM ELEMENT.
I have the following CSS:
html.darkBlue button {
border-color: #cccccc;
color: #222222;
background: linear-gradient(#fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb);
}
.question-marking-buttons button {
padding: 0.4rem;
height: 1.4rem;
line-height: 1.4rem;
margin-right: 0.5rem;
float: left;
width: 4rem;
}
Here's my HTML:
<button>Mark</button>
In Google Chrome the button background extends from the top of the button to the bottom like this:
xxxxxxxxx
x x
x Mark x
x x
xxxxxxxxx
In Firefox it looks like this:
xxxxxxxxx
x x
x Mark x
xxxxxxxxx
Can someone give me advice on why the background is getting cut off in Firefox but not Chrome?
EDIT:
OK a few reasons
First issue, is problem with height, width, and line-height.
Second issue, is that the reason buttons and divs are different sizes in Firefox and Chrome, is only because of the text size. Firefox makes slightly bigger text size.
For example, if you have a text size of 15px, well Firefox makes a larger 15px than Chrome does.
The way I fixed this on my own website, is by using cufon for the text. Since cufon is an external font, it displays the exact same width on Firefox, Chrome, and every other browser. This solved my menubar width and button width cross-browser problems.
You should also use px or em instead of rem, just a tip.
NOTE 1: I hosted the necessary cufon files on yourjavascript.com for this example. However, you should either download those files and host on your own website, or create the files yourself from the cufon website, and host the files on your own site.
NOTE 2: To get the font file to upload to cufon to create the cufon fonts file, just go into C:\Windows\Fonts\ and find the font you want to use (i.e. Arial) and copy it to your desktop. Then upload that font file onto the cufon website for hosting. You can also download font files from google fonts or other sites, if you want different fonts to use with cufon.
SUMMARY:
Problem 1: line-height extends height
Problem 2: padding is wrong
Problem 3: firefox makes different size text. Use cufon to circumvent issue
Problem 4: needs padding-before hack
Problem 5: needs box-sizing hack. This prevents padding from being added to the width.
Problem 6: need to set css to button specifically, for good measure.
See my finished fix on jsbin:
http://jsbin.com/AxiCiNA/3
The code (same thing from the jsbin I created):
page.html
<html>
<head>
<script src="http://yourjavascript.com/319153210071/cufon-yui.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/330149971117/thearialcufonfile.js"></script>
</head>
<body>
<button id='one'>Mark</button>
<button id='two'>Mark</button>
</body>
</html>
style.css
#one {
border-color: #cccccc;
color: #222222;
background: linear-gradient(#fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb);
}
button#two {
padding: 1px 8px;
margin: 0;
margin-right: 9px;
float: left;
font: 15px 'Times New Roman, Serif';
height: 25px;
width: 50px;
line-height: 10px;
/* box-sizing hack for chrome */
-webkit-box-sizing: border-box;
/* box-sizing hack for firefox */
-moz-box-sizing: border-box;
/* box-sizing hack for opera */
box-sizing: border-box;
/* padding-before hack for chrome */
-webkit-padding-before: 1px;
-webkit-padding-after: 0;
-webkit-padding-start: 1px;
-webkit-padding-end: 0;
/* padding-before hack for firefox */
-moz-padding-before: 0px;
-moz-padding-after: 0;
-moz-padding-start: 1px;
-moz-padding-end: 0;
/* padding-before hack for opera */
padding-before: 1px;
padding-after: 0;
padding-start: 1px;
padding-end: 0;
}
script.js
Cufon.replace('#two', { fontFamily: 'Arial' });
It's because of those two lines :
padding: 0.4rem;
height: 1.4rem;
That's too much padding for that height.
Try this
padding: 0;
height: 1.5rem;
I am using a custom font (Oswald) for the headings or titles within my page. I believe that its' height is conflicting with the native fonts (Arial, san-serif etc.) and would like to know if there is a way to set both fonts evenly...? If more text is placed in later on, the gap difference becomes substantial.
Please take a look at what I have here: http://jsfiddle.net/x6v7F/
I have a temporary background fade in and out to illustrate.
thank you.
It doesn't seem to be a font-size issue, the issue seemed to be with you specifying the line-height
If you see this fiddle, you can see I've changed h1 and h2 to have these line-heights
h1 {
font: 16px 'Oswald', Arial, Helvetica, sans-serif;
text-transform: uppercase;
color:#000000;
margin:14px 0;
line-height: 100%; <----
}
h2 {
font: 12px 'Oswald', Arial, Helvetica, sans-serif;
text-transform: uppercase;
color:#BBBBBB;
margin-bottom: 14px;
line-height: 100%; <----
letter-spacing: .2px;
}
If you check that Fiddle, it seems to have fixed your problem?
Rob has 4 sections that sit side by side (you may have to bump up width of jsfiddle window). His prob is that he wants his sections to line up along the bottom, but is having issue because the varying text sizes between his body font and header fonts.
Many of the css grid frameworks try to address these type of issues: normalizing the heights of text and headers so that all lines fall on an imaginary grid of baselines.
To be honest, I would just give the sections a static height and leave some fuzzy space at the bottom for margin of error.
section { height: 370px; position:relative; }
section .button { position:absolute; bottom:0; right:0; }
Edit:
If you're looking for a dynamic section height, you'll have to leverage javascript magic. JQuery:
<style>
section { position:relative; padding-bottom:50px; }
section .button { position:absolute; bottom:0; right:0; }
<style>
<script>
var max_height = 0;
$('section').each(function() {
max_height = Math.max(max_height, $(this).height());
}).height(max_height);
</script>