Page 1 of 2

Auto resolution based display of data

Posted: Tue Mar 07, 2006 11:05 pm
by cannon_balls
I apologize if you feel this is more an HTML question than a php one, but i put it here cause i felt there could be a possibility the solution may lie in a different way of extracting the data from a db in a way to suit the purpose

i have a list of results from a project all of the same length eg 5 digits. Im creating a website to display these results. due to the large amount of data, i need to optimize the display of the results based on the resolution of the screen used to view these results.

My aim is to fill out the entire page (width and height ) with the data maybe something looking like this
------------------------------------------------------------------------------------------------------------
| 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 |
| 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 |
| 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 |
| 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 |
| 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 |
| 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 |
------------------------------------------------------------------------------------------------------------



Based on the resolution used, the horizontal and vertical lengths will change.
My aim is to do this without using a script to first scan the resolution of the user.

At the moment, ive tried floating each data to the left and padding each of them by 4px ( i had to float left cause the data will normally be displayed vertically since it is extracted using a for loop). The problem with this however is that based on the resolution used, if the space at the extreme right is less than the width of the last data on that row, that data is offset to the next row and then leaves some space on that right side.

Ive tried containing all this data in a div and setting auto margin,auto padding and float:center but none of those work.

I cant use tables cause i havent heard (if any) of a means where a table can automatically sort of which data should be in a row or column

Spent hours on this and ive totally run out of ideas.. Any chance you guys can help

Regards

Posted: Tue Mar 07, 2006 11:29 pm
by shoebappa
Maybe I'm tired and missing something here, but do the columns have headings? I'm trying to figure out what you're asking, as in do the 5 digit numbers need to be in a particular column?

If so, then I don't see how you're going to wrap anything... You could just look at the overflow CSS attribute of a DIV tag (which has a fixed width and height). Basically adds scroll bars if needed. Check: http://web.tampabay.rr.com/bmerkey/exam ... n-csv.html though the locked headings / columns only work in IE. The scroll bars should work in everything modern.

If not... Why float anything. The properties of text is to wrap by default, and if they're all 5 digits, they will wrap automatically and line up automatically... Resize the screen and look below...

12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 11111 12345 22222 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 11111 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 00000 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345

You could enclose each data in a <span class="datacontainer"> and give the class padding or whatever other attributes.

If I missed the point, clarify what the data is, headings and such, and also clarify this statement:
I cant use tables cause i havent heard (if any) of a means where a table can automatically sort of which data should be in a row or column
What the heck does that mean? Tables are made for displaying data...

Posted: Tue Mar 07, 2006 11:33 pm
by feyd
make sure to use a fixed width font, possibly centering the text, will help alignment too. :)

Posted: Tue Mar 07, 2006 11:41 pm
by shoebappa
Hrm, I didn't think digits usually varied widths?

Edit: Granted I can find some that do, but sticking to the main ones they don't.

Posted: Tue Mar 07, 2006 11:53 pm
by feyd
1 is often more narrow than the other numbers, although each varies a bit, but it depends on the font.

Posted: Wed Mar 08, 2006 12:02 am
by shoebappa
I wouldn't say often... Arial, Times, Courier, Sans Serif, Verdana all space out the one. Prolly one of those things you'd think were true cause it is usually thinner, but the font usually gives it more spacing than the other digits.

http://www.odu.edu/test/font.html

Granted I haven't tested on anything but Windows... I'll check Linux "tomorrow". Didn't mean to go off on a tangent. Can't believe I bothered to do a mockup of that either. Pathetic that something like that would peak my curiosity...

Posted: Wed Mar 08, 2006 12:21 am
by cannon_balls
i had to float bacause if i didnt, the data will be displayedsomething like
12345
15052
15200
15615
41953
10654
05451

since they were extracted using a for loop for ($i=0: $i<300:$i++) and as far as i know extracting data this way will always display it as above. so floating left was just a way i could get the data to arrange itself horizontally. i also set each of the data a padding af about 4 px just to prevent a continious cluster of data.

The columns dont have headers or anything and you can forget anything i said about tables, it was just a crap suggestion i guess

i also understand, that changing the resolution causes it to auto wrap. what also happens if you notice, is that the margin at the extreme right hand side will be different from that on the extreme left hand side. and this margin at the right hand side will vary depending on the resolution(try it yourself).

At the end of the day, the entire data collection looks like it is floating to the left hand side.
A simpler way to ask the question i guess, would be

"how do you auto center the entire data collection"

