Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: New forum layout breaks CODE tags.

  1. #1
    Join Date
    Jan 2006
    Location
    Sunny Southend-on-Sea
    Beans
    8,430
    Distro
    Kubuntu 20.04 Focal Fossa

    New forum layout breaks CODE tags.

    When browsing the forum on my phone, spaces are added between every letter on text inside CODE tags. It makes it very difficult to read. It behaved properly (aside from not being able to scroll) before the recent theme change.
    None but ourselves can free our minds

  2. #2
    Join Date
    Aug 2010
    Location
    Arizona USA
    Beans
    3,001
    Distro
    Ubuntu Development Release

    Re: New forum layout breaks CODE tags.

    'Code', in the new Ubu Forum threads, is a jumbled mess -- even on a desktop box!

    Actually, 'code' looks fine, when previewing it in the editor, but...

    The 'code' wraps to the next line (no horizontal scrolling) when submitted/viewed in the threads.

    Here's a sample of how 'code' looks in the threads (improperly formatted, e.g text wrapping)...

    Code:
    ##################################
    ##  RHYTHMBOX 2 (Experimental)  ##
    ##################################
    ${if_running rhythmbox}
    ${voffset -13}${font DroidSans:bold:size=8}${color4}RHYTHMBOX${offset 8}${color6}${voffset -2}${hr 1}${font}
    ${voffset 4}${font DroidSans:size=8.25}${color3}${if_match "${execpi 2 expr length "`qdbus org.mpris.MediaPlayer2.rhythmbox /\org/mpris/MediaPlayer2 org.mpris.MediaPlayer2.Player.Metadata | grep title | cut -c 14-""`"}" >= "48"}${alignr 15}${scroll 38 4* ${execi 2 qdbus org.mpris.MediaPlayer2.rhythmbox /\org/mpris/MediaPlayer2 org.mpris.MediaPlayer2.Player.Metadata | grep title | cut -c 14-""}}${font}${else}${alignc}${execi 2 qdbus org.mpris.MediaPlayer2.rhythmbox /\org/mpris/MediaPlayer2 org.mpris.MediaPlayer2.Player.Metadata | grep title | cut -c 14-""}${font}${endif}${endif}
    The 'code' sample (above) is virtually unreadable (on Chrome/Chromium) once it's submitted!

    I can only imagine how it looks on a phone.

    Compare it to the post preview (properly formatted, e.g. no wrapping)...




    Wrapping the 'code' in the threads (no horizontal scrolling) makes it practically unusable...
    Last edited by VinDSL; April 12th, 2013 at 09:35 PM. Reason: Clarification
    Intel ® P4 Extreme Edition 3.4 (Gallatin) || DFI ® LanParty PRO875B rev B1
    Crucial ® Ballistix Tracer PC4000 1GB || Mountain Mods U2-UFO Opti-1203
    XFX 7600GT 560M AGP (PV-T73A-UDF3) || Corsair HX520W Modular PSU

  3. #3
    Join Date
    Aug 2010
    Location
    Arizona USA
    Beans
    3,001
    Distro
    Ubuntu Development Release

    Test

    Test...

    * All 3 tags wrap the code!

    Code Tags
    Code:
    ##################################
    ##  RHYTHMBOX 2 (Experimental)  ##
    ##################################
    ${if_running rhythmbox}
    ${voffset -13}${font DroidSans:bold:size=8}${color4}RHYTHMBOX${offset 8}${color6}${voffset -2}${hr 1}${font}
    ${voffset 4}${font DroidSans:size=8.25}${color3}${if_match "${execpi 2 expr length "`qdbus org.mpris.MediaPlayer2.rhythmbox /\org/mpris/MediaPlayer2 org.mpris.MediaPlayer2.Player.Metadata | grep title | cut -c 14-""`"}" >= "48"}${alignr 15}${scroll 38 4* ${execi 2 qdbus org.mpris.MediaPlayer2.rhythmbox /\org/mpris/MediaPlayer2 org.mpris.MediaPlayer2.Player.Metadata | grep title | cut -c 14-""}}${font}${else}${alignc}${execi 2 qdbus org.mpris.MediaPlayer2.rhythmbox /\org/mpris/MediaPlayer2 org.mpris.MediaPlayer2.Player.Metadata | grep title | cut -c 14-""}${font}${endif}${endif}
    PHP Tags
    PHP Code:
    ##################################
    ##  RHYTHMBOX 2 (Experimental)  ##
    ##################################
    ${if_running rhythmbox}
    ${
    voffset -13}${font DroidSans:bold:size=8}${color4}RHYTHMBOX${offset 8}${color6}${voffset -2}${hr 1}${font}
    ${
    voffset 4}${font DroidSans:size=8.25}${color3}${if_match "${execpi 2 expr length "`qdbus org.mpris.MediaPlayer2.rhythmbox /\org/mpris/MediaPlayer2 org.mpris.MediaPlayer2.Player.Metadata | grep title | cut -c 14-""`"}>= "48"}${alignr 15}${scroll 38 4* ${execi 2 qdbus org.mpris.MediaPlayer2.rhythmbox /\org/mpris/MediaPlayer2 org.mpris.MediaPlayer2.Player.Metadata grep title cut -c 14-""}}${font}${else}${alignc}${execi 2 qdbus org.mpris.MediaPlayer2.rhythmbox /\org/mpris/MediaPlayer2 org.mpris.MediaPlayer2.Player.Metadata grep title cut -c 14-""}${font}${endif}${endif} 
    HTML Tags
    HTML Code:
    ##################################
    ##  RHYTHMBOX 2 (Experimental)  ##
    ##################################
    ${if_running rhythmbox}
    ${voffset -13}${font DroidSans:bold:size=8}${color4}RHYTHMBOX${offset 8}${color6}${voffset -2}${hr 1}${font}
    ${voffset 4}${font DroidSans:size=8.25}${color3}${if_match "${execpi 2 expr length "`qdbus org.mpris.MediaPlayer2.rhythmbox /\org/mpris/MediaPlayer2 org.mpris.MediaPlayer2.Player.Metadata | grep title | cut -c 14-""`"}" >= "48"}${alignr 15}${scroll 38 4* ${execi 2 qdbus org.mpris.MediaPlayer2.rhythmbox /\org/mpris/MediaPlayer2 org.mpris.MediaPlayer2.Player.Metadata | grep title | cut -c 14-""}}${font}${else}${alignc}${execi 2 qdbus org.mpris.MediaPlayer2.rhythmbox /\org/mpris/MediaPlayer2 org.mpris.MediaPlayer2.Player.Metadata | grep title | cut -c 14-""}${font}${endif}${endif}
    Intel ® P4 Extreme Edition 3.4 (Gallatin) || DFI ® LanParty PRO875B rev B1
    Crucial ® Ballistix Tracer PC4000 1GB || Mountain Mods U2-UFO Opti-1203
    XFX 7600GT 560M AGP (PV-T73A-UDF3) || Corsair HX520W Modular PSU

  4. #4
    Join Date
    Jun 2007
    Beans
    17,337

    Re: Test

    Vin - firefox is fine, google-chrome/chromium 'mess' up the code boxes with long lines

  5. #5
    Join Date
    Oct 2009
    Beans
    Hidden!
    Distro
    Ubuntu 22.04 Jammy Jellyfish

    Re: New forum layout breaks CODE tags.

    The only one that wraps is the php code.. at least for me. FF 19.0.2 on Win7.
    Come to #ubuntuforums! We have cookies! | Basic Ubuntu Security Guide

    Tomorrow's an illusion and yesterday's a dream, today is a solution...

  6. #6
    Join Date
    Aug 2010
    Location
    Arizona USA
    Beans
    3,001
    Distro
    Ubuntu Development Release

    Re: New forum layout breaks CODE tags.

    Quote Originally Posted by mc4man View Post
    Vin - firefox is fine, google-chrome/chromium 'mess' up the code boxes with long lines
    Quote Originally Posted by CharlesA View Post
    The only one that wraps is the php code.. at least for me. FF 19.0.2 on Win7.
    Yes, mc4man pointed this out in the +1 Forum.

    I have four browsers installed in this box:
    1. Chromium Canary (Chrome dev-trunk)
    2. Chromium Stable
    3. Opera-Next
    4. Firefox

    Chromium et al. is the only browser having this display problem, but...

    It only happens when viewing the resultant post, not when previewing the post in the editor.

    If we were to lay blame entirely on buggy browser rendering, wouldn't it happen in both instances?

    I'm *thinking* this is a bug in the new Ubu Forum theme. Why?

    If you go to the bottom of this page, and choose "Ubuntu Mobile Style", the 'code' displays correctly.

  7. #7
    Join Date
    Aug 2010
    Location
    Arizona USA
    Beans
    3,001
    Distro
    Ubuntu Development Release

    Re: New forum layout breaks CODE tags.

    Okay, I think I figured it out.

    All I had to do is go into the .bbcode container (pre.bbcode_code element) and add normal word-wrap.

    The .bbcode container is probably inheriting auto word-wrap from some other element, e.g. it's nested.

    Here's how it looks with normal word-wrap (mouse pointer shows where I added it)...


    Last edited by VinDSL; April 12th, 2013 at 02:17 AM. Reason: Addendum
    Intel ® P4 Extreme Edition 3.4 (Gallatin) || DFI ® LanParty PRO875B rev B1
    Crucial ® Ballistix Tracer PC4000 1GB || Mountain Mods U2-UFO Opti-1203
    XFX 7600GT 560M AGP (PV-T73A-UDF3) || Corsair HX520W Modular PSU

  8. #8
    Join Date
    Aug 2010
    Location
    Arizona USA
    Beans
    3,001
    Distro
    Ubuntu Development Release

    Re: New forum layout breaks CODE tags.

    I drilled down a little more...

    Evidently, the stylesheet responsible for this element, in the new theme, is 'additional.css'.

    I judge, all you would have to do is add 'word-wrap:normal' into that stylesheet, and life would be good again.


    additional.css (original)
    Code:
    <SNIP>
    
    .bbcode_container div.bbcode_code,.bbcode_container pre.bbcode_code{background-color:#EFEFEF;font-size:14px;overflow:auto}
    
    <SNIP>
    additional.css (patched)
    Code:
    <SNIP>
    
    .bbcode_container div.bbcode_code,.bbcode_container pre.bbcode_code{background-color:#EFEFEF;font-size:14px;overflow:auto;word-wrap:normal}
    
    <SNIP>
    webpath: http://ubuntuforums.org/clientscript...additional.css

    BTW, is the staging forum still available?

    I'd be glad to go over there and test the hack...

    EDIT

    ~cool

    Staging forum is still there...

    I tested the [CODE]whatever[/CODE] tags in all of the standard themes, and Chromium didn't display properly with any of them -- even the default VB 4 theme. However, the patch worked on all of the themes that I tested it against.

    Hrm...

    Maybe I should be complaining about this upsteam, on the VB web site. LoL!

    I wonder if they're aware they have a Chromium/Chrome problem...
    Last edited by VinDSL; April 12th, 2013 at 11:40 PM. Reason: Addendum
    Intel ® P4 Extreme Edition 3.4 (Gallatin) || DFI ® LanParty PRO875B rev B1
    Crucial ® Ballistix Tracer PC4000 1GB || Mountain Mods U2-UFO Opti-1203
    XFX 7600GT 560M AGP (PV-T73A-UDF3) || Corsair HX520W Modular PSU

  9. #9
    Join Date
    Nov 2008
    Location
    S.H.I.E.L.D. 6-1-6
    Beans
    Hidden!
    Distro
    Ubuntu Development Release

    Re: New forum layout breaks CODE tags.

    Quote Originally Posted by VinDSL View Post
    I drilled down a little more...

    Evidently, the stylesheet responsible for this element, in the new theme, is 'additional.css'.

    I judge, all you would have to do is add 'word-wrap:normal' into that stylesheet, and life would be good again.


    additional.css (original)
    Code:
    <SNIP>
    
    .bbcode_container div.bbcode_code,.bbcode_container pre.bbcode_code{background-color:#EFEFEF;font-size:14px;overflow:auto}
    
    <SNIP>
    additional.css (patched)
    Code:
    <SNIP>
    
    .bbcode_container div.bbcode_code,.bbcode_container pre.bbcode_code{background-color:#EFEFEF;font-size:14px;overflow:auto;word-wrap:normal}
    
    <SNIP>
    webpath: http://ubuntuforums.org/clientscript...additional.css

    BTW, is the staging forum still available?

    I'd be glad to go over there and test the hack...

    EDIT

    ~cool

    Staging forum is still there...

    I tested the [CODE]whatever[/CODE] tags in all of the standard themes, and Chromium didn't display properly with any of them -- even the default VB 4 theme. However, the patch worked on all of the themes that I tested it against.

    Hrm...

    Maybe I should be complaining about this upsteam, on the VB web site. LoL!

    I wonder if they're aware they have a Chromium/Chrome problem...
    if you use the "current2103" theme in staging does it still show up
    thanks
    Don't waste your energy trying to change opinions ... Do your thing, and don't care if they like it.

  10. #10
    Join Date
    Aug 2010
    Location
    Arizona USA
    Beans
    3,001
    Distro
    Ubuntu Development Release

    Re: New forum layout breaks CODE tags.

    Quote Originally Posted by sandyd View Post
    if you use the "current2103" theme in staging does it still show up
    thanks
    Works fine!

    I would swear I checked that theme earlier

    Anyway, yes, my test thread is displaying code correctly in Chromium.
    Intel ® P4 Extreme Edition 3.4 (Gallatin) || DFI ® LanParty PRO875B rev B1
    Crucial ® Ballistix Tracer PC4000 1GB || Mountain Mods U2-UFO Opti-1203
    XFX 7600GT 560M AGP (PV-T73A-UDF3) || Corsair HX520W Modular PSU

Page 1 of 2 12 LastLast

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •