This test image shows how wildly different Safari positions text inside a box vs Firefox (Safari 5.0.5 and Firefox 5.0.1 for Mac OS X 10.6.7). Notice how the "S" for sans-serif is butted up to the top of the box in Firefox and not Safari. The difference seem to vary depending on typeface used, where some are even consistently rendered.
I've read people saying that this is because of rounding issues between font-size and line-height (and fixed by setting smaller height than size), but I think that's disproved by my example where sans-serif/helvetica in Firefox always aligns top in the box.
To me it looks like Safari gets it more right than Firefox, i.e. text is generally more around a middle line.
Is there a good way to get them more consistent? My target is only standards-compliant browsers.
NB1: This has nothing to do with vertical-align.
NB2: I investigated a similar problem in the past with no completely satisfactory outcome.
My test code: http://jsbin.com/omaboc
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
font-size: 50px;
line-height: 1em;
}
div {
background: #b5e260;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div style="font-family: sans-serif">Some text # this box</div>
<div style="font-family: serif">Some text # this box</div>
<div style="font-family: arial">Some text # this box</div>
<div style="font-family: helvetica">Some text # this box</div>
<div style="font-family: courier">Some text # this box</div>
<div style="font-family: georgia">Some text # this box</div>
</body>
</html>
Unfortunetly, there isn't a solution to this problem. Text rendering is done differently in almost every browser, and even between major browser versions it sometimes changes. In some browsers it is determined by the particular font rendering systems and settings from the OS. There have always been and always will be trade offs for one type of font rendering to another, and every one of those will change with different types of displays on different types of hardware.
Sorry, you'll have to live with non-pixel perfect fonts between browsers until there is a complete monopoly by a single browser, a single OS with no available display setting choices, a single monitor type and size, and a single video card. In other words, it's never going to match pixels perfectly as long as your site supports multiple devices, browsers, displays, etc.
(Kudos for doing your own homework and testing first though. Your question was well researched and thought before asking. I wish we could have given you a better answer after all that work.)
Have you tried using the Reset at the top of your stylesheet file??
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
You can find the explanation & the code here: http://meyerweb.com/eric/tools/css/reset/
I hope this would help you!
Related
This is a little test page. On the desktop it looks normal to me.
<html>
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<style type="text/css">
div {
background: green;
font-size: 15px;
}
</style>
</head>
<body>
<div style="width:10%">10%</div>
<div style="width:20%">20%</div>
<div style="width:30%">30%</div>
<div style="width:40%">40%</div>
<div style="width:50%">50%</div>
<div style="width:60%">60%</div>
<div style="width:70%">70%</div>
<div style="width:80%">80%</div>
<div style="width:90%">90%</div>
<div style="width:100%">100%</div>
</body>
</html>
But on my iPhone it has a strange behavior. In portrait mode everything is ok. But in landscape mode the browser calculates different font sizes although they are all set to 15px. Is there something I don't understand about font-size? I need them to look all the same.
Same thing happens on firefox, edge and chrome
I looked on the apple.com web page to see if they have the same issue. And they don't.
They use
-webkit-text-size-adjust: 100%;
and then the font size is everywhere the same.
This is not an answer, but an attempt to provide more debugging details to others looking into the issue.
I reproduced the bug in a JSFiddle to easily inspect it in the official Simulator. To inspect the page as Simulator renders it, open the page in Simulator, then open Safari on the host system and go to Settings → Advanced → enable Show Develop Menu. Following this, you can use Develop → Simulator → Show to inspect the page.
Following the above, the bug is reproducable when the phone is in landscape mode.
Inspecting the page, the styles on the element are shown as they should be. However, looking at the computed styles, we can see that a new font-size value of 21px has appeared with no inheritance.
Following the style's reference simply takes us to the 15px font-size definition.
Setting !important or other alternative configurations seem to have no effect on this value.
Outside of a better explanation, I would recommend reporting this as a bug in Safari.
To learn more and possibly find some clues, put an ID on the div and adjust your CSS accordingly. See if the result changes. This should not be needed, but playing around and trying things usually reveals some clue.
Also, what happens if you move font-size:15px; to the div element (next to the width property) ? If these alternatives work, you can see them as a way to circumvent the fault.
CSS has features specifically to support printing, designed for user agents intended for printing, the best known of which is probably Prince. Alas, browsers aren't such user agents, and Prince is expensive ($500 for the desktop version).
So I started looking into a closely-related problem: Whether it would be possible to produce properly paginated and formatted output using the print feature of a browser (Chrome, in my case), where the user agent (the browser) outputs to the screen, not to a printer, although it is able to print the contents of the browser window. (That's not the same thing as being a user agent for printing.) As anyone who's tried it finds out, Chrome (and probably other browsers) doesn't support the CSS #page rule. That means there's no practical way to, for example, distinguish between left and right pages, but in my case that didn't matter.
All I needed was:
Paginated output, and
Precise control over placement on the printed page.
Normally, when you print a browser page exact formatting isn't important. Think of a shipping label, a boarding pass, or notes for a meeting. But, in my case, the printed page is the critical part, and the browser rendition is merely a preview. Specifically, I was trying to prepare a PDF for a photo book for uploading to MagCloud, an on-demand magazine printing service (owned by Blurb, the book-printing people).
(Many apps, like Lightroom, have book layout capabilities, but for reasons not germane to this post I couldn't use any of them.)
So my question, which I'm also going to answer is: What's a simple way to produce precise printed output from a browser?
I found that, while Chrome doesn't support #page, it does support the page-break-before style. So, to get paginated printed output, all you have to do is something like this:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.page {
position: relative;
page-break-before: always;
width: 5.5in;
height: 8.5in;
}
.inner {
position: relative;
top: .25in;
left: .25in;
width: 5in;
height: 8in;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class=page>
<div class=inner>
<p>This is page one.
</div>
</div>
<div class=page>
<div class=inner>
<p>This is page two.
</div>
</div>
</body>
</html>
Note that I'm using inches instead of pixels, thus neatly avoiding the issue of the resolution of the printed page in pixels. (It happens to be 96, but I'm not using that fact, and it might be different on different systems anyway.) Millimeters would work as well.
Here's how it looked in my browser:
I found that the built-in Windows 10 PDF print driver isn't accurate, producing pages that don't reflect the sizes I set in CSS. The free CutePDF Writer, however, is dead on, as is Mac OS X.
Here's the PDF in Acrobat Reader:
As you can see, it's perfect. All you have to do is lay out your content inside the <div class=inner> and you're set. If you want a full-page bleed, such as for a book-cover photo, put the content directly in the <div class=page>.
In my application I generated the actual HTML from a PHP program, but this static HTML illustrates the important concepts.
I'm using this CSS to style a div:
#mainSection .mainArticle .text {
width: 600px;
margin-top: 0px;
margin-left: 20px;
line-height: 26px;
color: white;
float: left;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
}
The image below shows the difference between Safari and Chrome:
I can't tell why it's this different. The font looks 'bolder' in Chrome, yet each character takes an tiny bigger length in Safari, meaning it sticks on average less chars on each line. Because the div box size is fixed length, the result is that the text ends too close to the bottom border.
I can't have variable length boxes. You can see the site here (go to MENTORING section):
enter link description here
Is there a convenient way around this problem? I know the font engine is different for each browser...
i think it is because the browser size is not same for all the browsers, and you have defined your CSS in terms of pixels., try to convert from pixels(px) to percentage(%) or em/rem values.
i hope this helps.
Safari renders open sans bolder than in chrome so you would need to apply a lighter font weight for safari Open Sans Google Web Fonts Rendering in Chrome
The reason is that whereas other browsers render the font at the exact size specified, Safari renders fonts in a series of steps.
I assume that the Apple team feels that fonts rendered at 10.3px look better than fonts that are rendered at 10.0px. (made up values).
The consequence is that you get different results between Safari and other browsers.
The easiest way to see this in action is to define a font size as a percentage, then slowly resize the window:
Test page at svija.love
In other browsers, the font will resize smoothly with the window. In Safari, the font size will increase in a series of jumps.
I am looking for a workaround for this (help, somebody!) because this behavior is screwing up my layouts and making it look like I have spelling errors at Ozake.com.
[update fall 2021] I wrote a program that combines the various text blocks into a single line, eliminating spacing problems. See svija.love for more information.
i'm struggling with the fact that webkit browsers like safari won't support letter-spacing smaller than 1 pixel. is there any solution yet?
i was thinking about converting my font and adding letterspacing directly to that new font:
would this work and any ideas if there's a converter which supports that?
thanks
You could always use em's.
letter-spacing: 0.5em;
I tested the following on Safari and Chrome (Win 7):
<style>
.foo { letter-spacing: 0.7px; }
</style>
Hello world! This is sample text.
<div class=foo>Hello world! This is sample text.</div>
Initially the difference is barely noticeable, but if you zoom by Ctrl + you will see that the second text gets visibly wider, due to slighly larger letter spacing.
The quality of implementation might be subject to debate, but the support is there.
On the other hand, if you don’t like the natural appearance of a font, with spacing as caused designer’s decisions, use a different font. Mechanically increasing all letter spacing in text expresses distrust in font design and is a coarse tool. Letter spacing might be needed in special occasions for short texts, though—but less than a pixel is hardly useful then.
Sure they do. Try 0, -1px, etc.
Demo: http://jsbin.com/ovepan/edit#html,live
Output:
HTML:
<p id="one">Letter spacing 1px</p>
<p id="zero">Letter spacing 0px</p>
<p id="negative-one">Letter spacing -1px</p>
CSS:
#one {letter-spacing: 1px }
#zero {letter-spacing: 0px }
#negative-one {letter-spacing: -1px }
I can get a header to print on each page, but I'm new to print margins. I thought the #page css would work, but it does not seem to affect page margins. If I set the margins on the body, it works on page one, but subsequent pages start the top margin at the default, putting the header over top of the text.
<style>
.header {
position: fixed;
top: 0;
}
#page {
size: 11in 17in;
margin-left: 1in;
margin-right: 1in;
margin-top: 1in;
margin-bottom: 1in;
}
</style>
<body>
<span class=header>This is the header</span>
This is the text of the document. (repeat until I get to page 2)
</body>
Printing support by all browsers is very poorly supported with horrendous bugs in many popular browsers that have gone unfixed for years.
The short answer is to avoid HTML/CSS printing if you need to ensure a specific layout. Use PDF, possibly dynamically generated on-demand. There's various PDF generator APIs such as iTextSharp. It's possible to print from Flash, but only if Flash is installed and working (i.e. no Flashblock, iOS).
HTML/CSS printing should be restricted to simple layouts. Form printing is a nightmare with fieldset & legend support being especially problematic (particularly on Firefox). Interestingly printing support is best on the internet explorers.
The CSS3 printing support specification hasn't been completed and is some time off.
General principles:
No backgrounds or background CSS images are supported (by default - users can change their browser settings for an intranet application). Only foreground images print.
Widths need to be fluid as page sizes vary around the planet. US Letter format is shorter and wider than A4 layout
All browsers support printing in different ways. Bugs are legion.
Test using print preview.
The accepted answer which is now 4 1/2 years old says:
"The short answer is to avoid HTML/CSS printing if you need to ensure a specific layout."
These days you may do HTML/CSS printing for comparatively simple layouts in browsers or if you use a tool like wkhtmltopdf you can go for more complex layouts. See also http://www.toccon.com/toc2013/public/schedule/detail/26714