You can sign up to get a daily email of our articles, see the Mailing List page!
  Go to:
[SOLVED] Code tag ignoring whitespace
stretch611 commented on 20 November 2018 at 3:24 am UTC

I noticed this while posting this comment:

https://www.gamingonlinux.com/articles/surviving-mars-space-race-expansion-and-gagarin-free-update-have-released-working-well-on-linux.12977/comment_id=140815

I used the code tag for formatting... In preview, this allowed me to not ignore whitespace and all the numbers lines up. But when posted it started to ignore white space. So you probably have a difference in your stylesheets or a missing PRE tag in HTML.

liamdawe commented on 20 November 2018 at 10:45 am UTC

Your right, the we use the HTML code tag which isn't really all that great. Can probably achieve a better result with the pre tag since it automatically preserves whitespace with the same styling we use now. Will look into it.

stretch611 commented on 20 November 2018 at 2:38 pm UTC

Ok, so I figured why was I complaining and having you look at the code... After all it is HTML and I have all the display code here in my browser.

It appears as if the html/css formatting is not the problem here. The tags in both places appear to have the same markup and css structure.

The problem actually appears to be when you generate the HTML. When you "view source" on the article/comment page, the extra whitespace is stripped out completely. It does not show the whitespace because the page generating the HTML removes it.

However, the whitespace still exists in the database (or whatever method you use to store comments.) This is evident because if I go back and attempt to edit my comment, the whitespace still appears inside the textarea.

So in order to fix the problem, you need to determine where the whitespace is being stripped out. Most likely it is being done as a page directive when generating the whole page, or, it is probably being done when sanitizing the comment for output. (i.e. most likely where you strip harmful html tags from the posted comment.)

Of course to figure this out would require access to the actual server side source code used for the website which I don't have access too... (and you don't want to see my bill for this either )

Shmerl commented on 20 December 2018 at 4:22 am UTC

Yeah, I was hit by this. You shouldn't just use code tag. You should also apply CSS style. Something like:


.preformatted {
    font-family: monospace;
    white-space: pre;
}

stretch611 commented on 21 December 2018 at 4:41 am UTC

ShmerlYeah, I was hit by this. You shouldn't just use code tag. You should also apply CSS style. Something like:


.preformatted {
    font-family: monospace;
    white-space: pre;
}

Personally, I would still use the tag... It is still a valid tag in HTML 5 and it is quite useful in describing the contents withing the tag. Though, in modern CSS, I would probably make sure to use what you have as part of the tag itself instead of creating a class. (unless I wanted the class for different tags.)

code {
    font-family: monospace;
    white-space: pre;
}


That being said... the problem is not with the either the tag or the CSS in this case. The site is removing the extra spaces when creating the page. Using View source on the page will confirm this.

You can actually confirm by viewing the source on this page now that you used the code tag on it. Posting or editing a reply will confirm that the spaces still exist on the database when you go into the in page editor.

Cedron commented on 22 April 2019 at 6:13 pm UTC

I have just encountered the same issue:

https://www.gamingonlinux.com/forum/topic/3851

When I edit/preview, it looks fine. When I view the post it is scrunched.

I've replaced the space characters with underscores so they can be seen clearly. Strange, a few spaces remained in the scrunched version as well.

Edit/Preview excerpt:

_____[lefttrigger]__________[righttrigger]
____[leftshoulder]__________[rightshoulder]

_____________[back][guide][start]

__________[dpup]________________[y]
___[dpleft]=||=[dpright]_____[x]___[b]
_________[dpdown]_______________[a]

____________[leftstick]__[rightstick]
__________(leftx,lefty)__(rightx,righty)


View excerpt:

[lefttrigger]_[righttrigger]
[leftshoulder]_[rightshoulder]
[back][guide][start]
[dpup]_[y]
[dpleft]=||=[dpright]_[x]_[b]
[dpdown]_[a]
[leftstick]_[rightstick]
(leftx,lefty)_(rightx,righty)

liamdawe commented on 24 April 2019 at 12:50 pm UTC