Currently, i have the entire data in a div which i had hoped setting an auto margin would automatically centralize it. That doesnt seem to work. even an auto padding or a float:center. The only thing that the div responds to is a float:right, which in this case the entire data on the screen floats right.
Setting a fixed margin to center it would only work for that particular resolution and not for another.


I hope all that makes a lot more sense, if not i seriously have to go work on my communication skills
:)

Posted: Wed Mar 08, 2006 12:24 am
by Benjamin
Just use divs. Put each number in a div. Set the height and width in css and then use the display: inline; attribute. You won't have to float them and it will resize based on the size of the browser window.

Code: Select all

div.data {
  height: 40px;
  width: 120px;
  display: inline;
  padding: 4px;
  font-size: 12px;
}

<div class="data">12345</div>
<div class="data">12345</div>
<div class="data">12345</div>
<div class="data">12345</div>
<div class="data">12345</div>
<div class="data">12345</div>
To center content you will have to:

Code: Select all

#CenterIT {
  text-align: center;
}

#PageContent {
  width: 768px;
  margin: 0px auto 0px auto;
  text-align: left;
}

<div id="CenterIT">
  <div id="PageContent">
    <div class="data">12345</div>
    <div class="data">12345</div>
    <div class="data">12345</div>
    <div class="data">12345</div>
    <div class="data">12345</div>
    <div class="data">12345</div>
  </div>
</div>

Posted: Wed Mar 08, 2006 12:25 am
by cannon_balls
I rekon the use of 'em' for the text should allow it to auto resize itself to pan out, but to look towards the future of the project where i might be required to also images of waveforms obtained, i think its better to find a generic solution :wink:

Posted: Wed Mar 08, 2006 12:30 am
by Benjamin
Well you can do whatever you want with the font size. I edited my post above to include css for centering the content.

Posted: Wed Mar 08, 2006 12:44 am
by shoebappa

Code: Select all

for ($i = 0; $i < 5; $i++) {
  echo $i;
}
Outputs:

01234

not

0
1
2
3
4

Unless I'm terribly confussed...

Posted: Wed Mar 08, 2006 12:50 am
by feyd
Although I hate going this far off topic but...

Code: Select all

<?php

$test = '1234567890';

$fontsize = 50;

$folder = getenv('SystemRoot') . DIRECTORY_SEPARATOR . 'Fonts' . DIRECTORY_SEPARATOR;

$fonts = glob($folder . '*.ttf');
$fontcount = count($fonts);
shuffle($fonts);
$fonts = array_slice($fonts, 0, 20);

$needed = array('Arial','Verdana','Times','Georgia','Tahoma');

foreach($needed as $need)
{
	$file = $folder . $need . '.ttf';
	if(is_file($file) and !in_array($file,$fonts))
	{
		array_unshift($fonts, $file);
	}
}

echo $fontcount . ' possible fonts, ' . count($fonts) . ' chosen.';
foreach($fonts as $font)
{
	echo "\n\n" . basename($font) . "\n-----------------------------\n";
	for($i = 0, $j = strlen($test); $i < $j; $i++)
	{
		$rect   = imagettfbbox($fontsize, 0, $font, '.' . $test{$i} . '.');
		$width  = abs($rect[0] - $rect[2]);
		$height = abs($rect[1] - $rect[7]);
		echo $test{$i} . ' = ' . $width . ' x ' . $height . "\n";
	}
}

?>
possibly outputs

Code: Select all

500 possible fonts, 25 chosen.

Tahoma.ttf
-----------------------------
1 = 63 x 49
2 = 63 x 49
3 = 64 x 51
4 = 63 x 48
5 = 64 x 50
6 = 64 x 51
7 = 56 x 50
8 = 63 x 52
9 = 64 x 51
0 = 64 x 51


Georgia.ttf
-----------------------------
1 = 54 x 38
2 = 63 x 38
3 = 62 x 49
4 = 63 x 49
5 = 60 x 48
6 = 63 x 50
7 = 59 x 49
8 = 65 x 50
9 = 63 x 50
0 = 66 x 38


Times.ttf
-----------------------------
1 = 58 x 48
2 = 58 x 47
3 = 59 x 47
4 = 57 x 47
5 = 57 x 47
6 = 58 x 47
7 = 57 x 47
8 = 58 x 48
9 = 58 x 49
0 = 56 x 48


Verdana.ttf
-----------------------------
1 = 74 x 49
2 = 73 x 49
3 = 73 x 51
4 = 73 x 48
5 = 74 x 50
6 = 73 x 51
7 = 74 x 50
8 = 73 x 52
9 = 73 x 51
0 = 73 x 51


