I am wanting to print labels from a Brother Label Printer from a web browser. I know DYMO has a JavaScript framework that makes printing from the browser simple. But I have customers with a Brother label printer so I need to make it work.
I've been doing some testing and some searching and it's surprising how little information is out there on this subject.
So far the only browser I have had success with is Google Chrome as it doesn't seem to print header and footers. I have installed the printer/drivers and created a custom paper size which measures 62 x 29mm.
When I try to print, it's splitting the text over 5 labels. I have the following text on the page I am trying to print:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Print</title>
</head>
<body>
<p style="margin: 0; padding: 0; line-height: 13px; font-size: 11px; font-family: Arial; font-weight: normal; border: 1px solid #000;">Line 1<br />
Line 2</p>
</body>
</html>
But it prints 5 pages as you can see from the print que sample.
Has anyone tackled this before or have any suggestions.
UPDATE
After changing the the margins listed in the first screenshot above to 0, it got it down to two pages. But there's still a huge margin around it:
This answer won't solve your problem in 100%. I've tested it against Safari with custom paper settings - same as ones from your example. I was testing it against printing to PDF so maybe with specific printer driver it will behave a bit different. Your example CSS and HTML are missing margin and padding reset. Here is example for #media print:
#media print {
body, html, p {
margin: 0pt !important;
padding: 0pt !important;
}
#page {
margin: 0pt !important;
padding: 0pt !important;
}
}
With this settings 2 lines of text are on one page, hover there is still some margin that can't be reduced to 0.
Related
I want to change the brightness of my background image based on the user's screen brightness. Let me demonstrate this with a simple example.
For example, let these be my html and css files:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.hero{
width: 100%;
height: 100vh;
background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('https://cdn.decorilla.com/online-decorating/wp-content/uploads/2018/10/modern-interior-design-grey-living-room2.png');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.content{
width: 50%;
}
.content h1{
color: #fff;
text-align: center;
font-size: 2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<div class="content">
<h1>My Test Text!</h1>
</div>
</div>
</body>
</html>
The result is good only when the user's screen brightness is low. When the screen brightness is increased, the foreground does not stand out from the background. Instead, An alpha value of 0.75 looks good for bright screens.
So is there any way to change the alpha value of the background based on the user's screen brightness? Any help would be appreciated.
There is no media query for detecting brightness. See all media-queries
There is no JS way of doing it as well. See another question
It doesn't make sense to me, if I change the brightness on my monitor the PC doesn't know about it. Therefore you cannot achieve this.
The least you can do is switch between dark and light theme using the media queries, but it is not what you want to achieve, I think.
For the text you can try to add text-shadow. It may help to see the text better.
There is filter properties brightness method which let you relatively change as per screen brightness. Technically, the brightness is still changing as per the screen's but it gives us leverage to increase or decrease as a constant value.
filter: brightness(1.5) (MDN)
There is another good answer about why it's not possible with JavaScript. Meanwhile, I think some additional information could be helpful.
If you can install an application to the client, say a node.js application, you can reach some kind of screen brightness and exposed the value through an API, and get that value from your JavaScript code.
It would be another question to detect the brightness but this could be a good start.
https://github.com/kevva/brightness
https://github.com/kevva/brightness-cli
This would be tricky because the solution varies, depends on your target OS, whether it's an external monitor or not etc. For example, WmiMonitorBrightness could be useful for a Windows system.
The browsers does not know the monitor information and settings. This is unlikely
But you can try this :
#:before{content:'';/*backgroundcodes*/opacity:.15}
I have a Github gist embedded on my site. So far so good. Unfortunately, it displays a horizontal scrollbar that I just can't seem to get rid of. Code is this:
<html>
<head>
<style type="text/css">
.gist, .gist-file, .gist-meta {
font: "Helvetica Neue", Helvetica, arial, freesans, clean, sans-serif;
background-color:#ffffff !important;
border: none !important;
border-radius: 0;
border-bottom: none;
overflow-x: hidden !important;
max-width: 100% !important;
overflow: hidden !important;
width: 100%;
align-self: center;
}
</style>
</head>
<body>
<script class="test" src=.js"></script>
</body>
</html>
As you can see in the script tag, I've tried a lot of different things to remove it. The CSS works, meaning that I can use those classes to manipulate the gist somewhat, but I just can't seem to get rid of the horizontal scrollbar. Please help. What can I do here? Using Chrome. site is on Github Pages.
EDIT: Even when I create an entirely new project for just this html file I get the horizontal scrollbar.
Why there is a blank space under body tag on mobile view ( chrome only, ff and ie work fine )
the code is simple:
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head></head>
<style>
body{
margin: 0;
padding: 0;
height: 100%;
display: flex;
width: 500%;
background: pink}
</style>
<body>
</body>
</html>
image:
It's just the Chrome device view. You have scrolled the view down. The screen height is set at 1024px, so the body won't go any lower. There's no need to worry since you won't be able to scroll down once you have it opened on an actual device. It's just the Chrome viewer, there's nothing wrong with your site.
Edit:
I noticed you had solved it by using a fixed position. You shouldn't do that. It won't be useful in normal use, and might lead to problems in later development.
I made an html app that has a form, for some smartphone-resolution devices (460 x 320 pixels), and it appears fine on my smartphone. When I ran it on my Android tablet (which is a Samsung Tab 3- 1024 x 600 Pixels), the app's background image was tiled/repeated. I was able to remove the repeating background image using background-Repeat:no-repeat;, but now what I am left with is a lot of white space at the bottom and to the right of the app, where the repeated image was. I am not sure what this white space is. Is it the layout viewport, or the canvas, the margins, padding, or something else?
I want to shrink the white space to the same size as the form because when I re-size (larger) my future smartphone-resolution apps for tablets, I want one app for all tablets sizes, regardless of any larger resolution tablets it may be run on. The page below shows how the app kind of looks on my tablet, but instead of yellow space, there is white space:
https://developer.mozilla.org/it/docs/DOM/element.clientHeight
I've tried some settings with CSS, meta viewport, window.resizeTo and window.resizeBy. Also, I have read up on screen.height, outerHeight, outerWidth, offsetWidth, clientHeight and clientWidth, but I don't know where these commands should go in the html of the app, or even if they will have any affect. Window.resizeTo(320,460) kind of worked in Safari desktop, but not in Chrome desktop. Window.resizeTo had no affect on my Android tablet whether the app was run as an html file (regardless of which browser was used) or as an .apk.
I have been told that resizing a mobile browser/white space (which ever this may be called) isn't possible, but I refuse to believe it. If it is indeed impossible, is there something else that I can do with the white space like make it transparent, or change it to other colors to match my apps? Or, is there some other alternative that I could try?
As an example, my Android tablet's stock video player app has a feature that allows it to be less than full screen. Surely it should be possible to do this with with an html app using html5, Phonegap, the Android API, CSS, webview, etc. instead of having the extra white space. Please see an example here: http://www.youtube.com/watch?v=2swd06TNYXc
The html for an example form is below.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tablet Test</title>
<meta name="generator" content="WYSIWYG Web Builder 8 -
http://www.wysiwygwebbuilder.com">
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;">
<style type="text/css">
body
{
font-size: 8px;
line-height: 1.1875;
background-color: #FFFFFF;
color: #000000;
}
</style>
<style type="text/css">
a
{
color: #0000FF;
text-decoration: underline;
}
a:visited
{
color: #800080;
}
a:active
{
color: #FF0000;
}
a:hover
{
color: #0000FF;
text-decoration: underline;
}
</style>
<style type="text/css">
#wb_Form1
{
background-color: #1E90FF;
border: 0px #000000 solid;
}
#TextArea1
{
border: 1px #C0C0C0 solid;
background-color: #FFFFFF;
color :#000000;
font-family: Arial;
font-size: 13px;
text-align: left;
}
</style>
</head>
<body>
<div id="wb_Form1"
style="position:absolute;left:0px;top:0px;width:320px;height:460px;z-in
dex:3;">
<form name="Form1" method="" action="" enctype="text/plain" id="Form1">
<textarea name="TextArea1" id="TextArea1"
style="position:absolute;left:112px;top:106px;width:98px;height:98px;z-
index:1;" rows="5" cols="11"></textarea>
<button id="AdvancedButton1" type="button" name="" value=""
style="position:absolute;left:86px;top:364px;width:150px;height:34px;z-
index:2;"><div style="text-align:center"><span
style="color:#000000;font-family:Arial;font-size:13px">Send</span></div
></button>
</form>
</div>
</body>
</html>
You are not explaining what exactly you want. Remove whitespace - you could theoretically set the viewport width to the required size and the page will have no "white space".
For Example:
<meta name="viewport" content="width=460,user-scalable=no">
But this will take up the entire width of the WebView - which based on the video you posted (which is of a native application) you don't want.
IF you are using PhoneGap or some other kind of WebView based approach to display this, then you can set the background color of the WebView to be transparent (But this may have some issues depending on the version of Android you are developing for: Android WebView style background-color:transparent ignored on android 2.2)
EDIT
I've made an available version of the example here:
Orig. Example: http://jsbin.com/orIFUpEq/1/edit
The site is designed for fixed width - it's NOT POSSIBLE to make the browser transparent, unless you are using a WebView.
The best option is to make your design flexible. The easiest version to come up with is this: http://jsbin.com/UTENavu/4/edit
Essentially made the body and html 100%, made the body background the blue color, and centred the form in the middle but removing the position absolute and adding the following CSS:
#wb_Form1
{
position: relative;
border: 0px #000000 solid;
margin: 0 auto;
}
My guess is that this is generate code from some kind of tool based on:
<meta name="generator" content="WYSIWYG Web Builder 8 - http://www.wysiwygwebbuilder.com">
So this may need a little work to get it to be happy with your changes.
Either way - you seem to be designing a fixed layout and that simply won't work out well across devices.
I spoke with a local webmaster that I know, and he told me that the
amount of white space there is depends on how the browser is
programmed. After speaking with him, I did more research and learned
that browsers are programmed to have a layout viewport of different
sizes, depending on the company it is put out by, for example (only),
Safari browsers may have a layout viewport that is 1024 px wide, and
that is why there is all the extra white space around the form in that
browser. So technically it is not impossible what I want to do, I just
had to find a workaround, since I don't know how to reprogram the
browsers my apps will be on.
<html>
<head>
<style>
html{ overflow:hidden;}
body{ overflow:hidden; height:100%; background-color:blue; margin:0px;}
div{ height:3000px; background-color:red; margin:30px;}
</style>
</head>
<body>
<div>dasdasd</div>
</body>
</html>
Here is the html code. When it running on a standard browser, the div tag keep showing in the window.
But it run in ie, when you select the words "dasdasd" and drag down, the body tag will scroll and the words "dasdasd" will hide unless you disable the select function.
Could someone give me other solution?
Like Spudley's answer,the DOCTYPE cause the problem,but when in the standard mode,the body tag still scroll, anyone can solve the problem?
The problem is that you're missing the <!DOCTYPE> declaration.
When IE sees HTML code without a DOCTYPE, it goes into quirks mode.
In quirks mode, the browser is effectively rendering the page to be backward compatible with IE5. It changes the way it renders the basic box layout, and removes support for a lot of standard CSS.
Add the following doctype to the top of your page (above the <html> tag), and you should see things come right:
<!DOCTYPE html>
Try this:
body {
background-color: blue;
height: 100%;
margin: 0 auto;
overflow: auto;
}
div {
background-color: red;
margin: 30px;
overflow: auto;
}
Hope it works...Best Luck.