473,386 Members | 1,609 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

dynamic sizing text

I am working on a browser kiosk needs to be able to be run at multiple
screen resolutions. What I would like to do is keep the text the same
size relative to the screen, all the time.

In other words, lets say there is a table with 10 rows and 4 columns
that is centered with a 5% of the screen as a boarder around it. If
you have two 17 inch monitors, one at 1024x768 and the other at
1280x1024 sitting next to each other, I would like the table and the
text to appear the same physical size on both monitors.

I believe the table is straight forward, using percentages, but is
there some way (I am thinking that I might want to be using one of
those fancy units other then px or pt) to scale the text so it appears
the same size on both monitors?

Cartoper

Sep 6 '07 #1
21 2849
Scripsit Cartoper:
I am working on a browser kiosk needs to be able to be run at multiple
screen resolutions. What I would like to do is keep the text the same
size relative to the screen, all the time.
What makes you think this is an HTML issue?
I would like the table and the
text to appear the same physical size on both monitors.
Why? If you simply do nothing to set any font size (though you might set
body { font-size: 100% } in CSS to overcome some browser bugs), the user
will be able to choose the font size at least in a coarse way, unless you
take extra trouble to prevent that. Just include simple instructions on this
near the kiosk.

Anyway, this does not belong to c.i.w.a.html.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Sep 6 '07 #2
On 9/6/2007 12:28 PM, Jukka K. Korpela wrote:
Scripsit Cartoper:
>I am working on a browser kiosk needs to be able to be run at multiple
screen resolutions. What I would like to do is keep the text the same
size relative to the screen, all the time.

What makes you think this is an HTML issue?
> I would like the table and the
text to appear the same physical size on both monitors.

Why? If you simply do nothing to set any font size (though you might set
body { font-size: 100% } in CSS to overcome some browser bugs), the user
will be able to choose the font size at least in a coarse way, unless you
take extra trouble to prevent that. Just include simple instructions on this
near the kiosk.

Anyway, this does not belong to c.i.w.a.html.
In a kiosk, the user usually has little ability to choose viewing
properties, including adjusting font sizes. This is one of the few
instances where the developer must set font sizes.

If this is not something that can be handled via HTML (and I doubt if it
can), a proper response to a request for help would be to point the
original poster to a valid source of information. After all, you might
someday need help, too. When that happens, do you want to be dismissed
abruptly just because you don't know where to ask?

--

David E. Ross
<http://www.rossde.com/>.

Anyone who thinks government owns a monopoly on inefficient, obstructive
bureaucracy has obviously never worked for a large corporation. © 1997
Sep 6 '07 #3
On 9/6/2007 12:14 PM, Cartoper wrote:
I am working on a browser kiosk needs to be able to be run at multiple
screen resolutions. What I would like to do is keep the text the same
size relative to the screen, all the time.

In other words, lets say there is a table with 10 rows and 4 columns
that is centered with a 5% of the screen as a boarder around it. If
you have two 17 inch monitors, one at 1024x768 and the other at
1280x1024 sitting next to each other, I would like the table and the
text to appear the same physical size on both monitors.

I believe the table is straight forward, using percentages, but is
there some way (I am thinking that I might want to be using one of
those fancy units other then px or pt) to scale the text so it appears
the same size on both monitors?

Cartoper
I'm assuming that the kiosks are part of an intranet (not Internet)
where both the kiosk configurations and the server are both under the
same controlled configuration.

First, you need to determine which kiosk monitor is requesting the page
or at least the characteristics of the kiosk monitor. I have seen
statistics that indicate there is a way to do this in general, but I
don't know how. In your case, however, if your monitors have fixed IP
addresses or IDs, you can use those.

If your server is Apache, you can use server-side includes (SSIs) to
check the monitor ID or IP address and embed the appropriate CSS into
the HTML file being served. The embedded CSS should contain the
necessary font-sizing specifications.

The IP address of a Web client is Apache environment variable
REMOTE_ADDR. The ID of a kiosk can be set in the kiosk's browser as
part of its user agent (UA) string unique to each kiosk; the UA string a
Web client is Apache environment variable HTTP_USER_AGENT.

For this to work, the SSI script will need to do a table look-up on each
ID or IP address to determine which CSS fragment to embed within the
HTML. Then, if a kiosk's monitor is changed, the lookup table will
require a corresponding change.

--

David E. Ross
<http://www.rossde.com/>.