Arial.ttf
-----------------------------
1 = 63 x 47
2 = 62 x 48
3 = 62 x 49
4 = 62 x 47
5 = 63 x 49
6 = 62 x 49
7 = 62 x 49
8 = 63 x 49
9 = 63 x 49
0 = 63 x 49


Marsett.ttf
-----------------------------
1 = 37 x 48
2 = 69 x 44
3 = 65 x 42
4 = 58 x 47
5 = 69 x 44
6 = 56 x 49
7 = 68 x 44
8 = 61 x 43
9 = 59 x 46
0 = 74 x 36


lsansi.ttf
-----------------------------
1 = 72 x 49
2 = 73 x 49
3 = 73 x 52
4 = 72 x 50
5 = 73 x 50
6 = 73 x 51
7 = 72 x 48
8 = 73 x 51
9 = 72 x 51
0 = 72 x 52


AppleGaramond-Light.ttf
-----------------------------
1 = 45 x 46
2 = 45 x 46
3 = 44 x 51
4 = 45 x 51
5 = 45 x 50
6 = 45 x 52
7 = 45 x 47
8 = 45 x 46
9 = 45 x 51
0 = 45 x 46


Timothy.ttf
-----------------------------
1 = 33 x 63
2 = 54 x 44
3 = 62 x 37
4 = 61 x 46
5 = 57 x 36
6 = 57 x 34
7 = 49 x 33
8 = 50 x 35
9 = 47 x 36
0 = 63 x 35


Lci_____.ttf
-----------------------------
1 = 87 x 51
2 = 87 x 51
3 = 88 x 51
4 = 87 x 51
5 = 87 x 51
6 = 87 x 51
7 = 87 x 50
8 = 87 x 51
9 = 87 x 51
0 = 87 x 51


6809char.ttf
-----------------------------
1 = 52 x 44
2 = 72 x 44
3 = 72 x 44
4 = 73 x 44
5 = 74 x 44
6 = 74 x 44
7 = 70 x 44
8 = 73 x 44
9 = 73 x 44
0 = 73 x 44


nyetg.ttf
-----------------------------
1 = 58 x 45
2 = 83 x 44
3 = 78 x 45
4 = 80 x 45
5 = 83 x 46
6 = 76 x 45
7 = 62 x 47
8 = 85 x 46
9 = 86 x 43
0 = 76 x 47


ma______.ttf
-----------------------------
1 = 134 x 0
2 = 134 x 0
3 = 134 x 0
4 = 134 x 0
5 = 134 x 0
6 = 134 x 0
7 = 134 x 0
8 = 134 x 0
9 = 134 x 0
0 = 134 x 0


Vanessa.ttf
-----------------------------
1 = 45 x 56
2 = 83 x 57
3 = 69 x 49
4 = 81 x 57
5 = 70 x 48
6 = 70 x 55
7 = 70 x 52
8 = 65 x 55
9 = 70 x 48
0 = 75 x 46


croobie.ttf
-----------------------------
1 = 57 x 49
2 = 56 x 48
3 = 43 x 51
4 = 49 x 55
5 = 48 x 61
6 = 44 x 52
7 = 44 x 57
8 = 34 x 50
9 = 40 x 41
0 = 47 x 43


times.ttf
-----------------------------
1 = 58 x 48
2 = 58 x 47
3 = 59 x 47
4 = 57 x 47
5 = 57 x 47
6 = 58 x 47
7 = 57 x 47
8 = 58 x 48
9 = 58 x 49
0 = 56 x 48


AppleGaramond-Italic.ttf
-----------------------------
1 = 50 x 44
2 = 49 x 44
3 = 50 x 52
4 = 51 x 46
5 = 49 x 51
6 = 50 x 49
7 = 50 x 49
8 = 50 x 46
9 = 50 x 52
0 = 50 x 46


Lcbi____.ttf
-----------------------------
1 = 90 x 52
2 = 90 x 52
3 = 90 x 52
4 = 90 x 52
5 = 90 x 51
6 = 90 x 52
7 = 90 x 51
8 = 90 x 52
9 = 90 x 52
0 = 90 x 52


georgiab.ttf
-----------------------------
1 = 66 x 38
2 = 76 x 38
3 = 75 x 49
4 = 77 x 49
5 = 73 x 48
6 = 76 x 50
7 = 71 x 49
8 = 78 x 49
9 = 77 x 50
0 = 79 x 38


