Randall-B
asked on
Add Line Numbering to Left Side of Web Pages from PHP, which Have Justified Right Margin and Outline Structure with Ordered Lists
I need to add line numbering to the left side of html pages generated by PHP from HTML source code stored in a variable.
Unlike the solution at http:Q_22414012.html, it needs to be done without using tables. See a sample at: http://216.92.61.99/document.htm (which does not use tables, but unfortunately it probably lacks the ability to have right-justified margins).
The solution needs to be compatible with justified right margin, and outline structure with ordered lists.
What I'm trying to duplicate is what you see in this pdf file, created in Word: http://216.92.61.99/LineNumbering.pdf . But it would be generated on-the-fly by PHP by adding line numbering to the html source code stored in a variable, such as the source code of the following page, which is justified and has ordered-list structure: http://216.92.61.99/sample.htm ). I realize HTML itself may impose some limitations on what I want, but I hope we can work around them somehow.
Unlike the solution at http:Q_22414012.html, it needs to be done without using tables. See a sample at: http://216.92.61.99/document.htm (which does not use tables, but unfortunately it probably lacks the ability to have right-justified margins).
The solution needs to be compatible with justified right margin, and outline structure with ordered lists.
What I'm trying to duplicate is what you see in this pdf file, created in Word: http://216.92.61.99/LineNumbering.pdf . But it would be generated on-the-fly by PHP by adding line numbering to the html source code stored in a variable, such as the source code of the following page, which is justified and has ordered-list structure: http://216.92.61.99/sample.htm ). I realize HTML itself may impose some limitations on what I want, but I hope we can work around them somehow.
Last Comment
ASKER
Maybe I'm using the wrong terminology, but I mean the right side of the page's text is straight, as in the sample at http://216.92.61.99/LineNumbering.pdf . What I'm trying to accomplish is to imitate the layout in that pdf sample, including the line numbering in the left margin. (By contrast, look at this example web page, which has good line numbering and outline structure but has a ragged right side instead of justified: http://216.92.61.99/NotJustified.html ).
Although the solution at at http:Q_22414012.html is able to add line numbering to text, I need something that will work when the web page's text includes ordered lists and justified text, such as the source code behind http://216.92.61.99/sample.htm . The goal is to take html source for a page like that (stored in a variable, including the ordered list outline structure and justified paragraphs) and output a Web page that looks like the pdf sample, with line numbering.
Although the solution at at http:Q_22414012.html is able to add line numbering to text, I need something that will work when the web page's text includes ordered lists and justified text, such as the source code behind http://216.92.61.99/sample.htm . The goal is to take html source for a page like that (stored in a variable, including the ordered list outline structure and justified paragraphs) and output a Web page that looks like the pdf sample, with line numbering.
ASKER
In other words, let's say I have the source code for this web page http://216.92.61.99/sample.htm stored in a variable in my php script.
Now I need the php script to keep all the formatting intact (including the ordered-list outline structure and the justified paragraphs) but add line numbering to the left side.
Then the php script would output a Web page that looks just like this pdf file: http://216.92.61.99/LineNumbering.pdf .
Now I need the php script to keep all the formatting intact (including the ordered-list outline structure and the justified paragraphs) but add line numbering to the left side.
Then the php script would output a Web page that looks just like this pdf file: http://216.92.61.99/LineNumbering.pdf .
If you dont want to use tables, use div's instead...
This could help:
http://www.webreference.com/authoring/style/sheets/layout/advanced/
This could help:
http://www.webreference.com/authoring/style/sheets/layout/advanced/
ASKER
flasht,
I agree the css DIVs in that reference might be useful. I'm not sure, however, of how to implement it. I'm looking for expert guidance on how to put this all together with php, to start with this (http://216.92.61.99/sample.htm) and output this (http://216.92.61.99/LineNumbering.pdf, but in html, not pdf). Thanks.
I agree the css DIVs in that reference might be useful. I'm not sure, however, of how to implement it. I'm looking for expert guidance on how to put this all together with php, to start with this (http://216.92.61.99/sample.htm) and output this (http://216.92.61.99/LineNumbering.pdf, but in html, not pdf). Thanks.
ASKER
Maybe something like this web page: http://216.92.61.99/sampleWithNumbers.htm would be the general idea--even though it uses tables (but a completely different arrangement than before). However, it has these problems:
A) the line numbers don't exactly match up to the exact same level as the lines of text (the numbers are all a little bit higher up); and
B) the text moves (thus invalidating the original line numbers) if the page is viewed more narrowly, such as inside a frame (instead, the relationship of text and line numbers needs to stay constant); and
C) the script would somehow have to know how many of the line numbers (e.g. 1<br> 2<br> 3<br>, etc.) to add into the left column, based on how much text is in the right column.
Maybe DIVs could solve problems A and B?
A) the line numbers don't exactly match up to the exact same level as the lines of text (the numbers are all a little bit higher up); and
B) the text moves (thus invalidating the original line numbers) if the page is viewed more narrowly, such as inside a frame (instead, the relationship of text and line numbers needs to stay constant); and
C) the script would somehow have to know how many of the line numbers (e.g. 1<br> 2<br> 3<br>, etc.) to add into the left column, based on how much text is in the right column.
Maybe DIVs could solve problems A and B?
Heres an example of how it works. The problem is that we dont have any idea how many lines would the text contain, thats why we have to use graphic function to determinate text width...
This short example shows general idea on how to do this, I dont have time and I'm not really in mood to do all the work for you, but it should help you alot:
result: http://zycie.org/div.php
code: http://zycie.org/div.ph
Have fun.
For now, general issues are:
1. It doesnt count \n to add blank lines
2. It doesnt avoid counting html tags as text (just use strip_tags to fix it)
Thats all i have to say about it.
The main problem is that in fact its impossible if you dont know how many lines does the text contan / or will contain after changing the browser size (this problem was resolved by setting fixed size of text div).
Have fun.
This short example shows general idea on how to do this, I dont have time and I'm not really in mood to do all the work for you, but it should help you alot:
result: http://zycie.org/div.php
code: http://zycie.org/div.ph
Have fun.
For now, general issues are:
1. It doesnt count \n to add blank lines
2. It doesnt avoid counting html tags as text (just use strip_tags to fix it)
Thats all i have to say about it.
The main problem is that in fact its impossible if you dont know how many lines does the text contan / or will contain after changing the browser size (this problem was resolved by setting fixed size of text div).
Have fun.
Oh ... and idea on how to count \n ... simple... just dont implode text in textfiles, do foreach and for each line count how many lines would the text have... sum all the counts and add count($textfile)-1 to it. That should relove the problem.
ASKER
OK. The result page is impressive, and it is good that the lines and text always remain together even if the page is viewed narrowly.
But, looking at the script, I don't understand if it will work with html text that is has <OL> structure, since the script appears to be treating each line of text separately. Also, it will need to work with the text stored in a variable, rather than a text file.
I don't understand if it will preserve the <OL> outline structure and allow justified text as shown in http://216.92.61.99/sampleWithNumbers.htm . I know you're busy, but I hope for a little further guidance as this is maximum points. Thanks.
But, looking at the script, I don't understand if it will work with html text that is has <OL> structure, since the script appears to be treating each line of text separately. Also, it will need to work with the text stored in a variable, rather than a text file.
I don't understand if it will preserve the <OL> outline structure and allow justified text as shown in http://216.92.61.99/sampleWithNumbers.htm . I know you're busy, but I hope for a little further guidance as this is maximum points. Thanks.
Since every browser interprets <OL> by its own and it gives random count of lines after it (for example Opera gives one more line than Internet Explorer), its impossible to implement it ;-(
Of course if its not too much text, you can just make a picture instead of text, but its not the same...
ASKER
I could live with an extra line of numbering if the outline structure and text-align:justified could be preserved.
ASKER
I forgot to say, also, that I expect 99% of my users would viewing it with IE6, if that helps.
Yes but IE doesnt even put integer count of lines... its like 3.2 lines.... so it really cant be done ;-(
ASKER
OK, then I think it would be best to output to the format shown in http://216.92.61.99/sampleWithNumbers.htm , and somehow estimate the amount of line numbers needed, based on the total # of words in the html source that is stored in the variable.
If I make it estimate a little high, I might end up with a few extra lines of numbering, but that would be better than having too few.
Could you please explain how you got your format to keep the line numbers with the text no matter what width the page is viewed at? I would like to try to incorporate that aspect of your script into mine. Thanks.
If I make it estimate a little high, I might end up with a few extra lines of numbering, but that would be better than having too few.
Could you please explain how you got your format to keep the line numbers with the text no matter what width the page is viewed at? I would like to try to incorporate that aspect of your script into mine. Thanks.
I just set div width (the one with text) to fixed widht then counted how much space (pixels) does the text takes and counted lines : linecount = text_width_in_pixels / fixed_div_width
ASKER
I'm working on it and will let you know when I have something to look at. Thanks.
ASKER
OK. Here is the result ( http://216.92.61.99/div5arial.php ) of a crude number-of-lines estimation formula:
$counttext = strip_tags($text);
$count = strlen($counttext);
$numlines = round($count/57, 0);
(See the php script here: http://216.92.61.99/div5arial.txt .)
This is based on an extremely rough estimation involving a ballpark figure of about 57 Arial average characters per line when the pixel width of the main div is 640. In testing, it often overestimates and puts a couple too many lines of numbering (e.g., http://216.92.61.99/div5arial3.php ). That's not so bad, as I would rather have too many than not enough. Any suggestions on how to improve the accuracy? Thanks.
$counttext = strip_tags($text);
$count = strlen($counttext);
$numlines = round($count/57, 0);
(See the php script here: http://216.92.61.99/div5arial.txt .)
This is based on an extremely rough estimation involving a ballpark figure of about 57 Arial average characters per line when the pixel width of the main div is 640. In testing, it often overestimates and puts a couple too many lines of numbering (e.g., http://216.92.61.99/div5arial3.php ). That's not so bad, as I would rather have too many than not enough. Any suggestions on how to improve the accuracy? Thanks.
Ok but "$bounds = ImageTTFBBox($fontsize,0,'
ASKER
Good. I guess I was confused, thinking you had said that won't work in IE when the text contains <OL> outline format. But if it will work, that would be great. Please show me exactly how to modify my script (which uses Arial 10 pt and a div width of 640) to include that function. (Notice, I had changed the font from "px" to "pt", as the text was coming out at strange sizes with the "px.") Thanks.
ASKER
It is not putting in enough line numbers when I use $bounds = ImageTTFBBox($fontsize,0,'
(The "arial.ttf" file is in my web document root, so I just saying 'arial.ttf' instead of './fonts/arial.ttf').
It is putting 23 line numbers, whereas this amount of text needs more like 31.
Please see my script at
http://216.92.61.99/divarial-box2.txt and the results at http://216.92.61.99/divarial-box2.php . Thanks.
(The "arial.ttf" file is in my web document root, so I just saying 'arial.ttf' instead of './fonts/arial.ttf').
It is putting 23 line numbers, whereas this amount of text needs more like 31.
Please see my script at
http://216.92.61.99/divarial-box2.txt and the results at http://216.92.61.99/divarial-box2.php . Thanks.
ASKER
And here is the result when I specify "10pt", which is what I actually want to use, as it is the standard readable size (instead of "10px"): http://216.92.61.99/divarial-box3.php .
Well... as i said, the problem is that you dont really know how to estimate lines count when using <ol> ... because every browser places random horizontal space between items :-(
ASKER
So does that leave me with using a rough estimate formula like:
$counttext = strip_tags($text);
$count = strlen($counttext);
$numlines = round($count/57, 0);
$counttext = strip_tags($text);
$count = strlen($counttext);
$numlines = round($count/57, 0);
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
PHP
PHP is a widely-used server-side scripting language especially suited for web development, powering tens of millions of sites from Facebook to personal WordPress blogs. PHP is often paired with the MySQL relational database, but includes support for most other mainstream databases. By utilizing different Server APIs, PHP can work on many different web servers as a server-side scripting language.
125K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
You can always use divs...