Anyone who thinks government owns a monopoly on inefficient, obstructive
bureaucracy has obviously never worked for a large corporation. © 1997
Sep 6 '07 #4
On 2007-09-06, Cartoper <ca******@gmail.comwrote:
I am working on a browser kiosk needs to be able to be run at multiple
screen resolutions. What I would like to do is keep the text the same
size relative to the screen, all the time.

In other words, lets say there is a table with 10 rows and 4 columns
that is centered with a 5% of the screen as a boarder around it. If
you have two 17 inch monitors, one at 1024x768 and the other at
1280x1024 sitting next to each other, I would like the table and the
text to appear the same physical size on both monitors.

I believe the table is straight forward, using percentages, but is
there some way (I am thinking that I might want to be using one of
those fancy units other then px or pt) to scale the text so it appears
the same size on both monitors?
You can just set a font-size in inches (in) or cm.

How well the result will tally with exact numbers of wavelengths of
Helium-Neon laser light in a vacuum depends on how the kiosk and browser
are set up, but it's worth a try.

What's the browser and kiosk OS?
Sep 6 '07 #5
Ben C wrote about setting a font size proportional to the screen size in a
kiosk:
You can just set a font-size in inches (in) or cm.

How well the result will tally with exact numbers of wavelengths of
Helium-Neon laser light in a vacuum depends on how the kiosk and browser
are set up, but it's worth a try.
I think that most user agents stupidly assume that any screen has 72
pixels per inch.
Since a point is 1/72th of inch, these user agents assume 1 point == 1
pixel.

Moreover, I think that that it isn't exactly what Cartoper wants.
He wants that, for a 15 inch screen, the font size so proportionally
smaller than for a 17 inch screen.

Cartoper wrote:
What I would like to do is keep the text the same size relative to the
screen, all the time.
Ben C wrote:
It's worth a try.
Yes.
What's the browser and kiosk OS?
Good question.
If the browser supports JavaScript and if it's not foolish to enable it,
then, it might be possible to dynamically modify the font size from the
screen size got in the JavaScript.
The browser may support something like the window.screen.width and
window.screen.height properties provided by Internet Explorer.

However, this would be an ugly hack.

--
You can contact me at <ta*****************@yahoDELETETHATo.fr>
Sep 6 '07 #6
On Sep 6, 5:41 pm, "André Gillibert"
<tabkanDELETETHIS...@yahodeletethato.frwrote:
Moreover, I think that that it isn't exactly what Cartoper wants.
He wants that, for a 15 inch screen, the font size so proportionally
smaller than for a 17 inch screen.
You are correct, I don't mind if the font size is different sizes on
physically different size monitors, I just want to keep the font size
the same on one monitor regardless of the screen resolution.

On Sep 6, 4:03 pm, "David E. Ross" <nob...@nowhere.notwrote:
>
I'm assuming that the kiosks are part of an intranet (not Internet)
where both the kiosk configurations and the server are both under the
same controlled configuration.
This is correct, it is on a intranet.

On Sep 6, 4:45 pm, Ben C <spams...@spam.eggswrote:
What's the browser and kiosk OS?
The first phase of development is targeting a specific kiosk browser,
currently IE7. With the new version I am coding for Firefox. I will
be moving the kiosk browser to Firefox before the next release.

I am a ISV and it is my customers that will be setting up and
configuring my kiosk system. The issue I am currently having is that
customers are running the kiosk at all possible resolutions between
1024x768 and 1920x1200. As we all know, users are not always the
brights folks in the world, so I can imagine that some will set up the
two kiosk systems, side by side at different resolutions! I know from
experience that a lot of folks can not tell the difference between
1024x768 and 1280x1024. More importantly then just easing my
customer's life, I want to present a consistent look and feel across
all resolutions. In other words, when a customer runs the kiosk on a
30" monitor, which one will sooner or later, I want it to look like it
does on a more normal sized wide screen.

As I said the target browser is Firefox, but... In future versions of
the software, users will be able to surf the site on their computers,
so I don't want to do anything that is completely unique to Firefox,
to a degree. I do plan to use SVG, which is not native to IE6/IE7,
that bridge I will cross once I get there;)

As far as coding on the front and back ends, I am going to do both.
There is an apache server with both PHP and a custom Apache Module (in
C) and I will be using JavaScript in the browser for lots of things,
including Ajax. So I can do pretty much anything.

