Menu
▾
▴
#110 Line numbers in GESHI_HEADER_PRE_TABLE mode
open-accepted
8
2012-12-25
2008-08-11
No
If the header type is set to GESHI_HEADER_PRE_TABLE,
1. The setting of start_line_numbers_at() is ignored.
2. The last line number is not aligned if viewed with Internet Explorer.
The attached patch will fix these problems.
Logged In: YES
user_id=1594854
Originator: NO
The conditional you removed had a purpose, you add one \n too much. This matters because we are inside <pre>.
Correct bugfix was applied in r1753, thanks for the report.
Regarding the number alignment... Yes I know that. It's really a pity. Windows somehow manages it to use monospaced fonts which have different lineheights. And setting line-height doesn't seem to help either... BenBE found a workaround but that one is requiring two tables which is kinda nasty. It works though. As I see no other working alternative I'll apply it and update this bug report accordingly.
PS: Next time please report two bugs.
Logged In: YES
user_id=1594854
Originator: NO
If possible please check current trunk. I've changed the HTML markup and that should (hopefully™) work now even on Windows...
Logged In: YES
user_id=2176884
Originator: YES
I'd tried the current (Rev.1761) trunk.
That's just my personal opinion, though, the previous markup is less problematic. The current implementation has a problem that line numbers don't align with the corresponding code.
The new markup contains two tables, for line numbers and for highlighted codes. It seems difficult to keep their heights equal, even if stylesheets are tweaked. When I change font size of browser, for example, the block of line numbers sometimes gets taller than the code, and sometimes gets shorter...
Logged In: YES
user_id=2176884
Originator: YES
As you said, GeSHi 1.0.8 has a problem of number alignment; it might be caused by lack of style settings. In GESHI_HEADER_PRE_TABLE mode, GeSHi 1.0.8 generates such an HTML:
<table class="php" style="font-family:monospace;"><tbody><tr class="li1"><td class="ln"><pre>1
2
3</pre></td><td><pre class="de1">line1
line2
line3</pre></td></tr></tbody></table>
The problem is that only the second <pre> tag has an explicit margin setting. The margin for the first <pre> tag is unknown, but it is probably set to nonzero. So, I've tried to add the following style:
.ln pre {margin:0;}
In my case, this setting solves the problem.
Logged In: YES
user_id=1594854
Originator: NO
as I'm a Linux user it would be great if you could check it more thoroughly:
Does it work with your fix in:
- Firefox 3
- IE 6
- IE 7
- Opera 9.5
What about Safari? Any Mac user reading this?
Logged In: YES
user_id=2176884
Originator: YES
Before doing the test, I'd like to confirm a couple of things.
I noticed two types of misalignment in GeSHi 1.0.8.
The first is a horizontal misalignment of the last line number I first reported.
(Screenshot: http://sample.revulo.com/geshi_horizontal_misalignment.png )
I investigated the cause a little more; I had customized the stylesheet and had overwritten the default setting of ".ln {width:1px;}". The above problem occurs in this special case. Appending a line feed to the last line number fixes this problem.
The second is a vertical misalignment between line numbers and the corresponding code.
(Screenshot: http://sample.revulo.com/geshi_vertical_misalignment.png )
At first, I didn't notice it since I used additional stylesheets, which had the setting of "pre {margin:0}". But when I disabled all other stylesheets, this bug appeared.
I believe we now discuss about the second problem. Is this right?
If so, I'm planning to test as follows:
* Use GeSHi 1.0.8 (not the current trunk)
* Not use enable_classes() method and any other external stylesheets
* Use a simplified HTML: "<html><body>(highlighted code)</body></html>"
* Compare the results before and after changing the first <pre> tag into <pre style="margin:0;">
Logged In: YES
user_id=1106788
Originator: NO
Well, there's quite another problem, milian tried to point out in an earlier comment.
Take some snippet of about 50 lines with bold, italic and normal fonts mixed. In FF3 AND IE6\7 you sometimes get different heights of line numbers and the highlighted code. IDK if this is reproduceable with the Unicode versions of the Microsoft fonts. At least I can reproduce it on Win2K and WinXP.
For your offset problem: That might have been caused by the superflous linebreak at the end of the line numbers cell.
Yet I can't reproduce the alignment problem with the last line number.
Logged In: YES
user_id=2176884
Originator: YES
Unfortunately I have not encountered that problem even if the highlighted code is a mixture of bold and italic fonts. My browser uses "MS Gothic" Japanese font as a monospace font, so it might be a font-dependent problem.
Regarding the problems I have mentioned, I prepared test files.
http://sample.revulo.com/geshi-1.0.8_alignment_test.zip
If possible, could you try these files with IE? geshi-1.0.8.html is the original file generated by GeSHi 1.0.8. On my computer, geshi-1.0.8.html and geshi-1.0.8_margin0_width2em.html produce the problem.
Logged In: YES
user_id=2176884
Originator: YES
Oh, I understand what you said as a bold and italic font problem. I can reproduce it by setting "font-family: Courier New;" instead of "font-family: monospace;".
Then, I also tried: "font-family: DejaVu Sans Mono, monospace;" (DejaVu font has been installed on my WinXP). This setting was very helpful for IE, but had the opposite effect on Firefox...
Yes, this must be a difficult problem, so I think it's worth switching to the new HTML markup if it can solve almost the problems. But it would be nice if the old GESHI_HEADER_PRE_TABLE mode is also supported. The HTML generated by GeSHi 1.0.8 is useful to me.
Logged In: YES
user_id=2176884
Originator: YES
Does the current trunk really solve the problem? I don't yet succeed in aligning line numbers using trunk...
Now, I found an alternative solution for GeSHi 1.0.8. The solution is:
(a) Add "line-height: 1.2em;" to the <table> tag, and
(b) Set "font-family: Courier,monospace;" instead of "font-family: monospace;".
These settings flatten a highlighted code even if bold and italic fonts are contained.
Although setting (a) is sufficient for almost all browsers, it doesn't have an effect on Firefox. The only solution I could find for Firefox is to use a font other than Courier New.
I tested this fix on Windows with:
- IE 6
- IE 7
- Firefox 2.0.0.16
- Firefox 3.0.1
- Opera 9.52
- Safari 3.1.2
and they all showed good results.
Here are the files I used for the test:
http://sample.revulo.com/geshi-1.0.8_align_linenumbers.zip
Could you please check it out with your browsers?
Logged In: YES
user_id=1594854
Originator: NO
Yes, that one works for me quite well. I've added the background-color in the link below just for testing purposes, to make sure that the two containers are really properly aligned. They are for me.
A question though: I've given both pre's the same style, does it still work on Windows? What about Safari on a Mac?
http://milianw.de/files/geshi-alignment.html
Also note that someone (RT^ on IRC) gave me this link:
http://www.wklejto.pl/
He did some changes to GeSHi 1.0.8 and said it works now across 30+ Browsers for him including Win+Mac. Me on Linux though can't reproduce that, which is a pity since I did not have any problems before with either variant + style :P
If more people can verify that the linked example on my page renders well across browsers I will apply it to GeSHi. Please test!
Logged In: YES
user_id=1594854
Originator: NO
Update: The linked style seems to work fine on various browsers, here's an update, would be nice if you guys could take a look again:
http://milianw.de/files/geshi-alignment-merged.html
Logged In: YES
user_id=1106788
Originator: NO
For now we did some Browser Screenshotting for various systems and rated by the screenshots that succeeded none failed to display the highlighting correctly. Only users of Dillo on Gentoo (IDK if this browser is actually used anyway) might experience some problems; but those are not related to this issue *G*
We're trying to complete the screenshot series but given no browser failed so far you could expect this to become the overall result. That means this solution will be the one to be implemented for the next version to fix this issue.
Logged In: YES
user_id=2176884
Originator: YES
I noticed it might be possible to remove "Courier" from the font-family. "vertical-align:top;" in your style has a surprising effect; it enables to use any monospaced font (including evil "Courier New") without problems.
I tested with major browsers (IE, Firefox, Opera, Safari) only, however, no problems were found so far.
Logged In: YES
user_id=1594854
Originator: NO
Ok, did some changes to trunk, reverted to the old table style, applied the css fixes... It's not 100% what I could do in my test case, since there is no easy way to do `.language * {...}` when classes are disabled.
Still - could you guys take a look at current trunk and see whether it works for you?
Also helpful imo is the following when checking for proper alignment:
echo str_replace('</pre>', '__</pre>', $GeSHi->parse_code());
Logged In: YES
user_id=2176884
Originator: YES
Current trunk again causes the problem with my Firefox and Opera. The "vertical-align:top;" in $code_style, $line_style1, $line_style2 and $table_linenumber_style had no effect. Seems like these styles are meaningless.
Instead, I could successfully fix the problem by adding:
<style>
.php span {vertical-align: top;}
</style>
In other words, we should use "font-weight:bold;" and "font-style:italic;" together with "vertical-align:top;". Therefore, my proposition is:
(a) Introduce a hack to achieve ".php span {vertical-align: top;}" when GESHI_HEADER_PRE_TABLE is selected. Modification of finalise(), get_stylesheet() and cssgen2.php would be needed.
or
(b) Set "font-family: Courier,monospace;" instead of "font-family: monospace;".