script to auto adjust font in table 
Author Message
 script to auto adjust font in table


| I want to specify a fixed size for a table, then pass it a
| string and have the string's font adjusted until it fills
| (graphically) the table.  Does anyone know of a way in
| JScript to get the extent of a string given a specific
| font/size?  Or another way to achieve this?  Thanks for
| your help.

This is a conceptual, UNTESTED code.

var   font_size = 12,
  desired_width = 300,
effective_width = td_element.offsetWidth;
while (effective_width > desired_width) {
font_size--;
td_element.style.fontSize = [font_size,'pt'].join('');
effective_width = td_element.offsetWidth;

Quote:
};

--
:: "Ekevu Guepardo" ::
:: Acinonyx jubatus ::
:: Porto Alegre, BR ::


Tue, 24 Aug 2004 09:06:01 GMT  
 script to auto adjust font in table
Ok, so I was bored.

| This is a conceptual, UNTESTED code.

And this... This is tested code! :)

<html><head><script><!--
function fit(element, width, default_size, min_size) {
//              HTML     PX            PT        PT
// returns true or false indicating whether the
// actual element content was affected or not
var font_size = default_size,
effective_width = element.offsetWidth,
text = element.innerHTML;
while (font_size > min_size) {
element.style.fontSize = [font_size,'pt'].join('');
effective_width = element.offsetWidth;
if (effective_width <= width) return true; // objective achieved!
font_size--;

Quote:
};

while (effective_width > width) {
text = text.slice(0,-2);
element.innerHTML = text;
effective_width = element.offsetWidth;
Quote:
};

return false; // objective achieved!
Quote:
};

window.onload = function() {
fit(el1, 500, 16, 5);
fit(el2, 500, 16, 5);
fit(el3, 500, 16, 5);
window.status = 'Done!';
Quote:
};

//--></script><style><!--
body { background: black; color: white }
span { background: darkblue }
td, table { border: none; border-collapse: collapse; padding: 0px }
body, td { font-family: "Microsoft Sans Serif",arial }
--></style></head><body>
<span style='width:500px'></span><br>
<table>
<tr><td><span id=el1>
a i u e o ka ki ku ke ko sa shi su se so ta chi tsu te to
na ni nu ne no ha hi fu he ho ma mi mu me mo ya yu yo
ra ri ru re ro wa wo n ga gi gu ge go za ji zu ze zo
da ji zu de do ba bi bu be bo pa pi pu pe po
</span></td></tr>
<tr><td><span id=el2>
a i u e o ka ki ku ke ko sa shi su se so ta chi tsu te to
na ni nu ne no ha hi fu he ho ma mi mu me mo ya yu yo
</span></td></tr>
<tr><td><span id=el3>
a i u e o ka ki ku ke ko sa shi su se so ta chi tsu te to
</span></td></tr>
</body></html>


Tue, 24 Aug 2004 09:58:38 GMT  
 script to auto adjust font in table
When you write "fill", do you mean fill as in fill the horizontal space (for
which Ekevu has already posted an elegant solution) or fill the horizontal
AND vertical space?

Tim.


Quote:
> I want to specify a fixed size for a table, then pass it a
> string and have the string's font adjusted until it fills
> (graphically) the table.  Does anyone know of a way in
> JScript to get the extent of a string given a specific
> font/size?  Or another way to achieve this?  Thanks for
> your help.

> b



Tue, 24 Aug 2004 12:50:24 GMT  
 script to auto adjust font in table
Looks great...  Thanks for your help.

Quote:
>-----Original Message-----
>Ok, so I was bored.

>| This is a conceptual, UNTESTED code.

>And this... This is tested code! :)