Cartoper

Sep 7 '07 #7
Cartoper wrote:
On Sep 6, 5:41 pm, "André Gillibert"
<tabkanDELETETHIS...@yahodeletethato.frwrote:
>Moreover, I think that that it isn't exactly what Cartoper wants.
He wants that, for a 15 inch screen, the font size so proportionally
smaller than for a 17 inch screen.

You are correct, I don't mind if the font size is different sizes on
physically different size monitors, I just want to keep the font size
the same on one monitor regardless of the screen resolution.
Stop and think about this for a moment. I know that you do not want yo
mess up your pretty "to the pixel" kiosk layout but what if the use has
poor eyesight?

For example I finally showed a lady at our public library the Windows
Accessibility settings so she could bump up all her text where she could
see it with her very poor eye sight. This would be independent of the
browser...what then?

>
On Sep 6, 4:03 pm, "David E. Ross" <nob...@nowhere.notwrote:
>I'm assuming that the kiosks are part of an intranet (not Internet)
where both the kiosk configurations and the server are both under the
same controlled configuration.

This is correct, it is on a intranet.

On Sep 6, 4:45 pm, Ben C <spams...@spam.eggswrote:
>What's the browser and kiosk OS?

The first phase of development is targeting a specific kiosk browser,
currently IE7. With the new version I am coding for Firefox. I will
be moving the kiosk browser to Firefox before the next release.
Yep you can hack FF to kiosk mode but it doesn't disable CTRL +!

Maybe advisable to rethink your design.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Sep 7 '07 #8
On 6 Sep, 20:14, Cartoper <carto...@gmail.comwrote:
I am working on a browser kiosk needs to be able to be run at multiple
screen resolutions. What I would like to do is keep the text the same
size relative to the screen, all the time.
Do this in exactly the same way you'd write an accessible website.
body { font-size: 100% } and use fluid design techniques to make the
rest work no matter what the relative font sizes are. Don't use
physical dimensions in inches for font-size, even if that's the end
result you're after.

Then do the initial configuration of the kiosks such that the
browser's default font size is such to give you an acceptable physical
size for the text, on that particular hardware combination. Include
instructions for how to determine and configure this into the user
manual that's given to the kiosk operators, under the headline "How to
bring a dead kiosk back on-line after you have to swap out the
embedded PC/screen).
Kiosks are usually "public access" devices, often funded with
government funds to the project. Accessibility is thus even more
significant than usual for commercial web work. Although you should do
this anyway, it's often more prominent an issue for kiosks.

If you want to do even better, then use an on-screen HTML button and
some server-side code to change the CSS default size for body, based
on some sort of simple session variable. This is the only time I'd
advocate on-screen font size buttons (rather than letting users use
their browser controls) and the only time I'd change default font
sizes in the CSS. I'd do both of these for the same reason: the kiosk
user doesn't have a keyboard and so can't access the usual shortcuts.

Limit just how small the text size can be set. There's no reason for
anyone to make it smaller than will fit a "long line" (20 words) of
text onto the screen width. Maximum size is a bit more open-ended,
bbut you might limit this to the point where your fluid design finally
starts to break. Make sure that the size resets to the default after
the session timeout expires. Also make the font size buttons and their
text sized in % units, so that they remain vaguely findable after the
text has been scrolled down to the unreadable. Otherwise the local
chavs will find an amusing game of "Scroll the text size down, walk
away and make the kiosks unusable for others".
Sep 7 '07 #9
Scripsit David E. Ross:
In a kiosk, the user usually has little ability to choose viewing
properties, including adjusting font sizes. This is one of the few
instances where the developer must set font sizes.
Contrary to apparently popular belief, kiosks are not created by God or gods
but built by men (human beings). Any "must" is thus relative to what other
human beings have done to restrict the options of other human beings.
If this is not something that can be handled via HTML (and I doubt if
it can),
You doubt? Really?
a proper response to a request for help would be to point the
original poster to a valid source of information.
No, this is not a helpdesk for selecting a newsgroup or other fora. Please
check the description of this group.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Sep 7 '07 #10
Scripsit Cartoper:
This is correct, it is on a intranet.
Which part of "www" in the group name did you fail to understand?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
Sep 7 '07 #11
On Sep 6, 11:44 pm, "Jonathan N. Little" <lws4...@centralva.net>
wrote:
Stop and think about this for a moment. I know that you do not want yo
mess up your pretty "to the pixel" kiosk layout but what if the use has
poor eyesight?

