Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > User Scalable Text Using CSS?

Reply
Thread Tools

User Scalable Text Using CSS?

 
 
Cerebral Believer
Guest
Posts: n/a
 
      03-25-2006
Hi all,

I am keen to allow people who view my site to be able to resize the text in
their browsers (especially for people who need to read larger text). With
my old web-page I specified the point size in the HTML code, and noticed
that when using Internet Explorer the text could not be resized. In
designing my new site I have chosen to express the text sizes as percentages
in a stylesheet, e.g.

..side_panel_title {
font : bold 50% 'Trebuchet MS',
'Lucida Grande', Arial, sans-serif;
color : #990000;
}
..side_panel_text {
font : 50% 'Trebuchet MS', 'Lucida
Grande', Arial, sans-serif;
color : #373737;
}

I did this thinking that the viewers of my web-pages would be able to select
larger font sizes for viewing by adjusting their browser text settings.
However, when the page is rendered in Internet Explorer, the text only
appears in a readable size (the size I actually designed the page) when the
"View | Text Size | Largest" setting is selected. I had thought that users
would be able to increase the size text to a larger size than the sizes I
used to design the page in order to make the text easier to read - that is
what I want to achieve, that is the same effect as on the w3org site
http://www.w3.org/. What am I doing wrong? Or is what I am trying to
achieve not possible (this way)?

Regards,
C.B.


 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-25-2006
Cerebral Believer wrote:
> Hi all,
>
> I am keen to allow people who view my site to be able to resize the text in
> their browsers (especially for people who need to read larger text). With
> my old web-page I specified the point size in the HTML code, and noticed
> that when using Internet Explorer the text could not be resized. In
> designing my new site I have chosen to express the text sizes as percentages
> in a stylesheet, e.g.
>
> .side_panel_title {
> font : bold 50% 'Trebuchet MS',
> 'Lucida Grande', Arial, sans-serif;
> color : #990000;
> }
> .side_panel_text {
> font : 50% 'Trebuchet MS', 'Lucida
> Grande', Arial, sans-serif;
> color : #373737;
> }
>
> I did this thinking that the viewers of my web-pages would be able to select
> larger font sizes for viewing by adjusting their browser text settings.
> However, when the page is rendered in Internet Explorer, the text only
> appears in a readable size (the size I actually designed the page) when the
> "View | Text Size | Largest" setting is selected. I had thought that users
> would be able to increase the size text to a larger size than the sizes I
> used to design the page in order to make the text easier to read - that is
> what I want to achieve, that is the same effect as on the w3org site
> http://www.w3.org/. What am I doing wrong?


font: bold 50% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
^^^^
THAT! 50% in incredibly small!

BODY { font-size: 100%; }
..anything_else not smaller than 75%, 80% is usually the preferred
smallest for stuff like boilerplate.

Or is what I am trying to
> achieve not possible (this way)?



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
 
Cerebral Believer
Guest
Posts: n/a
 
      03-25-2006

"Jonathan N. Little" <(E-Mail Removed)> wrote in message
news:44255fbb$0$3700$(E-Mail Removed).. .
> Cerebral Believer wrote:
>> Hi all,
>>
>> I am keen to allow people who view my site to be able to resize the text
>> in their browsers (especially for people who need to read larger text).
>> With my old web-page I specified the point size in the HTML code, and
>> noticed that when using Internet Explorer the text could not be resized.
>> In designing my new site I have chosen to express the text sizes as
>> percentages in a stylesheet, e.g.
>>
>> .side_panel_title {
>> font : bold 50% 'Trebuchet MS',
>> 'Lucida Grande', Arial, sans-serif;
>> color : #990000;
>> }
>> .side_panel_text {
>> font : 50% 'Trebuchet MS', 'Lucida
>> Grande', Arial, sans-serif;
>> color : #373737;
>> }
>>
>> I did this thinking that the viewers of my web-pages would be able to
>> select larger font sizes for viewing by adjusting their browser text
>> settings. However, when the page is rendered in Internet Explorer, the
>> text only appears in a readable size (the size I actually designed the
>> page) when the "View | Text Size | Largest" setting is selected. I had
>> thought that users would be able to increase the size text to a larger
>> size than the sizes I used to design the page in order to make the text
>> easier to read - that is what I want to achieve, that is the same effect
>> as on the w3org site http://www.w3.org/. What am I doing wrong?

