I had a page that displayed some text and a centered table below that text. I added another table adjacent to the first table. The font size remained the same on screen, but in print the font size got reduced.
This is probably so that two tables could fit one besides another. Problem is in the fact that font size got reduced on the entire page, even outside the tables (which is undesired). Does anyone know the cause for this behavior, and how can I keep the declared font size outside the tables (it is explicitly declared but in print it has no effect).
Original answer by user #celicni
It seems that font size did not decrease but the whole page was scaled to fit the paper size. So explicitly setting the outer text to larger size couldn't help, but setting the table text to smaller size helped by reducing the page width hence no need for scaling.
Related
Using VisualEditor on last version of mediawiki, I am trying to create table with image in it.
The columns width automatically fit to the image size, excepte for small images. Even for a 25pixel image, the column minimum size is 200 pixel
I have tried all th parameters for the image. I do not change the width of the column. If I remove the image, the column immediately fit to minimum size.
What can I do to make column fit to small image?
Another solution would be to not use image. I would like "green check" and "red cross" in my tab? Maybe there is a solution without using images? Any ideas?
I would like to find out how to present a banner or logo on a responsive design but I can't find a question that is not flagged as bad or likely to be closed. I've tried numerous ways of phrasing the question and none of them are liked. So, I have no idea how to even present this question or even where to begin to look for the answer or how to ask the question. PLEASE, PLEASE give me an idea of how to word this so someone will see my question. I've tried web searches but nothing addresses the issue and I cannot even figure out how to work it.
In case someone sees this, what I am doing is taking a site that was not responsive and had a banner that was 1100 px wide by 110px in height. The trend seems to be to move away from such banners and use logos that are square or round instead or to use text for branding. If I just reduced the size of the banner to 500px wide then the height would proportionally decrease to only 40 or 50px if a percent value was used. That clearly won't look good on a small screen.
Also, if I reduced the image to a more square dimension the image isn't actually resizing by percent values when the CSS background-image style is used instead of an img tag surrounded by div tags. I haven't found a way to control alignment and size using percent values on the background-image property of a container. I could tell my client that we shouldn't use a wide banner in a responsive design but I don't know if that means I am missing an option.
A different image seems to be required on smaller displays using media queries. Can alignment and resizing as percent values be used with the background image CSS style or should different images be served using the img tag?
Lastly, on a high pixel density display tablet or even smartphone serve a large image due to the number of pixels wide being greater than 900px or 1000px? With high-density displays, it seems that even a smartphone could have a width greater than 1000px but that may not look right.
this will size it:
.img-class {
background-image: url('path/myImage.png');
background-size: 200px 200px;
}
first value is width, second value is height, you can also use %, or to scale the whole thing use a single value like for example: background-size: 80%;
A different image seems to be required on smaller displays using media
queries. Can alignment and resizing as percent values be used with the
background image CSS style or should different images be served using
the img tag?
Yes as long as you scale it down and not up, or it blurs out.
Lastly, on a high pixel density display tablet or even smartphone
serve a large image due to the number of pixels wide being greater
than 900px or 1000px? With high-density displays, it seems that even a
smartphone could have a width greater than 1000px but that may not
look right.
Just be sure your images are 'retina ready' and that's all, meaning if you want to place on your website a 200x200 px image, create it 400x400 px instead, then using css you force it to always be 200x200, so it will read a 400x400 and resize it to 200x200 making it not blurred on mobile.
Side note: If you have graphic images and not photographs, i recommend you using svg (vector images) now supported on all browsers, that are scalable so retina ready by default let's say, and way smaller in size.
I am designing a site that sells apps. Each product page contains text with screenshots. I'm having trouble controlling the size and behavior of the images.
Each screenshot is a different size and shape - some being tall and narrow while others being short and wide.
My question:
How am I supposed to control the size of these images? Some are perfect at 100%, but some others would be way too big at 100%. So if I set a value in the css, it will be ok for image 1,3,6,9 but not for images 2,4,6,8 (and obvioulsy there are more than 2 types of sizes...).
I tried using max-width, but that obviously failed because if one picture exceeds the max-width, it will be scaled down, while another will not - this produces a funny looking page!
Am I supposed to do local styling for each image in such a case?
And if the answer is that local styling is required here, does that mean that each page needs it's own media queries also to resize responsively?
Thanks.
You can make 5 css class, named .width1 to .width5, having width value from 20% to 100%.
When adding an new image, choose a class that fit your need.
If you need more precision, create a set of 10 class instead of 5 !
Edit : as promised, the code :
.size1{width:10%;}
.size2{width:20%;}
.size3{width:30%;}
.size4{width:40%;}
.size5{width:50%;}
.size6{width:60%;}
.size7{width:70%;}
.size8{width:80%;}
.size9{width:90%;}
.size10{width:100%;}
So the image :
<img class="size2" src="..." />
will be 20% wide.
The little web application I am writing populates a temporary invisible container with some text, measures the resulting height, and then uses it to generate some guis based on that height.
This is done because, not all fonts are mon-spaced and as such need to be measured each time to determine how much space they will take up.
Now, I may need to scale the entire UI to fit a different screen size and was wondering if I can just scale the resulting height reliably.
Simply Put: Are all front glyphs guaranteed to be proportionate when scaled or can you have different glyph widths/spacing at different font sizes?
e.g. Will a font set at size 20 always be exactly 2 times the size of a font set at size 10?
EDIT: Here is another view of the test I did and posted in the comments below:
When you double font size, it is doubled exactly. But this does not mean that glyphs are scaled proportionally. The font size is simply a property of the font, not a property of glyphs. Glyphs are scaled, but the results are not and cannot be exact, due to the granularity of rendering: the abstract glyph shapes must be rasterized, i.e. converted to pixel maps, and this inevitably changes their shapes.
For example, consider the horizontal stroke of the letter “e”. The width depends on the font size, of course, but in rasterization, it needs to be mapped to one pixel, two pixels, or some other number of pixels. Even subpixel rendering does not change this; it just modifies the way rasterization works. Thus, the width of the stroke as rendered on screen (or paper) cannot exactly reflect the font size. And different strokes in a glyph will behave differently, so that an increase of font size does not mean exact magnification of a glyph.
I have multi column (css3 webkit columns with fixed heights) layout in my document. When I increase font sizes for elements (using element.style.setProperty('font-size', ...); my body.scrollWidth increases also and this is OK. However, wehn decreasing font size body.scrollWidth stays the same and I'm left with a lot of blank space on the far right.
Any thoughts how I can solve this problem? How to force body.scrollWidth to reflect the changes to the document and shrink when necessary?