Recent Topics

1 May 26, 2011 12:22    

Hi all.
In the am code highlighter plugin provided with the 4.0.5 version, the line numbers are created with the help of a vertical sprite image.
The settings for the background position in the blog/plugins/code_highlight_plugin/amcode.css are realized in percent.

td.amc_line { padding:0 5px; font-size:0; width:auto; }
td.amc_line div { padding-right:9px; height:10px; }
.codeblock .amc0 { background-position:90% 100%; }
.codeblock .amc1 { background-position:90% 0%; }
.codeblock .amc2 { background-position:90% 11%; }
.codeblock .amc3 { background-position:90% 22%; }
.codeblock .amc4 { background-position:90% 33%; }
.codeblock .amc5 { background-position:90% 44%; }
.codeblock .amc6 { background-position:90% 55%; }
.codeblock .amc7 { background-position:90% 67%; }
.codeblock .amc8 { background-position:90% 78%; }
.codeblock .amc9 { background-position:90% 89%; }


Since the exact positioning of vertical sprites in percent can only be realized with quite exact floats, i.e. decimal numbers, which are not used here, you have slight vertical offsets or displacements when a line number becomes multi-digit. Especially in IE but also in Firefox and Webkit browsers like Safari or Chrome. Even if we changed the values to more exact values like so:

.codeblock .amc0 { background-position:90% 100%; }
.codeblock .amc1 { background-position:90% 0%; }
.codeblock .amc2 { background-position:90% 11.111%; }
.codeblock .amc3 { background-position:90% 22.222%; }
.codeblock .amc4 { background-position:90% 33.333%; }
.codeblock .amc5 { background-position:90% 44.444%; }
.codeblock .amc6 { background-position:90% 55.555%; }
.codeblock .amc7 { background-position:90% 66.666%; }
.codeblock .amc8 { background-position:90% 77.777%; }
.codeblock .amc9 { background-position:90% 88.888%; }


we would still have these displacements in IE7 and below due to a rigid rounding behaviour of floating points in this browser.
A good treatise about the whole issue can be found here:
http://blogs.sitepoint.com/css-using-percentages-in-background-image/

Inasmuch the displacements don't really look nice I recommend to set the vertical positions in pixels as so:

.codeblock .amc0 { background-position:90% -90px; }
.codeblock .amc1 { background-position:90% 0px; }
.codeblock .amc2 { background-position:90% -10px; }
.codeblock .amc3 { background-position:90% -20px; }
.codeblock .amc4 { background-position:90% -30px; }
.codeblock .amc5 { background-position:90% -40px; }
.codeblock .amc6 { background-position:90% -50px; }
.codeblock .amc7 { background-position:90% -60px; }
.codeblock .amc8 { background-position:90% -70px; }
.codeblock .amc9 { background-position:90% -80px; }


The horizontal position can only be done in percent, since the developers of this plugin used an intelligent stacking of div containers to keep the line numbers flexible.

Hope this will help others who do not accept an optical flaw like the described one.

Cheers,
noRiddle

2 May 26, 2011 21:13

Thanks for the info. Would you mind posting a couple of "before" and "after the fix" screenshots.

3 May 26, 2011 23:32

sam2kb wrote:

Thanks for the info. Would you mind posting a couple of "before" and "after the fix" screenshots.

Here you go:
http://blog.revilonetz.de/Firefox4.0.1_line_numbers_displaced.jpg
http://blog.revilonetz.de/Firefox4.0.1_line_numbers_okay.jpg

The first pic has got the original background positions indicated in percent.
The second one is with my changes to pixels.

I must admit I couldn't reproduce the flaw in IE7 again (don't have possibility for IE6 in the moment).
It seems to be that especially the new Firefox has got problems with the alignment of the line numbers.
So I must revise to a certain extend and apologize for that.
(dam... browser compatibilities)

Anyway, if we indicated the vertical background position in pixels, we'd be on the secure path.

Btw.: Do you know how to get long lines to wrap in this code highlighter plugin ?
In my test post I used long code lines and they ruined my design by extending the long lines across the sidebar.

noRiddle

*edit* I am on a Windows PC

4 May 26, 2011 23:44

Btw.: Do you know how to get long lines to wrap in this code highlighter plugin ?

Try overflow: scroll

<div style="overflow:scroll; width: 200px"><p style="width:400px">Long line</p></div>

5 May 27, 2011 00:33

A

.codeblock {overflow-x: scroll;}


did it, thanks.
Is there no way to make lines wrap without changing line number ?
Think I read sth. about that somewhere, just can't remember where...

What do you think about the line number displacement ?

6 May 27, 2011 00:49

Addendum:
Actually a

.codeblock {overflow-x: auto;}


did it, since with scroll all code examples would show the scrollbar, even when it is not needed.
The plugin adds a class amc_short to the .codeblock - div which has no properties in the blog/plugins/code_highlight_plugin/amcode.css.
I have got the impression that this plugin is not technically mature yet.
It is also a pity that you can't use it in comments.

