I'm using wkhtmltopdf to convert some HTML to PDF. Is there a proper way to handle sizes and dimensions?
I mean - how can I style an image with the dimension of 100px x 1oopx that it is printed in the following dimension 10mm x 10mm (I'm using DINA4: 210mm x 297mm)?
I believe you can use a variety of units in the print styles, including cm and mm. So something like this should work:
#media print {
img.selector { width:1cm; height:1cm; }
}
Or perhaps just:
#media print {
img[width="100"]{ width:1cm; height:1cm; }
}
Related
I have the following media queries. The first one is for certain screens below a certain width. The second is specifically for the iPhone X. Is it possible to override the first media query when it is an iPhone X only? The following does not seem to work
#media (max-width: 449px) {
h1.question { padding: 20px 0px; }
}
#media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) {
h1.question { padding-top: 50px !important; }
}
I believe what you're looking for is -webkit-min-device-pixel-ratio.
The -webkit-device-pixel-ratio feature is specified as a value. It is a range feature, meaning that you can also use the prefixed -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio variants to query minimum and maximum values, respectively. (source)
As a test of this I set up the following fiddle, which will output -webkit-min-device-pixel-ratio (with credit to this). Also stack snippet below.
https://jsfiddle.net/3w5rq8pj/10/
I tested this on several devices with the following results:
Actual iPhone 7 Plus / Result 3
Macbook Pro with Retina Display / Result 3
Lenovo Thinkpad (ie) / Result 0
Emulated iPhone 6 Plus on BrowserStack via Macbook Pro with Retina / Result 3
Emulated iPhone 6 Plus on BrowserStack via Lenovo Thinkpad / Result 3
In all these cases the Browserstack emulators returned the proper results (which honestly suprised me).
I also re-ran all the tests but removed -min from the query in the javascript, and every single test case returned 0.
function guess() {
var ls, l=0, h=8192, c=parseInt((l+h)/2), i=20;
while (i > 0 && (c - l >1) && (h - c>1)) {
i--; // Shouldn't take more than 13 guesses, but in case of bugs!
if (window.matchMedia('(-webkit-min-device-pixel-ratio: ' + c + ')').matches) {
l=c; ls=0;
} else {
h=c; ls=1;
}
c = parseInt((h+l)/2);
}
c -= ls;
document.getElementById("result").innerHTML = "min pixel ratio: " + c;
}
guess();
<div id="result"></div>
I am trying to code my own responsive grid system using SASS. Using this simple Tutorial I was able to make a simple grid.
Currently, I am calculating the widths of all the columns according to their media query using this code:
#media #{$breakpoint-medium} {
.wrapper {
width: 95%;
max-width: $grid-max-width;
}
#for $i from 1 through $grid-columns {
.col-#{$i} {
width: 100% / $grid-columns * $i;
}
}
}
Where $grid-columns = 12
This works well, however, I'd like to center a block of text that I have designated as 8-columns wide, so I need to push, or offset this column by 2 columns.
I'm new to SASS so I'm still getting my bearings with using math in my CSS and such, but how can I adapt this code so that I can make a similar class, "push-#" that will automatically know to push the content properly?
Thanks so much in advance!
It is essentially the same math, you are just applying margin instead of width.
#for $i from 1 through $grid-columns {
.push-#{$i} {
margin-left: 100% / $grid-columns * $i;
}
}
Here is my storyboard
I'm using autolayout, and NOT using size classes.
When I ran it on iPhone 5s, it works fine.(both portrait and landscape)
But when I ran it on iPhone 6 plus (portrait), it's not aligning properly.
on iPhone 6 plus (landscape), it's worse.
I know I can use -widgetMarginInsetsForProposedMarginInsets: to set the margin, but in that case I will need to customize the margin for every device. That would be horrible :(
So is there a way to align the subview to the title less painfully?
Setting the edge insets to zero should fix the problem:
- (UIEdgeInsets)widgetMarginInsetsForProposedMarginInsets:(UIEdgeInsets)defaultMarginInsets
{
return UIEdgeInsetsZero;
}
Looks like you have to set it manually. You can do this by creating a constraint, then specifying an IBOutlet to it, and setting the constant depending on the device/orientation.
For reference, here are the margins I found you needed:
5S - 1 (2px)
6 - 1 (2px)
6 plus portrait - 5 (15px)
6 plus landscape - 34 (102px)
You can find which one you need from the size of the extension view, which is 414 pt for a portrait iPhone 6.
You need to customise the widget margins:
- (UIEdgeInsets)widgetMarginInsetsForProposedMarginInsets:(UIEdgeInsets)defaultMarginInsets;
Documentation: https://developer.apple.com/library/ios/documentation/NotificationCenter/Reference/NCWidgetProviding_Protocol/index.html
Fixes for some devices. Requires Ericas UIDevice-Extension.
- (UIEdgeInsets)widgetMarginInsetsForProposedMarginInsets:(UIEdgeInsets)defaultMarginInsets
{
defaultMarginInsets.bottom = 0;
if ([UIDevice.currentDevice.modelIdentifier containsString:#"iPhone7,1"] && self.traitCollection.horizontalSizeClass == UIUserInterfaceSizeClassCompact) {
defaultMarginInsets.left += 5;
} else if ([UIDevice.currentDevice.modelIdentifier containsString:#"iPhone7,1"] && self.traitCollection.horizontalSizeClass == UIUserInterfaceSizeClassRegular) {
defaultMarginInsets.left += 34;
} else {
defaultMarginInsets.left += 1;
}
return defaultMarginInsets;
}
I am trying to create 50 background images for a set of windows using less.
These image paths are exactly the same format, but the number just increments by 1 for each window.
Currently I have the following code:
window-1{
background-image: url('/content/images/background-1-window.png')
}
window-2{
background-image: url('/content/images/background-2-window.png')
}
..
window-50{
background-image: url('/content/images/background-50-window.png')
}
What I want to achieve is to effectively have variables replacing the numbers using less, is it possible to do this using variables and or mixins?
Something like:
window-#window-number{
Background-image: url('/content/images/background-#window-number-window.png')
}
Is it at all possible to do something like this?
Yes, it is possible, see this answer https://stackoverflow.com/a/15982103/1596547 and https://github.com/twbs/bootstrap/issues/10990 for some example code:
In your case:
.setbackgroundimage(#index) when (#index > 0)
{
window-#{index}
{
background-image: url('/content/images/background-#{index}-window.png');
}
.setbackgroundimage(#index - 1);
}
.setbackgroundimage(50);
I'm trying to create a mixin that'll take two parameters and output sizing in px and rem. This is the code:
.sizing (#cssProperty; #sizeValue) {
#cssProperty: ((#sizeValue * #basefont) * 1px);
#cssProperty: (#sizeValue * 1rem);
}
Usage would be like:
h2 {
.sizing(font-size; 1)
}
Which should output (depending on what basefont size is defined):
h2 {
font-size: 12px;
font-size: 1rem;
}
But simpLESS won't compile it, and says there's an error in these two lines:
.sizing (#cssProperty; #sizeValue) {
.sizing(font-size; 1);
What am I doing wrong? Is it because of the variable property names?
Just noticed that you are trying to use variables as property names instead values which is not supported by less.
There is a hack highlighted in this answer as workaround:
How to pass a property name as an argument to a mixin in less
.mixin(#prop, #value) {
Ignore: ~"a;#{prop}:#{value}";
}
LESS does not allow to use a variable as a CSS property name.
In your code above #cssProperty: ((#sizeValue * #basefont) * 1px); is actually a definition of the new #cssProperty variable and not a CSS property: value statement, hence it produces no CSS output.
There's a workaround for what you want to achieve though, see 14868042, 18558368 etc...