Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #20005 > unrolled thread

How to control font size of iframe with Safari?

Back to article view | Back to comp.lang.javascript

Contents

  How to control font size of iframe with Safari? justaguy <lichunshen84@gmail.com> - 2013-05-28 09:30 -0700
    Re: How to control font size of iframe with Safari? JJ <duh@nah.meh> - 2013-05-29 05:23 +0700
      Re: How to control font size of iframe with Safari? justaguy <lichunshen84@gmail.com> - 2013-05-28 15:56 -0700
    Re: How to control font size of iframe with Safari? Fred <fr-icsr@numericable.fr> - 2013-05-29 12:10 +0200

#20005 — How to control font size of iframe with Safari?

Hi,

I have an iframe.  See code below.

<iframe id="longtext" name="longtext" onload="setThings();document.getElementById('longtext').contentDocument.designMode='on';document.getElementById('longtext').contentWindow.document.body.style.color='#444';" contenteditable="true" style="border:1px dotted;background-color:##EFF9FC;float:left; font:11px Tahoma, Geneva, sans-serif; width:450;height:420" tabindex="2"></iframe>

The text font looks good with Chrome 27 and Firefox 20 (font size smallish, probably 9px something) but with Safari 5 the font looks way too big, terrible.
So, I changed the above code to:

<iframe id="longtext" name="longtext" onload="setThings();document.getElementById('longtext').contentDocument.designMode='on';document.getElementById('longtext').contentWindow.document.body.style.color='#444';" contenteditable="true" style="border:1px dotted;background-color:##EFF9FC;float:left; font:9px Tahoma, Geneva, sans-serif; width:450;height:420" tabindex="2"></iframe> 

But with Safari, the font size is still way too big for the iframe,
how come?
do I need to add
document.getElementById('longtext').contentWindow.document.body.style.font='9px Tahoma, Geneva, sans-serif' ?
to make Safari work?

Many thanks.

 

[toc] | [next] | [standalone]

#20021

On Tue, 28 May 2013 09:30:50 -0700 (PDT), justaguy wrote:
> I have an iframe.  See code below.
> 
> <iframe id="longtext" name="longtext" onload="setThings();document.getElementById('longtext').contentDocument.designMode='on';document.getElementById('longtext').contentWindow.document.body.style.color='#444';" contenteditable="true" style="border:1px dotted;background-color:##EFF9FC;float:left; font:11px Tahoma, Geneva, sans-serif; width:450;height:420" tabindex="2"></iframe>
> 
> The text font looks good with Chrome 27 and Firefox 20 (font size smallish, probably 9px something) but with Safari 5 the font looks way too big, terrible.
> So, I changed the above code to:
> 
> <iframe id="longtext" name="longtext" onload="setThings();document.getElementById('longtext').contentDocument.designMode='on';document.getElementById('longtext').contentWindow.document.body.style.color='#444';" contenteditable="true" style="border:1px dotted;background-color:##EFF9FC;float:left; font:9px Tahoma, Geneva, sans-serif; width:450;height:420" tabindex="2"></iframe> 
> 
> But with Safari, the font size is still way too big for the iframe,
> how come?

Because web browsers uses different web rendering engine and each using different font rendering library (and different version). Font appearance can be different across these engines. They may look alike, but they won't match exactly, particularly the font size and display quality. Although both Chrome and Safari uses WebKit engine, Safari might have adjusted the font display using Mac's fonts.

> do I need to add
> document.getElementById('longtext').contentWindow.document.body.style.font='9px Tahoma, Geneva, sans-serif' ?
> to make Safari work?

You might want to use the User Agent string to identify the browser and use different font size if it's Safari or others.
e.g.: (warning, long text)

document.getElementById('longtext').contentWindow.document.body.style.font=((/Safari/).test(navigator.userAgent)&&!(/Chrome/).test(navigator.userAgent))?'8px':'9px';

It'll use 8px for Safari or 9px for other browser.

[toc] | [prev] | [next] | [standalone]

#20024

On Tuesday, May 28, 2013 6:23:04 PM UTC-4, JJ wrote:
> On Tue, 28 May 2013 09:30:50 -0700 (PDT), justaguy wrote:
> 
> > I have an iframe.  See code below.
> 
> > 
> 
> > <iframe id="longtext" name="longtext" onload="setThings();document.getElementById('longtext').contentDocument.designMode='on';document.getElementById('longtext').contentWindow.document.body.style.color='#444';" contenteditable="true" style="border:1px dotted;background-color:##EFF9FC;float:left; font:11px Tahoma, Geneva, sans-serif; width:450;height:420" tabindex="2"></iframe>
> 
> > 
> 
> > The text font looks good with Chrome 27 and Firefox 20 (font size smallish, probably 9px something) but with Safari 5 the font looks way too big, terrible.
> 
> > So, I changed the above code to:
> 
> > 
> 
> > <iframe id="longtext" name="longtext" onload="setThings();document.getElementById('longtext').contentDocument.designMode='on';document.getElementById('longtext').contentWindow.document.body.style.color='#444';" contenteditable="true" style="border:1px dotted;background-color:##EFF9FC;float:left; font:9px Tahoma, Geneva, sans-serif; width:450;height:420" tabindex="2"></iframe> 
> 
> > 
> 
> > But with Safari, the font size is still way too big for the iframe,
> 
> > how come?
> 
> 
> 
> Because web browsers uses different web rendering engine and each using different font rendering library (and different version). Font appearance can be different across these engines. They may look alike, but they won't match exactly, particularly the font size and display quality. Although both Chrome and Safari uses WebKit engine, Safari might have adjusted the font display using Mac's fonts.
> 
> 
> 
> > do I need to add
> 
> > document.getElementById('longtext').contentWindow.document.body.style.font='9px Tahoma, Geneva, sans-serif' ?
> 
> > to make Safari work?
> 
> 
> 
> You might want to use the User Agent string to identify the browser and use different font size if it's Safari or others.
> 
> e.g.: (warning, long text)
> 
> 
> 
> document.getElementById('longtext').contentWindow.document.body.style.font=((/Safari/).test(navigator.userAgent)&&!(/Chrome/).test(navigator.userAgent))?'8px':'9px';
> 
> 
> 
> It'll use 8px for Safari or 9px for other browser.

Yes, I first detect User Agent (browser) to see what browser is being used... then assign different font size, for Safari 5 for Windows, I'm using font 11px, it's still smallish, a bit odd... not sure how it's going to behave for Safari 5 for Mac.

Thanks.

[toc] | [prev] | [next] | [standalone]

#20029

On 05/28/2013 06:30 PM, justaguy wrote:
> Hi,
>
> I have an iframe.  See code below.


Hi

may be you can change the zoom factor of the iframe?

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web