Besides:
Considering what I read about the b2evolution team splitting, would you recommend to take Quam Plures instead ?
(If I'm not offending anybody here)

7 May 27, 2011 01:25

Considering what I read about the b2evolution team splitting, would you recommend to take Quam Plures instead ?

It wouldn't hurt to give it a shot. It's not just a re-branded product, QP's got features not found in b2evo 4 and vise versa. I personally prefer b2evo 4 over QP.

8 May 27, 2011 02:30

Thanks for your opinion.

noRiddle

9 May 27, 2011 10:49

It must just be me, or maybe the evo 4 version, but code auto-wraps/scrolls, always has ?

Thanks for the css work, I'll have to look into that when I get a chance.

I have code in comments in one incarnation of that plugin ( running on 2.4 @link [url=http://innervisions.org.uk]here[/url] ). I can send you a copy for you to diff the changes.

noRiddle wrote:

since the developers of this plugin used an intelligent stacking of div containers to keep the line numbers flexible.

Did Scott and I just get called intelligent! :O

¥

10 May 27, 2011 13:36

@Yabba
Oh man, the site you linked to is confusing (sorry, seems to be yours ;) ).
Many links I clicked don't lead nowhere.
Headlines, comments etc.

Anyway, I found how to make the code highlighter work in comments too but only when a commenter is registered.

As to the wrap-issue though, I couldn't find a reason why the code lines don't wrap
but they don't.
Don't think it's an template or skin issue.
I would appreciate if you sent me a copy of your "incarnation" of the plugin,
thanks so much.
I'll report about the differences I found
and, if I find the reason, tell you about the wrapping issue.

noRiddle

Addendum:
What do I know ?, who ever was involved, the approach with the reversed stacked div containers to display flexible line numbers is intelligent,
whether you are, I don't know yet ;)

11 May 27, 2011 15:06

You'll be pleased to know that the next incarnation of my blog looks a smidge less tacky ... not a lot mind, but a smidge.

You can test code in comments @link [url=http://upgrade.innervisions.org.uk/blog159.php/2010/10/26/replace-complication-and-reboot]test blog[/url]

You can download *that* incarnation of it @link [url=http://upgrade.innervisions.org.uk/code_highlight_plugin.zip]here (zip)[/url]

Note : It's been ported to a different app but the code base is similar enough that you *should* be able to grab the bits you need.

I think it must have been Scott that did the nested divs ;)

¥

12 May 27, 2011 18:16

Thanks Yabba.
As to your test blog: Your taste is extraordinary :D

Thanks for the zip file.
As soon as I find the time, I will clarify things.

Have to open up another thread, omg, get a bad error notice somewhere on version 4.0.5

So long and thanks again,
to you both, sam2kb and Yabba.

noRiddle

13 May 28, 2011 17:36

noRiddle wrote:

Your taste is extraordinary :D

That's certainly one way of phrasing it :D ... looks even funkier in IE, mainly because I haven't even started on xbrowser yet ;)

¥

14 May 28, 2011 19:30

Omg, how I love IE...
Had a glance at your site in IE7, ... welcome to the world of Nanosquashy,
or was it Picomellow ?

Besides, I would be interested in how you managed the codeblock thing to work without being logged in.
On my page it only works when you are registered and logged in.

(Still need some time to understand all the relations in this great opus b2evo.)

15 May 28, 2011 19:39

	/**
	 * @see Plugin::CommentFormSent()
	 */
	function CommentFormSent( & $params )
	{
		if( $this->Settings->get( 'render_comments' ) )
		{ // render code blocks in comment
			$params['content' ] = & $params['comment'];
			$this->FilterItemContents( $params );
			// remove <pre>
			$params['comment'] = preg_replace( '#(<\!--\s*codeblock[^-]*?\s*-->)<pre><code>(.+?)</code></pre>(<\!--\s+/codeblock\s*-->)#is', '$1<code>$2</code>$3', $params['comment'] );
		}
	}


	/**
	 * @see Plugin::BeforeCommentFormInsert()
	 */
	function BeforeCommentFormInsert( $params )
	{
		if( $this->Settings->get( 'render_comments' ) )
		{ // render code blocks in comment
			// add <pre> back in so highlighting is done, will be removed by highlighter
			$params['Comment']->content =  preg_replace( '#(<\!--\s*codeblock[^-]*?\s*-->)<code>(.+?)</code>(<\!--\s+/codeblock\s*-->)#is', '$1<pre><code>$2</code></pre>$3', $params['Comment']->content );
		}
	}


	/**
	 * @see Plugin::FilterCommentContent()
	 */
	function FilterCommentContent( $params )
	{
		if( $this->Settings->get( 'render_comments' ) )
		{ // render code blocks in comment
			$this->RenderItemAsHtml( $params );
		}
	}

Don't get me started on IE ... sorely tempted to deliver the "css naked day" version of my site to it ... but fairly sure it can fuck up plain text browsing :-S

¥

16 May 28, 2011 21:01

Thank you very much for the code.
I'll try it out soon.

noRiddle

P.S.
Someone must mention that you do a great job being present on this forum so much,
both of you, sam2kb and Yabba.
Thank you very much.

17 Sep 10, 2011 21:20

Hello noRiddle,

I am a bit unclear about what you said in your earlier posts.

Would you finally recommend we use your CSS instead of the % CSS to get an overall better display in most (modern) browsers?

Thank you.

18 Sep 11, 2011 06:19

Hi fplanque.
That's exactly what I wanted to recommend, yes.
But who am I to recommend sth to you guys.
I just had some problems with a certain displacement of the line numbers and using px instead of percent gives you a perfect result. (Please see the screenshots I posted earlier.)

Thanks for your great work,
noRiddle


Form is loading...