SmallTalkMonoTight.ttf
-----------------------------
1 = 73 x 37
2 = 73 x 37
3 = 74 x 37
4 = 73 x 37
5 = 73 x 37
6 = 73 x 37
7 = 73 x 37
8 = 73 x 37
9 = 73 x 37
0 = 73 x 37


Oz.ttf
-----------------------------
1 = 53 x 51
2 = 77 x 57
3 = 76 x 58
4 = 76 x 59
5 = 76 x 53
6 = 76 x 50
7 = 69 x 51
8 = 61 x 51
9 = 67 x 49
0 = 78 x 51


eminenz.ttf
-----------------------------
1 = 54 x 51
2 = 69 x 51
3 = 61 x 51
4 = 61 x 51
5 = 61 x 51
6 = 60 x 50
7 = 61 x 51
8 = 63 x 51
9 = 61 x 51
0 = 66 x 51


Tt0838m_.ttf
-----------------------------
1 = 67 x 50
2 = 67 x 54
3 = 67 x 49
4 = 67 x 52
5 = 67 x 52
6 = 67 x 56
7 = 67 x 53
8 = 67 x 49
9 = 66 x 56
0 = 67 x 50


SF Movie Poster Bold.ttf
-----------------------------
1 = 34 x 55
2 = 45 x 55
3 = 45 x 55
4 = 45 x 55
5 = 45 x 55
6 = 45 x 55
7 = 43 x 55
8 = 45 x 55
9 = 45 x 55
0 = 45 x 55


Tt0280m_.ttf
-----------------------------
1 = 51 x 43
2 = 50 x 44
3 = 52 x 44
4 = 51 x 43
5 = 50 x 44
6 = 51 x 44
7 = 52 x 46
8 = 50 x 45
9 = 51 x 45
0 = 51 x 45
imagettfbbox() uses the built in hinting. I added periods around the tested text to ensure a constant reference point for each font.

The milage may vary from browser to browser as they may choose to ignore the hinting (although they're not supposed to). The only general guarantee of alignment is using a monospace setting.

Sorry for the length of the post :)

Posted: Wed Mar 08, 2006 1:05 am
by shoebappa
Impressive. The main fonts are within a 2 pixels of each other, even if you're using GD... Not like the oddball fonts that do vary significantly enough. (Why would 7 be shorter in Tahoma? it ain't in a browser...)

I updated http://www.odu.edu/test/font.html You can see Gerogia is the only one that visually changes. Good advice about the monospaced font like Courier I assume.

I'll start another topic sometime about GD spacing, cause I've had a nightmare with newer versions of GD on Windows. Whenver they turned on the Anti Aliasing, it hosed the spacing on Windows : ( Never had the time to research it enough.

Posted: Wed Mar 08, 2006 1:09 am
by cannon_balls
Thanks agtlewis, but the aim isnt to do it without a fixed outer width (width: 768px; ). It should auto span out across the entire width. so any other ideas in that brain of yours?



shoebappa, youre right about for
($i = 0; $i < 5; $i++) {
echo $i;
}

but im trying to make it generic incase i need to do the same thing with images later. and when a for loop is used like that to extract images for the db, its displayed vertically (at least thats what its doing now).

oh yeah and firefox didnt respond to display inline for images. It just displays the images vertically.

Men, ive just spent another 7 hrs on this already. ITs 7.00am here in the UK which means no sleep before work . am i gonna have a bad day today or what :)

Posted: Wed Mar 08, 2006 1:21 am
by shoebappa

Code: Select all

<html>
<head>
<style type="text/css">
#CenterIT { 
  margin: 10px;
  text-align: center; 
} 

#PageContent {
  width: 100%; 
  margin: 0px auto 0px auto; 
  text-align: left; 
}

.data {
  margin: 3px;
  position: relative; 
  float: left;
  display: inline;
}
</style>
<body>

<div id="CenterIT"> 
  <div id="PageContent"> 
    <div class="data">12345</div> 
    <div class="data">12345</div> 
    <div class="data">12345</div> 
    <div class="data">12345</div> 
    <div class="data">12345</div> 
    <div class="data">12345</div> 
    <div class="data">12345</div> 
    <div class="data">12345</div> 
  </div> 
</div> 

</body>
</html>
If you need an image just nest it in the data div. If it's the same image, or one of a few images you could use a background image and some left padding on the div. Have fun at work, I love zombie days.

Note feyd's input on the monospaced font would still apply here unless you used a fixed width (that's greater than the rendered width) for the data class...