Solved: Okay, turns out the issue was Cloudflare. They were minifying the HTML, which was condensing spaces into a single space which was screwing things up. I've made it so that code tags now actually convert spaces to the proper HTML entity of non-breaking spaces (only when rendering, so you never see it) so this will not happen again.

See it working below:

                           look ma lots of space

<pre>
  <code>
    My pre-formatted code
    here.
  </code>
</pre>                 test

dsfsdf

sdfdf

Cedron commented on 25 April 2019 at 2:47 pm UTC

Thanks, my first posting looks a lot better now. However, it still seems to be "minimizing" blank lines away.

Side note: I still haven't gotten any replies on my opinion request. This is one of those cases where that is informative in itself. I was going to post some sample code, but there doesn't seem to be many programmers here or much interest in programming. I will post a notification in the programming forum when I post my library code at another site. Maybe somebody will be interested in that.

liamdawe commented on 25 April 2019 at 3:15 pm UTC

CedronThanks, my first posting looks a lot better now. However, it still seems to be "minimizing" blank lines away.
Only the code tag accepts the extra spacing.

Cedron commented on 25 April 2019 at 4:27 pm UTC

This is another test.

Here is a program, using my new library, which will show all gamepad events and their translations into ControllerDb/SDL names/values:


' Gambas module file
  
'=============================================================================
Public Sub Main()
  
'---- Show Fancy Stuff
  
        Fancy.PrintInfo()
  
'---- Get List of Attached Gamepads/Joysticks
  
        Dim theGamePadList As String[]
  
        theGamePadList = GamePadClass.GetTitleList()
  
'---- Build Array of GamePad Objects
  
        Dim theGamePads As New GamePadClass[theGamePadList.Count]
        Dim g As Integer
  
        For g = 0 To theGamePadList.Max
          Print theGamePadList[g]
          theGamePads[g] = GamePadClass.Open(g)
        Next
  
'---- Implement Event Loop
  
        Dim t As Integer
        Dim theGamePad As GamePadClass
  
        For t = 0 To 600
          For g = 0 To theGamePads.Max
            theGamePad = theGamePads[g]
            GoSub GamePadTimerTick            
          Next
          Sleep 0.1  
        Next
  
'---- Exit
  
        Print "All done!"
        Return
  
'-----------------------------------------------------------------------------
GamePadTimerTick:
  
        Do Until theGamePad.GetFancyEvent() < 0
           GoSub ShowGamePadEvent
        Loop
  
        Return
  
'-----------------------------------------------------------------------------
ShowGamePadEvent:
  
        Print g;;
        Print theGamePad.MyGPE.EvdevType;;
        Print theGamePad.MyGPE.EvdevCode,
        Print theGamePad.MyGPE.EvdevValue,
        Print theGamePad.MyGPE.Kind;;        
        Print theGamePad.MyGPE.Number,
        Print theGamePad.MyGPE.Value,
        Print theGamePad.MyGPE.Entry,
        Print theGamePad.MyGPE.TimeSec
  
        Return
  
End
'=============================================================================


Post Edit:

The intitial posting of this squeezed out all the blank lines. Going back and introducing a couple of spaces on each blank line preserves the line so it now looks okay. (This shouldn't be necessary.)

Also, when in edit mode, the button you think would say "Save" and works like it says "Save" has the label "Edit".




liamdawe commented on 26 April 2019 at 9:41 am UTC

CedronThe intitial posting of this squeezed out all the blank lines. Going back and introducing a couple of spaces on each blank line preserves the line so it now looks okay. (This shouldn't be necessary.)
Cloudflare's minifying strikes again! I've done a quick fix, we're already converting newlines to html br for the bbcode it was just in the wrong place (before the code tag was sorted). I've moved it to after, this fixes the rendering of new lines for code tags now too.

CedronAlso, when in edit mode, the button you think would say "Save" and works like it says "Save" has the label "Edit".
I've also adjusted the text there to be clearer and match the text on comment editing.

  Go to:

Due to spam you need to Register and Login to comment.


Or login with...

Livestreams & Videos
Community Livestreams
See more!
Popular this week
View by Category
Contact
Latest Comments
Latest Forum Posts