Auto resolution based display of data
Moderator: General Moderators
-
cannon_balls
- Forum Newbie
- Posts: 10
- Joined: Tue Jan 24, 2006 2:23 pm
Auto resolution based display of data
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
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
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:
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:
What the heck does that mean? Tables are made for displaying data...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
Last edited by shoebappa on Tue Mar 07, 2006 11:40 pm, edited 2 times in total.
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.
Edit: Granted I can find some that do, but sticking to the main ones they don't.
Last edited by shoebappa on Tue Mar 07, 2006 11:53 pm, edited 1 time in total.
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...
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...
-
cannon_balls
- Forum Newbie
- Posts: 10
- Joined: Tue Jan 24, 2006 2:23 pm
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

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
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.
To center content you will have to:
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>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>
Last edited by Benjamin on Wed Mar 08, 2006 12:28 am, edited 1 time in total.
-
cannon_balls
- Forum Newbie
- Posts: 10
- Joined: Tue Jan 24, 2006 2:23 pm
Code: Select all
for ($i = 0; $i < 5; $i++) {
echo $i;
}01234
not
0
1
2
3
4
Unless I'm terribly confussed...
- feyd
- Neighborhood Spidermoddy
- Posts: 31559
- Joined: Mon Mar 29, 2004 3:24 pm
- Location: Bothell, Washington, USA
Although I hate going this far off topic but...
possibly outputsimagettfbbox() 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
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";
}
}
?>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 45The 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
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.
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.
Last edited by shoebappa on Wed Mar 08, 2006 1:09 am, edited 1 time in total.
-
cannon_balls
- Forum Newbie
- Posts: 10
- Joined: Tue Jan 24, 2006 2:23 pm
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
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
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>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...