For example I finally showed a lady at our public library the Windows
Accessibility settings so she could bump up all her text where she could
see it with her very poor eye sight. This would be independent of the
browser...what then?
Jonathan, Thank you for the concern, but it is complete unnecessary.
The first version, which has been released was small and one of the
complaints was that everything was too small for touch screens. One
of the reasons I want to make the text scale is to keep it large, I am
thinking around 24pt on a 1024x768 screen. Even folks with the worst
eye sight should be able to read it!
Yep you can hack FF to kiosk mode but it doesn't disable CTRL +!

Maybe advisable to rethink your design.
Thank you, I didn't know about <Ctrl+ <+and <Ctrl+ <->,
interesting, it also works with IE7. But the way I to hack together
the current IE7 kiosk, those hot keys don't work. Considering I plan
to hack the FF kiosk the same way, I beleive that this too is a non
concern. I do appreciate the enlightenment.

P.S. If you would like to see a sample of the kiosk, only a snipet of
the code, go to mozilla.dev.tech.svg and look at the "How to position
SVG image in div" thread.

Cartoper

Sep 7 '07 #12
On Sep 7, 5:27 am, Andy Dingley <ding...@codesmiths.comwrote:
On 6 Sep, 20:14, Cartoper <carto...@gmail.comwrote:
I am working on a browser kiosk needs to be able to be run at multiple
screen resolutions. What I would like to do is keep the text the same
size relative to the screen, all the time.

Do this in exactly the same way you'd write an accessible website.
body { font-size: 100% } and use fluid design techniques to make the
rest work no matter what the relative font sizes are. Don't use
physical dimensions in inches for font-size, even if that's the end
result you're after.
I did not realized that I could use a percentage with font size. I
just tried it and when I resize the window nothing changes. Can you
post an example or direct me to a web site that explains it in more
detail?

Cartoper

Sep 7 '07 #13
On 7 Sep, 11:47, Cartoper <carto...@gmail.comwrote:
I did not realized that I could use a percentage with font size. I
just tried it and when I resize the window nothing changes.
Sorry, my post was unclear. You can size the buttons (block elements)
where the font-resizers are located with a % size and they will follow
(somewhat indirectly, read the CSS spec) the overall screen
dimensions. This is a good fit for "the hole in the cabinet", which is
what matters here. As to the font-size property itself, that't not
how % is calculated. You'll need to use a more absolute unit there,
inches or similar being a reasonable choice.

Sep 7 '07 #14
Cartoper wrote:
I did not realized that I could use a percentage with font size. I
just tried it and when I resize the window nothing changes. Can you
post an example or direct me to a web site that explains it in more
detail?
Font sizes in percent are relative to the base font size.

150% is equivalent to 1.5em for font sizes.
--
You can contact me at <ta*****************@yahoDELETETHATo.fr>
Sep 7 '07 #15
Cartoper wrote:
>
I did not realized that I could use a percentage with font size. I
just tried it and when I resize the window nothing changes.
You should also go into your browser settings and change the default
font size to whatever works best with your particular window size.

IE has very limited choices, but Firefox gives you precise control.

--
Berg
Sep 7 '07 #16
On Sep 7, 9:00 am, "André Gillibert"
<tabkanDELETETHIS...@yahodeletethato.frwrote:
Cartoper wrote:
I did not realized that I could use a percentage with font size. I
just tried it and when I resize the window nothing changes. Can you
post an example or direct me to a web site that explains it in more
detail?

Font sizes in percent are relative to the base font size.

150% is equivalent to 1.5em for font sizes.
Ok, so % is not what I am looking for. After reading everything
everyone has said, it looks like there is no simple solution. The
best I can figure I am going to have to do some math in JavaScript to
do what I am looking to do, the question is how:

* First get the base percentage:

1.1: Find a font that looks good on my monitor
1.2: Somehow find out the height of the font (I know that height is a
relative term depending on the character), which height I should be
using I don't know.
1.3: Find out what percentage of the screen I want the text.

* Set the font size in the web page:

2.1: determine the screen size/window size
2.2: Use the percentage from step 1.3 to find out how many pixels on
this screen
2.3: Somehow set the standard font size to the result of 2.2

Does anyone know how to do step 1.2 and 2.3? Also, I know it is
simply a matter of looking it up, but how do I find the window size in
JavaScript (for 2.1 and 1.3).