><html><head><script><!--
>function fit(element, width, default_size, min_size) {
>//              HTML     PX            PT        PT
>// returns true or false indicating whether the
>// actual element content was affected or not
>var font_size = default_size,
>effective_width = element.offsetWidth,
>text = element.innerHTML;
>while (font_size > min_size) {
>element.style.fontSize = [font_size,'pt'].join('');
>effective_width = element.offsetWidth;
>if (effective_width <= width) return true; // objective
achieved!
>font_size--;
>};
>while (effective_width > width) {
>text = text.slice(0,-2);
>element.innerHTML = text;
>effective_width = element.offsetWidth;
>};
>return false; // objective achieved!
>};
>window.onload = function() {
>fit(el1, 500, 16, 5);
>fit(el2, 500, 16, 5);
>fit(el3, 500, 16, 5);
>window.status = 'Done!';
>};
>//--></script><style><!--
>body { background: black; color: white }
>span { background: darkblue }
>td, table { border: none; border-collapse: collapse;
padding: 0px }
>body, td { font-family: "Microsoft Sans Serif",arial }
>--></style></head><body>
><span style='width:500px'></span><br>
><table>
><tr><td><span id=el1>
>a i u e o ka ki ku ke ko sa shi su se so ta chi tsu te to
>na ni nu ne no ha hi fu he ho ma mi mu me mo ya yu yo
>ra ri ru re ro wa wo n ga gi gu ge go za ji zu ze zo
>da ji zu de do ba bi bu be bo pa pi pu pe po
></span></td></tr>
><tr><td><span id=el2>
>a i u e o ka ki ku ke ko sa shi su se so ta chi tsu te to
>na ni nu ne no ha hi fu he ho ma mi mu me mo ya yu yo
></span></td></tr>
><tr><td><span id=el3>
>a i u e o ka ki ku ke ko sa shi su se so ta chi tsu te to
></span></td></tr>
></body></html>

>.



Tue, 24 Aug 2004 22:57:20 GMT  
 script to auto adjust font in table
Now that you mention it.  I am looking more at filling the
vertical space.  I have a table that is about half the
size of the screen.  When I pass a long string (paragraph
size) to the table, it is ok for it to wrap normally, but
I want to make sure that the table doesn't extend
downwards to accomodate text, but have the text resize.  I
guess that I can use the offsetHeight property of the text
to make sure that it fits.  Thanks again for your help.

Quote:
>-----Original Message-----
>When you write "fill", do you mean fill as in fill the

horizontal space (for
Quote:
>which Ekevu has already posted an elegant solution) or
fill the horizontal
>AND vertical space?

>Tim.



>> I want to specify a fixed size for a table, then pass
it a
>> string and have the string's font adjusted until it
fills
>> (graphically) the table.  Does anyone know of a way in
>> JScript to get the extent of a string given a specific
>> font/size?  Or another way to achieve this?  Thanks for
>> your help.

>> b

>.



Tue, 24 Aug 2004 23:04:16 GMT  
 script to auto adjust font in table

| Now that you mention it.  I am looking more at filling the
| vertical space.  I have a table that is about half the
| size of the screen.  When I pass a long string (paragraph
| size) to the table, it is ok for it to wrap normally, but
| I want to make sure that the table doesn't extend
| downwards to accomodate text, but have the text resize.  I
| guess that I can use the offsetHeight property of the text
| to make sure that it fits.  Thanks again for your help.

That would be a lot more complicated... If want to deal only with
offsetHeight and not with offsetWidth, it might be pretty easy, but dealing
with both properties will require so much checking your code will look like
it's AI. :P

Since writing big big long words is the only way to make offsetWidth bigger
than it should (for paragraphs in tables), you can, for example, break every
word that has more than 40 chars when offsetWidth has overflown.

:: "Ekevu Guepardo" ::
:: Acinonyx jubatus ::
:: Porto Alegre, BR ::



Wed, 25 Aug 2004 12:01:40 GMT  
 
 [ 6 post ] 

 Relevant Pages 

1. ------ creating a auto-numbered table with vb-script -------

2. ------ creating a auto-numbered table with vb-script -------

3. ps font code table???(like ascii table)

4. Auto font downloader for UNIX?

5. Auto font extraction

6. How to auto start a cab file packaged as an exe from script

7. auto update software script

8. Auto Execute Script after Event

9. Auto run powerpoint script

10. Auto modifying script

11. WSH Script for auto download

12. Auto discover files 24x7 and launch script

 

 
Powered by phpBB® Forum Software