Compensating for larger font under Opera

I am working on a page at www.mauitradewinds.com/Test/StarWind.htm   The layout is coming together under all major browsers except Opera.  Because the font is rendered larger under Opera, labels do not fit on form buttons, and captions are not centered.  Font size is determined by CSS (file attached).  Is there a way to reduce the font sizes when the viewer's browser is Opera? style.css
LVL 1
ddantesAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hankknightCommented:
Actually, the problem runs deeper than just an Opera compatibility issue.  If a user does not have the exact font installed they could face the same problem regardless of what browser they were using.  So it would be a bad approach to use conditionals for Opera.

I recommend that you either:
Option 1: Use Google Web Fonts to ensure that the font is exactly the same on all modern browsers:
http://www.google.com/webfonts

OR

Option 2: place one line of hidden text somewhere and use JavaScript to measure its dimensions.  Base your conditionals on that.
0
ddantesAuthor Commented:
Thank you for your comment.  Could you clarify a couple of things please?
1. For Oprtion1, must I rely on a font which is maintained on Google's server, or can I distribtue it from my own server?  If that is possible, how can I do that?

2. For Option2, can you provide more detail?  I don't understand how to implement that option.
0
hankknightCommented:
You may host Google Web Fonts on your own server if you wish.

After selecting a Font from the Google Web Fonts website, click on the "Use" tab then click on "Download your Collection".  The ZIP archive file you download will contain the font in True Type (.ttf) format.

You will need to convert the font to OpenType (EOT) format.
You can do that here:
http://www.kirsle.net/wizards/ttf2eot.cgi

Upload BOTH the ttf and oet versions to your website.

Add them to your CSS like this:

@font-face {
  font-family: 'Questrial';
  src: url('Questrial.eot?') format('eot'), url('Questrial.ttf') format('truetype');
}

Open in new window


0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

nap0leonCommented:
For major browsers, I like to use either of the following, depending on whether I want serfs or not (the little ticks at the edges of the letters):

For non-serif:
font-family:Helvetica, Arial, "Nimbus Sans L", sans-serif;

For serif::
font-family:"Times New Roman",Georgia,Serif;

Since you are using Times New Roman for most everything, just update those lines with the list above and re-check.  THe non-serif list may be OK to use where you have Comic Sans Serif declared, but I am not sure if the fonts are similar size or not.
0
ddantesAuthor Commented:
nap0leon:  Thank you for your comment.  I replaced "Times New Roman" with  "Times New Roman",Georgia,Serif;  in every instance on my style sheet.  Unfortunately, the same issue persists under Opera.  
hankknight: Thank you for those details.  I will try that and post again.
0
hankknightCommented:
Here is an example of my option 2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style type="text/css">
#oneLine {
font-size: 13px;
}
</style>

<script type="text/javascript">
/*<![CDATA[*/

$(document).ready(function() {
 if ($('#oneLine').width()>431 || $('#oneLine').height()>15) $('#oneLine').css('fontSize','10px');
});

/*]]>*/
</script>

</head>
<body>

<h1>Hello World</h1>

<p>
<span id="oneLine">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</span>
</p>

</body>
</html>

Open in new window

0
ddantesAuthor Commented:
Having a little difficulty: the font my browser displays is still Times New Roman.  Here is a sample code section from the revised style sheet:
.basicText{
font-weight: bold;
 font-family: 'Mate-Regular';
  src: url('fonts/Mate-Regular.eot?') format('eot'), url('fonts/Mate-Regular.ttf') format('truetype');

In case the path to the font file must be stated with respect to the html page, and not to the stylesheet, I also tried:  url('CSS/fonts/Mate-Regular...) etc.
0
ddantesAuthor Commented:
My last comment was posted as you were posting two comments.
0
ddantesAuthor Commented:
Thank you for the code for Option 2.  How do I apply that to this situation?
0
hankknightCommented:
That code I posted will make the text smaller in browsers that display it larger.  Test it.

You cannot implement custom fonts like the way you tried.  You must define the font using font-face, like this:
@font-face {
  font-family: 'MateRegular';
  src: url('fonts/Mate-Regular.eot?') format('eot'), url('fonts/Mate-Regular.ttf') format('truetype');
}

.basicText{
 font-weight: normal;
 font-family: 'MateRegular';
 font-size: 14px;
}

Open in new window

0
ddantesAuthor Commented:
Understood.  I have the Google font working now, but it didn't solve the dilemma (see image). Font rendering in IE versus Opera
0
ddantesAuthor Commented:
I tried the javascript text resizer, but Opera still magnifies the font (image embedded). Javascript test
0
ddantesAuthor Commented:
Thank you.  I am studying this method now.  Before I get too far into it, could you clarify a point?   There are two main areas where the font size becomes critical:  form text (such as buttons) and caption text (below photographs).  These forms and captions are not of a uniform size.  On first glance, it appears that the style sheet must declare a width for the text to fit into.  Since there is a range of widths, is there a way to make this process efficient, or must I have a unique "box"  with its own div id for every caption and button?
0
hankknightCommented:
That method would require you to have a unique ID for each caption and button.
0
ddantesAuthor Commented:
Thank you for clarifying that.  Let me test the system on a single item and post again...
0
ddantesAuthor Commented:
The text-fit-in-box script, unfortunately, did not prevent Opera from enlarging font and overflowing the box. Javascript text-fit results
0
nap0leonCommented:
BTW, page looks fine to me in Operaeven when I magnify it, everything grows, including the image, so the text still fits perfectly.  Perhaps your default font sizes are jacked up in your settings? (I was unable to find a setting I could change that produces what you are seeing.)

Altering the style definitions in the developer tools, your font declaration of "medium" (on my machine), is identical to setting it at 16px whereas your picture is what happens if I set it to 20px

   Opera
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ddantesAuthor Commented:
Thank you for your comment.  I have a laptop with Opera, and it doesn't enlarge the fonts.  But another laptop, and two desktops, do enlarge them.  I've looked at the settings -- Times New Roman is the default setting.  The minimum font size is 9px.  The zoon is set at 100%.   What setting might be responsible for the font enlargement?
0
ddantesAuthor Commented:
Additional note:  This problem seems to happen only on machines running Windows 7.  Under Windows XP, the font is rendered normally.  On a Windows 7 machine I uninstalled Opera, removed all references from the registry, then reinstalled version 11.52.  The over-size fonts are there.
0
ddantesAuthor Commented:
Someone published the following "CSS hack" for Opera -- is it relevant to this issue?

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    #my-id { clear:right; }
}
0
ddantesAuthor Commented:
Problem solved.  I had set my display settings to "125%", which apparenty affects fonts in Opera, but not in other browsers.  With display set to 100%, the font size in Opera is rendered the same as other major browsers.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.