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>
This is the weirdest thing. Here's the source code.
<!doctype html>
<html><head><meta charset="utf-8"><title>Kaely Michels-Gualtieri</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { margin: auto }
#icons { margin: auto; position: fixed; left: 0px; bottom: 0px; right: 0px; width: 50%; height: 100px; background: black }
</style></head>
<body>
<span id="icons">
</span>
</body></html>
I'm experimenting on an iOS device running the latest, 9.3 or whatever (nothing special), and when I orient the device with the source code provided above, the <span> bar disappears (if Safari's tab bar controller is visible – AKA open tabs in the background)! If there's no other tabs, there's no problem. Something to do with position: fixed elements.
I think it has to do with the Safari's tab bar controller screwing with the viewport.
Would love some help on this one. Thanks!
Appears to be a known bug...
bugs.webkit.org/show_bug.cgi?id=153056
Found a concise solution on StackOverflow (search terms position fixed orientation). The bug appears to be WebKit specific, thus its limited to iPhone 6/s Plus and Safari. Android devices and Chrome appear to be unaffected!
Append -webkit-transform: translate3d(0, 0, 0) or -webkit-transform: translateZ(0) to the CSS declaration. For example,
#icons { ... ; -webkit-transform: translateZ(0) }
I don't know that there's a difference between the two but translateZ(0) is shorter. I also expect -webkit to be unneeded.
May you be saved!
hi #zaydek have you tried looking in to this articles
https://weblog.west-wind.com/posts/2015/jun/05/ipad-scroll-issues-with-fixed-content
https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios
http://jsfiddle.net/36ykrp9x/5/
HTML
<div class="container">
<button>O</button><button>O</button>
</div>
CSS
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
This above code best captures the visual bug I am interested in solving. I should note that this does not appear to affect Firefox or Safari's latest versions. I am currently on Chrome 39. If you are on a retina display and a recent version of Chrome and do not already see the thin line between the elements, try resizing the window a bit. A thin line between the buttons will flicker in and out of presence.
For my purposes, there is at least one element above the button group in the hierarchy with 100% width, and the buttons must be horizontally centered within it. The buttons themselves must have opacity between 0 and 1. They can be divs, or any other element for that matter - but I have indeed tried others and found the problem remains.
Unfortunately, centering the button group within a fixed-width element doesn't appear to solve this issue for me, as the fixed-width button group must ultimately also be centered somehow which appears to resurrect the issue. Nudging with margins can lead to overlapping which is more obvious with elements that have such opacity - which is really no better than having the gap in the first place.
It is worth noting that indeed using background-color: rgba(r,g,b,a) addresses the problem for most intents and purposes, but I am very interested in resolving this without it if only to see that it's possible.
I am not particularly interested in solutions that involve JavaScript. Am I out of luck?
Based on the information you provided, and my own experience with Google Chrome, I'm led to the suggestion that this is a browser bug in Chrome, considering it only occurs in Chrome on a Retina screen, and other browsers such as Safari and Firefox do not exhibit the problem. Your HTML and CSS looks perfect so I don't see issues here.
You can verify that this is a browser rendering issue by also checking this in a latest version of Opera (on your Retina display), as Opera now uses the same Blink rendering engine as Chrome (which is forked from Webkit). If Opera exhibits the same issue then its a Engine issue which should be logged as a bug.
Unless someone else figures out a way around it, I am normally inclined to leave browser rendering bugs like this alone where possible so that you're not hacking code in your site, and when the bug is fixed, you don't have to do anything to your site.
The problem is with jsfiddle.net. I have the same 1 pixel space in Chrome 40 on retina. Try this: http://dabblet.com/gist/c0068a79fc0268482ee1
or the following code, loaded directly:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
</style>
</head>
<body>
<div class="container">
<button>O</button><button>O</button>
</div>
</body>
</html>
Ugh. I really, really hate cross-browser compatibility... I'm working on a Wordpress site for a client to create a popup box that appears just below the item I'm hovering over (using a custom shortcode). I have top set to 16px, and it works fine in Firefox. However, in IE8, it appears a lot further down. Even if I set top to "0", it still appears BELOW the containing blog, instead of at the top of it.
I also have a related issue, in that the font size in IE8 is about 2 pixels smaller. There is a <sup></sup> tag before this, as well, but removing it doesn't change much--the font size is still smaller in IE8.
Here is the page:
http://www.medicalmarcom.com/services/
Every question mark along the left side has a popup that appears when hovering over it (kinda like a tooltip). I need to make it work in FF, IE, Safari, and Chrome. The only one it doesn't work in is IE. Thankfully, he didn't mention IE6, so I'm not worrying about it unless he singles it out.
Here is the HTML:
<span class="questions"><sup>(
<div class="popup_content"><span class="popup">?</span>
<div class="popup_inside" style="display: none;">We’ll ask questions to understand your business, objectives, competitive situation, and positioning statement.<br />
<span style="color:#15398c"><em>Read More >>></em></span></div>
</div>
)</sup></span>
CSS:
.popup_content {
display: inline;
position: relative;
}
.popup_inside {
background-color: #FFF;
border: 1px solid #000;
text-align: left;
font-size: 12px;
color: #000;
width: 300px;
padding: 2px;
line-height: 1.5;
left: 0;
top: 16px;
z-index: 1001;
position: absolute;
display: none;
}
.popup {
position: relative;
z-index: 1000;
}
Ok, this is due to how ie8 is rendering the sup tag, I believe. It considers its baseline the same as the rest of the text, rather than above it. If you want to do this with just css, I'd consider rolling your own superscript class.
Here's a fiddle of something that seemed to work for me.
As an alternative solution, it seems to be rendering correctly in IE7, you could force IE8 into IE7 Compatibility Mode. Drop this line at the top of your <head>. I don't know what this will do to IE9, but it's worth a shot.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
I have a HTML report, which needs to be printed landscape because of the many columns. It there a way to do this, without the user having to change the document settings?
And what are the options amongst browsers.
In your CSS you can set the #page property as shown below.
#media print{#page {size: landscape}}
The #page is part of CSS 2.1 specification however this size is not as highlighted by the answer to the question Is #Page { size:landscape} obsolete?:
CSS 2.1 no longer specifies the size attribute. The current working
draft for CSS3 Paged Media module does specify it (but this is not
standard or accepted).
As stated the size option comes from the CSS 3 Draft Specification. In theory it can be set to both a page size and orientation although in my sample the size is omitted.
The support is very mixed with a bug report begin filed in firefox, most browsers do not support it.
It may seem to work in IE7 but this is because IE7 will remember the users last selection of landscape or portrait in print preview (only the browser is re-started).
This article does have some suggested work arounds using JavaScript or ActiveX that send keys to the users browser although it they are not ideal and rely on changing the browsers security settings.
Alternately you could rotate the content rather than the page orientation. This can be done by creating a style and applying it to the body that includes these two lines but this also has draw backs creating many alignment and layout issues.
<style type="text/css" media="print">
.page
{
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
The final alternative I have found is to create a landscape version in a PDF. You can point to so when the user selects print it prints the PDF. However I could not get this to auto print work in IE7.
<link media="print" rel="Alternate" href="print.pdf">
In conclusion in some browsers it is relativity easy using the #page size option however in many browsers there is no sure way and it would depend on your content and environment.
This maybe why Google Documents creates a PDF when print is selected and then allows the user to open and print that.
My solution:
<style type="text/css" media="print">
#page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>
With media="print" will apply only on Print.
This works in IE, Firefox and Chrome
The size property is what you're after as mentioned. To set both the the orientation and size of your page when printing, you could use the following:
/* ISO Paper Size */
#page {
size: A4 landscape;
}
/* Size in mm */
#page {
size: 100mm 200mm landscape;
}
/* Size in inches */
#page {
size: 4in 6in landscape;
}
Here's a link to the #page documentation.
It's not enough just to rotate the page content. Here is a right CSS which work in the most browsers (Chrome, Firefox, IE9+).
First set body margin to 0, because otherwise page margins will be larger than those you set in the print dialog. Also set background color to visualize pages.
body {
margin: 0;
background: #CCCCCC;
}
margin, border and background are required to visualize pages.
padding must be set to the required print margin. In the print dialog you must set the same margins (10mm in this example).
div.portrait, div.landscape {
margin: 10px auto;
padding: 10mm;
border: solid 1px black;
overflow: hidden;
page-break-after: always;
background: white;
}
The size of A4 page is 210mm x 297mm. You need to subtract print margins from the size. And set the size of page's content:
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}
I use 276mm instead of 277mm, because different browsers scale pages a little bit differently. So some of them will print 277mm-height content on two pages. The second page will be empty. It's more safe to use 276mm.
We don't need any margin, border, padding, background on the printed page, so remove them:
#media print {
body {
background: none;
-ms-zoom: 1.665;
}
div.portrait, div.landscape {
margin: 0;
padding: 0;
border: none;
background: none;
}
div.landscape {
transform: rotate(270deg) translate(-276mm, 0);
transform-origin: 0 0;
}
}
Note that the origin of transformation is 0 0! Also the content of landscape pages must be moved 276mm down!
Also if you have a mix of portrait and lanscape pages IE will zoom out the pages. We fix it by setting -ms-zoom to 1.665. If you'll set it to 1.6666 or something like this the right border of the page content may be cropped sometimes.
If you need IE8- or other old browsers support you can use -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3). But for modern enough browsers it's not required.
Here is a test page:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
...Copy all styles here...
</style>
</head>
<body>
<div class="portrait">A portrait page</div>
<div class="landscape">A landscape page</div>
</body>
</html>
Try to add this your CSS:
#page {
size: landscape;
}
Quoted from CSS-Discuss Wiki
The #page rule has been cut down in
scope from CSS2 to CSS2.1. The full
CSS2 #page rule was reportedly
implemented only in Opera (and buggily
even then). My own testing shows that
IE and Firefox don't support #page at
all. According to the now-obsolescent
CSS2 spec section 13.2.2 it is
possible to override the user's
setting of orientation and (for
example) force printing in Landscape
but the relevant "size" property has
been dropped from CSS2.1, consistent
with the fact that no current browser
supports it. It has been reinstated in
the CSS3 Paged Media module but note
that this is only a Working Draft (as
at July 2009).
Conclusion: forget
about #page for the present. If you
feel your document needs to be printed
in Landscape orientation, ask yourself
if you can instead make your design
more fluid. If you really can't
(perhaps because the document contains
data tables with many columns, for
example), you will need to advise the
user to set the orientation to
Landscape and perhaps outline how to
do it in the most common browsers. Of
course, some browsers have a print
fit-to-width (shrink-to-fit) feature
(e.g. Opera, Firefox, IE7) but it's
inadvisable to rely on users having
this facility or having it switched
on.
You might be able to use the CSS 2 #page rule which allows you to set the 'size' property to landscape.
You can also use the non-standard IE-only css attribute writing-mode
div.page {
writing-mode: tb-rl;
}
I created a blank MS Document with Landscape setting and then opened it in notepad. Copied and pasted the following to my html page
<style type="text/css" media="print">
#page Section1
{size:11 8.5in;
margin:.5in 13.6pt 0in 13.6pt;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:4;}
div.Section1
{page:Section1;}
</style>
<div class="Section1"> put text / images / other stuff </div>
The print preview shows the pages in a landscape size. This seems to be working fine on IE and Chrome, not tested on FF.
I tried Denis's answer and hit some problems (portrait pages didn't print properly after going after landscape pages), so here is my solution:
body {
margin: 0;
background: #CCCCCC;
}
div.page {
margin: 10px auto;
border: solid 1px black;
display: block;
page-break-after: always;
width: 209mm;
height: 296mm;
overflow: hidden;
background: white;
}
div.landscape-parent {
width: 296mm;
height: 209mm;
}
div.landscape {
width: 296mm;
height: 209mm;
}
div.content {
padding: 10mm;
}
body,
div,
td {
font-size: 13px;
font-family: Verdana;
}
#media print {
body {
background: none;
}
div.page {
width: 209mm;
height: 296mm;
}
div.landscape {
transform: rotate(270deg) translate(-296mm, 0);
transform-origin: 0 0;
}
div.portrait,
div.landscape,
div.page {
margin: 0;
padding: 0;
border: none;
background: none;
}
}
<div class="page">
<div class="content">
First page in Portrait mode
</div>
</div>
<div class="page landscape-parent">
<div class="landscape">
<div class="content">
Second page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
</div>
</div>
</div>
<div class="page">
<div class="content">
Third page in Portrait mode
</div>
</div>
Here's what I came up with - add a negative rotation to the <html> element and a positive rotation of equal abs value to the <body>. That saved having to add a ton of CSS to style the body, and it worked like a charm:
html {
transform: rotate(-90deg);
}
body {
transform: rotate(90deg);
}
I tried to solve this problem once, but all my research led me towards ActiveX controls/plug-ins. There is no trick that the browsers (3 years ago anyway) permitted to change any print settings (number of copies, paper size).
I put my efforts into warning the user carefully that they needed to select "landscape" when the browsers print dialog appeared. I also created a "print preview" page, which worked much better than IE6's did! Our application had very wide tables of data in some reports, and the print preview made it clear to the users when the table would spill off the right-edge of the paper (since IE6 couldnt cope with printing on 2 sheets either).
And yes, people are still using IE6 even now.
<style type="text/css" media="print">
.landscape {
width: 100%;
height: 100%;
margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1);
}
</style>
If you want this style to be applied to a table then create one div tag with this style class and add the table tag within this div tag and close the div tag at the end.
This table will only print in landscape and all other pages will print in portrait mode only. But the problem is if the table size is more than the page width then we may loose some of the rows and sometimes headers also are missed. Be careful.
Have a good day.
Thank you,
Naveen Mettapally.
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
not working in Firefox 16.0.2 but it is working in Chrome
This also worked for me:
#media print and (orientation:landscape) { … }
The problem I faced is probably the same you have. Everyone here is using CSS to provide it statically, but I had to look for a dynamic solution so that it would change based on the active element without reloading the page..
I created 2 files, portrait.css and landscape.css.
portrait.css is blank, but landscape.css has one line.
#media print{#page {size: landscape}}
in my primary file, I added this line of html to specify portrait.css as default.
<link rel="stylesheet" id="PRINTLAYOUT" href="portrait.css" type="text/css" /></link>
Now, to switch you only have to change href in the element to switch printing modes.
$("#PRINTLAYOUT").attr("href","landscape.css")
// OR
document.getElementById("PRINTLAYOUT").href = "landscape.css" // I think...
This worked great for me, and I hope it helps someone else doing things the hard way like me.. As a note, $ represents JQuery.. If you are not using this yet, I highly recommend you start now.
If you are using React and libraries like MUI, using plain CSS in your React app is not a good practice. The better approach will be to use a style component called GlobalStyles, which we can import from Material UI.
The code will look like this,
import { GlobalStyles } from '#mui/material';
const printStyle = {
['#media print']: {
['#page']: {
size: 'landscape',
margin: '2px',
},
},
};
You might not need to use #page inside the #media print because #page is only for printing. Documentation
The margin will eliminate the URLs, the browser generates while printing.
We can use the GlobalStyles in our App container. Like this
const App: React.FC = () => (
<>
<GlobalStyles styles={printStyle} />
<AppView />
</>
);
It will apply the above CSS whenever we call windows.print().
If you are using other libraries besides MUI, there should be some components or plugins that you can use to apply the CSS globally.
You can try the following:
#page {
size: auto
}