>
> font: bold 50% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
> ^^^^
> THAT! 50% in incredibly small!
>
> BODY { font-size: 100%; }
> .anything_else not smaller than 75%, 80% is usually the preferred smallest
> for stuff like boilerplate.


Yes, thanks for that you are right, that text size is small. I had used
that size because, given the way I had formed my CSS & HTML, it rendered the
way I prefer to see it in my browser, but since I modified my CSS the way
you suggested I can see why I should use a larger size. The only issue I
have now is that the text does appear to be bold when in larger sizes, and I
would have liked to keep the text in the same weight as I would usually see
it on my screen, I will experiemnt with the font-weight.

Thanks very much for your help.
C.B.


 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      03-25-2006
Cerebral Believer wrote:

>> Cerebral Believer wrote:
>>> .side_panel_title {
>>> font: bold 50% 'Trebuchet MS', ... <snip>

>
> The only issue I have now is that the text does appear to be bold when
> in larger sizes, and I would have liked to keep the text in the same
> weight as I would usually see it on my screen, I will experiemnt with
> the font-weight.


Remove 'bold' from your css and it won't be .. er .. 'bold' anymore.

--
-bts
-Warning: I brake for lawn deer
 
Reply With Quote
 
Carolyn Marenger
Guest
Posts: n/a
 
      03-25-2006
Cerebral Believer wrote:

>
> "Jonathan N. Little" <(E-Mail Removed)> wrote in message
> news:44255fbb$0$3700$(E-Mail Removed).. .
>> Cerebral Believer wrote:
>>> Hi all,
>>>
>>> I am keen to allow people who view my site to be able to resize the text
>>> in their browsers (especially for people who need to read larger text).
>>> With my old web-page I specified the point size in the HTML code, and
>>> noticed that when using Internet Explorer the text could not be resized.
>>> In designing my new site I have chosen to express the text sizes as
>>> percentages in a stylesheet, e.g.
>>>
>>> .side_panel_title {
>>> font : bold 50% 'Trebuchet MS',
>>> 'Lucida Grande', Arial, sans-serif;
>>> color : #990000;
>>> }
>>> .side_panel_text {
>>> font : 50% 'Trebuchet MS',
>>> 'Lucida
>>> Grande', Arial, sans-serif;
>>> color : #373737;
>>> }
>>>
>>> I did this thinking that the viewers of my web-pages would be able to
>>> select larger font sizes for viewing by adjusting their browser text
>>> settings. However, when the page is rendered in Internet Explorer, the
>>> text only appears in a readable size (the size I actually designed the
>>> page) when the "View | Text Size | Largest" setting is selected. I had
>>> thought that users would be able to increase the size text to a larger
>>> size than the sizes I used to design the page in order to make the text
>>> easier to read - that is what I want to achieve, that is the same effect
>>> as on the w3org site http://www.w3.org/. What am I doing wrong?

>>
>> font: bold 50% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
>> ^^^^
>> THAT! 50% in incredibly small!
>>
>> BODY { font-size: 100%; }
>> .anything_else not smaller than 75%, 80% is usually the preferred
>> smallest for stuff like boilerplate.

>
> Yes, thanks for that you are right, that text size is small. I had used
> that size because, given the way I had formed my CSS & HTML, it rendered
> the way I prefer to see it in my browser, but since I modified my CSS the
> way
> you suggested I can see why I should use a larger size. The only issue I
> have now is that the text does appear to be bold when in larger sizes, and
> I would have liked to keep the text in the same weight as I would usually
> see it on my screen, I will experiemnt with the font-weight.
>
> Thanks very much for your help.
> C.B.


Why not leave the font setting at 100% and adjust your browser so it looks
good to you on your system. Then it will also look good to everyone else
when they see it on theirs at their ideal font size. This is assuming of
course that they have their default font size set to their ideal.

Carolyn

--
Carolyn Marenger

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-25-2006
Cerebral Believer wrote:
> "Jonathan N. Little" <(E-Mail Removed)> wrote in message
> news:44255fbb$0$3700$(E-Mail Removed).. .
>> Cerebral Believer wrote:
>>> Hi all,
>>>
>>> I am keen to allow people who view my site to be able to resize the text
>>> in their browsers (especially for people who need to read larger text).
>>> With my old web-page I specified the point size in the HTML code, and
>>> noticed that when using Internet Explorer the text could not be resized.
>>> In designing my new site I have chosen to express the text sizes as
>>> percentages in a stylesheet, e.g.
>>>
>>> .side_panel_title {
>>> font : bold 50% 'Trebuchet MS',
>>> 'Lucida Grande', Arial, sans-serif;
>>> color : #990000;
>>> }
>>> .side_panel_text {
>>> font : 50% 'Trebuchet MS', 'Lucida
>>> Grande', Arial, sans-serif;
>>> color : #373737;
>>> }
>>>
>>> I did this thinking that the viewers of my web-pages would be able to
>>> select larger font sizes for viewing by adjusting their browser text
>>> settings. However, when the page is rendered in Internet Explorer, the
>>> text only appears in a readable size (the size I actually designed the
>>> page) when the "View | Text Size | Largest" setting is selected. I had
>>> thought that users would be able to increase the size text to a larger
>>> size than the sizes I used to design the page in order to make the text
>>> easier to read - that is what I want to achieve, that is the same effect
>>> as on the w3org site http://www.w3.org/. What am I doing wrong?

>> font: bold 50% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
>> ^^^^
>> THAT! 50% in incredibly small!
>>
>> BODY { font-size: 100%; }
>> .anything_else not smaller than 75%, 80% is usually the preferred smallest
>> for stuff like boilerplate.

>
> Yes, thanks for that you are right, that text size is small. I had used
> that size because, given the way I had formed my CSS & HTML, it rendered the
> way I prefer to see it in my browser, but since I modified my CSS the way
> you suggested I can see why I should use a larger size. The only issue I
> have now is that the text does appear to be bold when in larger sizes, and I
> would have liked to keep the text in the same weight as I would usually see
> it on my screen, I will experiemnt with the font-weight.
>


Actually Toby had a very good argument and demo on default font size:

http://tobyinkster.co.uk/web-fonts
Fonts Toby Inkster
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Cerebral Believer
Guest
Posts: n/a
 
      03-25-2006

"Beauregard T. Shagnasty" <(E-Mail Removed)> wrote in message
news:rLdVf.27491$(E-Mail Removed)...
> Cerebral Believer wrote:
>
>>> Cerebral Believer wrote:
>>>> .side_panel_title {
>>>> font: bold 50% 'Trebuchet MS', ... <snip>

>>
>> The only issue I have now is that the text does appear to be bold when
>> in larger sizes, and I would have liked to keep the text in the same
>> weight as I would usually see it on my screen, I will experiemnt with
>> the font-weight.

>
> Remove 'bold' from your css and it won't be .. er .. 'bold' anymore.


Yes, of course that makes sense, it was another poster who suggested the use
of "bold", which I thought sounded a little odd. After checking w3c I can
see I can use "normal" instead. Thanks for your response.

Regards,
C.B.


 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      03-25-2006
Cerebral Believer wrote:

> "Beauregard T. Shagnasty" <(E-Mail Removed)> wrote
>> Remove 'bold' from your css and it won't be .. er .. 'bold' anymore.

>
> Yes, of course that makes sense, it was another poster who suggested
> the use of "bold", which I thought sounded a little odd. After
> checking w3c I can see I can use "normal" instead. Thanks for your
> response.


"normal" is the default, so you do not have to mention it at all.

--
-bts
-Warning: I brake for lawn deer
 
Reply With Quote
 
Cerebral Believer
Guest
Posts: n/a
 
      03-25-2006

"Carolyn Marenger" <(E-Mail Removed)> wrote in message
news:265d6$442569f4$cf701c97$(E-Mail Removed)...
> Cerebral Believer wrote:
>
>>
>> "Jonathan N. Little" <(E-Mail Removed)> wrote in message
>> news:44255fbb$0$3700$(E-Mail Removed).. .
>>> Cerebral Believer wrote:
>>>> Hi all,
>>>>
>>>> I am keen to allow people who view my site to be able to resize the
>>>> text
>>>> in their browsers (especially for people who need to read larger text).
>>>> With my old web-page I specified the point size in the HTML code, and
>>>> noticed that when using Internet Explorer the text could not be
>>>> resized.
>>>> In designing my new site I have chosen to express the text sizes as
>>>> percentages in a stylesheet, e.g.
>>>>
>>>> .side_panel_title {
>>>> font : bold 50% 'Trebuchet MS',
>>>> 'Lucida Grande', Arial, sans-serif;
>>>> color : #990000;
>>>> }
>>>> .side_panel_text {
>>>> font : 50% 'Trebuchet MS',
>>>> 'Lucida
>>>> Grande', Arial, sans-serif;
>>>> color : #373737;
>>>> }
>>>>
>>>> I did this thinking that the viewers of my web-pages would be able to
>>>> select larger font sizes for viewing by adjusting their browser text
>>>> settings. However, when the page is rendered in Internet Explorer, the
>>>> text only appears in a readable size (the size I actually designed the
>>>> page) when the "View | Text Size | Largest" setting is selected. I had
>>>> thought that users would be able to increase the size text to a larger
>>>> size than the sizes I used to design the page in order to make the text
>>>> easier to read - that is what I want to achieve, that is the same
>>>> effect
>>>> as on the w3org site http://www.w3.org/. What am I doing wrong?
>>>
>>> font: bold 50% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
>>> ^^^^
>>> THAT! 50% in incredibly small!
>>>
>>> BODY { font-size: 100%; }
>>> .anything_else not smaller than 75%, 80% is usually the preferred
>>> smallest for stuff like boilerplate.

>>
>> Yes, thanks for that you are right, that text size is small. I had used
>> that size because, given the way I had formed my CSS & HTML, it rendered
>> the way I prefer to see it in my browser, but since I modified my CSS the
>> way
>> you suggested I can see why I should use a larger size. The only issue I
>> have now is that the text does appear to be bold when in larger sizes,
>> and
>> I would have liked to keep the text in the same weight as I would usually
>> see it on my screen, I will experiemnt with the font-weight.
>>
>> Thanks very much for your help.
>> C.B.

>
> Why not leave the font setting at 100% and adjust your browser so it looks
> good to you on your system. Then it will also look good to everyone else
> when they see it on theirs at their ideal font size. This is assuming of
> course that they have their default font size set to their ideal.


Carolyn,

Yes, I think you have seen through my faulty logic. I actually think the
page looks best in a small font size and want everyone else to see it that
way by default. I had thought IE scaled the text sizes up/down relative to
the text sizes in which the page was designed - I now understand this is not
correct. I am new to this and I guess it shows, but that is all part of
learning, right? Thanks for your advice.

Regards,
C.B.


 
Reply With Quote
 
Harlan Messinger
Guest
Posts: n/a
 
      03-25-2006
Cerebral Believer wrote:
> Hi all,
>
> I am keen to allow people who view my site to be able to resize the text in
> their browsers (especially for people who need to read larger text). With
> my old web-page I specified the point size in the HTML code, and noticed
> that when using Internet Explorer the text could not be resized. In
> designing my new site I have chosen to express the text sizes as percentages
> in a stylesheet, e.g.
>
> .side_panel_title {
> font : bold 50% 'Trebuchet MS',
> 'Lucida Grande', Arial, sans-serif;
> color : #990000;
> }
> .side_panel_text {
> font : 50% 'Trebuchet MS', 'Lucida
> Grande', Arial, sans-serif;
> color : #373737;
> }
>
> I did this thinking that the viewers of my web-pages would be able to select
> larger font sizes for viewing by adjusting their browser text settings.
> However, when the page is rendered in Internet Explorer, the text only
> appears in a readable size (the size I actually designed the page) when the
> "View | Text Size | Largest" setting is selected. I had thought that users
> would be able to increase the size text to a larger size than the sizes I
> used to design the page in order to make the text easier to read - that is
> what I want to achieve, that is the same effect as on the w3org site
> http://www.w3.org/. What am I doing wrong? Or is what I am trying to
> achieve not possible (this way)?


I don't understand--how, other than a browser, are you examining your
work while designing it, that it could look different than it does in a
browser?

What is the base text size, that the side panel is supposed to be 50% of?
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Scalable Application Design =?Utf-8?B?VGVycnkgSG9sbGFuZA==?= ASP .Net 3 03-18-2006 08:19 AM
Scalable web architecture with ASP.NET 2.0 =?Utf-8?B?QnJlbnQgQm9yb3Zhbg==?= ASP .Net 3 12-12-2005 05:12 PM
scalable state-management John Grandy ASP .Net 1 03-18-2005 02:52 PM
help request: css positioning & text bg scalable image Ilya HTML 9 06-30-2004 02:24 PM
Scalable Vector Graphics (SVG) - compute text size James-Hughes XML 1 07-24-2003 03:53 PM



Advertisments