blog documentation FAQ followers forum marketplace services youtube

solved pre tag in pages

The Jamroom Network » Forum » Installation and Configuration » Page » pre tag in pages
sekeri
sekeri
@ilker
10 years ago
334 posts
I have been using pre tags to display guitar tabs properly in my pages. So far it worked just fine. But now I am transferring pages into Jamroom and it does not work the way it is supposed to work I think.

There is a big space between each line(or an empty line, not sure). Can you please take a look at the attached picture. As far as I know texts in pre tag should be displayed as it is?

Should I update a css item?
pre_tag.png
pre_tag.png  •  115KB


updated by @ilker: 08/03/14 02:39:24PM
michael
@michael
10 years ago
7,714 posts
My first place to look would be the source code of the output text and look to see if there is a br at the end of each line of score.

If there is then it is an issue of nl2br.
sekeri
sekeri
@ilker
10 years ago
334 posts
Sorry, I forgot to tell you that I already checked it. It is okay in the page source without any br tags
michael
@michael
10 years ago
7,714 posts
If its ok in the page source, then you're right, the next place to look is in the CSS.
sekeri
sekeri
@ilker
10 years ago
334 posts
Do you have any idea to fix how pre tag is displayed in the css?
sekeri
sekeri
@ilker
10 years ago
334 posts
Okay now I know the reason but don't know how to solve it.

{$item.lesson_body}
works just perfect. Just like

<pre>
E||--2----||
B||--3----||
G||--2----||
D||--0----||
A||--------||
E||---------||
</pre>


but
{$item.lesson_body|jrCore_format_string:$item.profile_quota_id}

format string somehow adds line breaks
<pre>
E||--2----||<br />
B||--3----||<br />
G||--2----||<br />
D||--0----||<br />
A||--------||<br />
E||---------||<br />
</pre>

Can you please help on this?
SteveX
SteveX
@ultrajam
10 years ago
2,584 posts
If you dont want formatting, just use
{$item.lesson_body}



--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
sekeri
sekeri
@ilker
10 years ago
334 posts
I sure want formatting. Otherwise it does not embed files into the page.

But i think formatting should not add anything in a pre tag like this?
SteveX
SteveX
@ultrajam
10 years ago
2,584 posts
You could use css to set the height of a line break within pre tags to 0


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
brian
@brian
10 years ago
10,148 posts
sekeri:
I sure want formatting. Otherwise it does not embed files into the page.

But i think formatting should not add anything in a pre tag like this?

Yes it will - it does not "know" you have put pre tags around it, and so it replaces newline characters with breaks so the display will look correct (i.e. where the user has placed a newline the text will flow onto the next line).

What you need to do here is purposefully exclude the "nl2br" string modifier by adding it to the jrCore_format_string "blacklist" - i.e.

{$item.lesson_body|jrCore_format_string:$item.profile_quota_id:null:"nl2br"}

Let me know if that works for you.

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
sekeri
sekeri
@ilker
10 years ago
334 posts
brian:
Let me know if that works for you.

Yes !! it worked!! Thanks..

But I have some hesitations if this solution causes some side effects in the future. Because I have guitar tabs everywhere in my website I will apply this solutions in pages, blogs, etc.. too.

What happens in the future if it is really necessary to replace newline characters with breaks. I am not talking about guitar tabs but maybe somewhere else.

What do you think about it?
SteveX
SteveX
@ultrajam
10 years ago
2,584 posts
It might be better to have your guitar tabs in a field of their own rather than mixed in with the general text area. That way you can control the formatting of the tab separately.

You could also try getting rid of the br within pre tags using css.
Something like this might work:
pre br {
    display:none;
}



--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
sekeri
sekeri
@ilker
10 years ago
334 posts
SteveX:

Something like this might work:
pre br {
    display:none;
}


I used your suggestion. Brain's solution worked too but I think modifying the css only for pre tag is a safer way to get the same result.

Thanks Steve, Thanks Brian !!!

Tags