Cartoper

Sep 7 '07 #17
On Sep 7, 6:39 am, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
Scripsit Cartoper:
This is correct, it is on a intranet.

Which part of "www" in the group name did you fail to understand?
Is this to say that if the question about HTML is not regarding a site
that will be on the Internet, it cannot be asked here? Some folks I
simply don't get!

Cartoper

Sep 7 '07 #18
On 7 Sep, 11:39, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
Scripsit Cartoper:
This is correct, it is on a intranet.

Which part of "www" in the group name did you fail to understand?
Why do you think kiosks _exclude_ the www? Lots of intranet sites are
on the public web too, lots of kiosks inside a building are accessing
sites for that organisation, but hosted via the public web.

Sep 7 '07 #19
Scripsit Andy Dingley:
On 7 Sep, 11:39, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
>Scripsit Cartoper:
>>This is correct, it is on a intranet.

Which part of "www" in the group name did you fail to understand?

Why do you think kiosks _exclude_ the www?
Which of the words "intranet" did you fail to understand?

Besides, "Cartoper" is working on a kiosk configuration, or something like
that (probably with a wrong approach), not authoring for the WWW.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Sep 7 '07 #20
Jukka K. Korpela wrote:
Scripsit Andy Dingley:
>On 7 Sep, 11:39, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
>>Scripsit Cartoper:

This is correct, it is on a intranet.

Which part of "www" in the group name did you fail to understand?

Why do you think kiosks _exclude_ the www?

Which of the words "intranet" did you fail to understand?
Cartoper said that he intended to put it on the Web too.
Cartoper wrote:
As I said the target browser is Firefox, but... In future versions of
the software, users will be able to surf the site on their computers,
so I don't want to do anything that is completely unique to Firefox,
to a degree. I do plan to use SVG, which is not native to IE6/IE7,
that bridge I will cross once I get there;)
Besides, "Cartoper" is working on a kiosk configuration, or something
like that (probably with a wrong approach), not authoring for the WWW.
Even if it could be seen as off-topic, I don't think this thread is
off-topic enough to explain a reject.

--
You can contact me at <ta*****************@yahoDELETETHATo.fr>
Sep 7 '07 #21
On Fri, 7 Sep 2007 23:09:15 +0300, "Jukka K. Korpela"
<jk******@cs.tut.fiwrote:
>Why do you think kiosks _exclude_ the www?

Which of the words "intranet" did you fail to understand?
What part of "exclude" did you fail to understand?

The OP is talking about one specific kiosk. I don't care if they're
going to install it in a locked cupboard with no networking, that still
doesn't make the general case inappropriate to the www. This is Usenet,
it's a large audience broadcast medium, so we may discuss generalities.

--
Cats have nine lives, which is why they rarely post to Usenet.
Sep 11 '07 #22

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Devon | last post by:
Hi All, I'm generating a pdf document using FOP .25 from Apache. I've created running dynamic headings (e.g. chapter titles) that change as dictated by the XML source I'm converting to PDF. Now...
2
by: Randell D. | last post by:
HELP! Its taken me ages - I'm a newbie and I've compiled bits of code that I've read in this newsgroup over time to create one of my most intricate functions to date... Basically, the script...
2
by: Brian Vallelunga | last post by:
Greetings, I'm attempting to create a tabbed box with CSS and Javascript and am having some problems. I have three tabs and three tab content areas. When the page is loaded, two of the three...
2
by: bugbear | last post by:
Is there a current "best practice" for text sizing? My goal is a have a web page (web application actually) which looks the same (more or less) on Mac IE5, PC IE6, Mozilla, Konqueror and Safari....
4
by: Tim Marsden | last post by:
Hi I would like to add controls to my page at runtime. What containers can I use to host the controls? I know I can add them to the form controls collection, but I need to have control on where...
0
bmallett
by: bmallett | last post by:
First off, i would like to thank everyone for any and all help with this. That being said, I am having a problem retrieving/posting my dynamic form data. I have a form that has multiple options...
0
by: miikka | last post by:
Is it possible to have dynamic update (preview) when re-sizing column in DataGridView?
3
by: =?Utf-8?B?UiBSZXllcw==?= | last post by:
Hi! This discussion may help other programmers get a better idea of how to save uploaded images through a website. Why? Well currently, I save 3 versions of every uploaded image on my own...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.