19 Replies Latest reply: Jun 2, 2014 7:23 AM by Jon Fritz II RSS

    Is it possible to tell browsers NOT to interpret line breaks as spaces?

    jyeager11 Community Member

      <ul>
        <li>test 1</li>

        <li>test 2</li>

        <li>test 3</li>

      </ul>

      <ul>
        <li>test 1</li><li>test 2</li><li>test 3</li>

      </ul>

       

      As we all know, because line breaks are interpreted as spaces by browsers, the above two syntaxes will produce different results (with the former example inserting 3 more spaces than the latter one). As a result, I can't use "Apply Source Formatting", which adds line breaks after </li> tags.

       

      Short of disabling formatting for list items specifically, is there another way to tell the webpage to not treat those line breaks as spaces? So that the code can look as tidy on the back end as it does on the output? Because I *like* those line breaks in the code making everything clearer, I just don't want them to be interpreted as spaces.

        • 1. Re: Is it possible to tell browsers NOT to interpret line breaks as spaces?
          Nancy O. CommunityMVP

          Huh?  Can you provide an example of this?  And which browsers are you testing?

           

           

          Nancy O.

          • 2. Re: Is it possible to tell browsers NOT to interpret line breaks as spaces?
            osgood_ CommunityMVP

            Nancy O. wrote:

             

            Huh?

             

            Nancy O.

             

            Yeah, that was my first thought. I clearly have no idea what the OP is talkng about. Maybe they just want to format the source code from:

             

            <ul>
              <li>test 1</li>

              <li>test 2</li>

              <li>test 3</li>

            </ul>

             

             

            to:

             

            <ul>
              <li>test 1</li><li>test 2</li><li>test 3</li>

            </ul>

             

            Both sets of code above will produce the same output in a browser.

            • 3. Re: Is it possible to tell browsers NOT to interpret line breaks as spaces?
              jyeager11 Community Member

              Nancy O. wrote:

               

              Huh?  Can you provide an example of this?  And which browsers are you testing?

               

               

              Nancy O.

              I can't right this second, but your reaction leads me to believe that there's something in my CSS I might've overlooked file that could be affecting the behavior. Because when I remove the line breaks between the </ul> and <ul> tags, the superfluous space it adds there (in the output) goes away. I assumed this behavior was normal, but it appears by your reaction that it's not. It's doing it in both Chrome and IE, the only two browsers I tested on.

               

              EDIT: Actually, there are spaces there regardless, on account of the identing created by the Apply Source Formatting (prior to every <li> tag).

              • 4. Re: Is it possible to tell browsers NOT to interpret line breaks as spaces?
                MurraySummers CommunityMVP

                This may surprise you, but there are neither line breaks nor spaces in either version of the code, except in Code view. Both versions of HTML will look identical when rendered in a browser, or in Live view.

                • 5. Re: Is it possible to tell browsers NOT to interpret line breaks as spaces?
                  jyeager11 Community Member

                  MurraySummers wrote:

                   

                  This may surprise you, but there are neither line breaks nor spaces in either version of the code, except in Code view. Both versions of HTML will look identical when rendered in a browser, or in Live view.

                  I'm not sure what this means. Line breaks count as spaces and always have. And the "Apply Source Formatting" option idents elements as well (adding spaces). How can you say one example has no more line breaks or spaces than the other?

                   

                  In the two examples I provided, the first displays extra spaces (identing) and line breaks. The second literally has nothing between the </li> and <li> tags. No spaces, no line breaks, nothing.

                   

                  And on the output, those spaces show up.

                  • 6. Re: Is it possible to tell browsers NOT to interpret line breaks as spaces?
                    MurraySummers CommunityMVP

                    I'm not sure what this means. Line breaks count as spaces and always have.

                    Only HTML line breaks do - "<br>". Line breaks in Code view are NOT rendered line breaks unless they are actual code. And this -

                     

                    Here is a space ->          It will appear as a single space on the rendered page. HTML will not render 2 or more adjacent spaces UNLESS they are alternating space and non-breaking space constructions, e.g.,

                     

                    Here is a space ->           It will render as a large gap in the line on the page.

                     

                    On output (unless you mean something other than the rendered page or DW's Live view), the spaces do NOT show up.

                    • 7. Re: Is it possible to tell browsers NOT to interpret line breaks as spaces?
                      MurraySummers CommunityMVP

                      Let me try that again -

                       

                      <p>Here is a space ->      It will appear as a single space on the rendered page...</p>

                       

                      <p>Here is a space -> &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; It will appear as a single space on the rendered page...</p>

                      • 8. Re: Is it possible to tell browsers NOT to interpret line breaks as spaces?
                        MurraySummers CommunityMVP

                        Jeez - one more time -

                         

                        <p>Here is a space ->             It will appear as a large gap on the rendered page...</p>

                         

                        Now perhaps you and I are talking about different types of output. Please show us code that produces such gaps.

                        • 9. Re: Is it possible to tell browsers NOT to interpret line breaks as spaces?
                          MurraySummers CommunityMVP

                          Nevermind!

                           

                          Your two bits of code -

                           

                          <ul>
                            <li>test 1</li>

                            <li>test 2</li>

                            <li>test 3</li>

                          </ul>

                          <ul>
                            <li>test 1</li><li>test 2</li><li>test 3</li>

                          </ul>

                           

                          Will be identical in the browser and in DW's Live view.

                          • 10. Re: Is it possible to tell browsers NOT to interpret line breaks as spaces?
                            Nancy O. CommunityMVP

                            I put up a TEST page so the OP can compare code formatting with output in browsers.  In this example, both lists appear identical to me in FF, Chrome, IE & Opera.  Just for yucks, I added boilerplate.css to see if it made any difference and it did not.

                            List Test

                             

                             

                            Nancy O.

                            • 11. Re: Is it possible to tell browsers NOT to interpret line breaks as spaces?
                              jyeager11 Community Member

                              I'm not sure where anyone got the impression that I was talking about "adjacent" spaces. I was talking about simple spaces.

                               

                              Also, the list isn't formatted to be one answer per line. This skews the results. How can you tell if a spacebar was added after a </li> when the line breaks there?

                               

                              This would all be a lot easier if I could make my test pages public, which I can't right this second, but long story short, the list is displayed as : Test 1, Test 2, Test 3 when all 3 options are coded on the same line (in other words, <li>Test 1</li><li>Test 2</li> etc)... and Test 1 , Test 2 , Test 3 (notice the additional spaces) when I Apply Source Formatting (because that places each option on its own line in the code, and every line break in the code is treated as a spacebar).

                               

                              Note that by "line break" I am not referring to the <BR> tag. I am simply referring to source-side line breaks.

                              • 12. Re: Is it possible to tell browsers NOT to interpret line breaks as spaces?
                                Nancy O. CommunityMVP

                                OK.  My latest TEST page contains both extra spaces and carriage returns in the code.  I don't see any difference in the results, do you?

                                 

                                 

                                Nancy O.

                                • 13. Re: Is it possible to tell browsers NOT to interpret line breaks as spaces?
                                  osgood_ CommunityMVP

                                  jyeager11 wrote:

                                   

                                  I'm not sure where anyone got the impression that I was talking about "adjacent" spaces. I was talking about simple spaces.

                                   

                                  Also, the list isn't formatted to be one answer per line. This skews the results. How can you tell if a spacebar was added after a </li> when the line breaks there?

                                   

                                  This would all be a lot easier if I could make my test pages public, which I can't right this second, but long story short, the list is displayed as : Test 1, Test 2, Test 3 when all 3 options are coded on the same line (in other words, <li>Test 1</li><li>Test 2</li> etc)... and Test 1 , Test 2 , Test 3 (notice the additional spaces) when I Apply Source Formatting (because that places each option on its own line in the code, and every line break in the code is treated as a spacebar).

                                   

                                  Note that by "line break" I am not referring to the <BR> tag. I am simply referring to source-side line breaks.

                                   

                                  No-one can understand what your problem is.

                                   

                                  <li>Test 1</li><li>Test 2</li><li>Test 3</li> will appear as:

                                   

                                  Test 1

                                  Test 2

                                  Test 3

                                   

                                  when viewed in a browser as will:

                                   

                                  <li>Test 1</li>

                                  <li>Test2</li>

                                  <li>Test 3</li>

                                   

                                  If you are saying:

                                  <li>Test 1</li><li>Test2</li><li>Test 3</li> appears like:

                                   

                                  Test 1Test 2Test 3

                                   

                                  when viewed in a browser then something is wrong BUT I'm not sure that is what you are saying.

                                  • 14. Re: Is it possible to tell browsers NOT to interpret line breaks as spaces?
                                    MurraySummers CommunityMVP

                                    Note that by "line break" I am not referring to the <BR> tag. I am simply referring to source-side line breaks.

                                     

                                    Source side line breaks are not rendered by the browsers. Neither are indentation spaces.

                                    • 15. Re: Is it possible to tell browsers NOT to interpret line breaks as spaces?
                                      Herbert2001 Community Member

                                      Funny to see all the confusion in this thread. The solution is actually pretty simple.

                                      MurraySummers wrote:

                                       

                                      Note that by "line break" I am not referring to the <BR> tag. I am simply referring to source-side line breaks.

                                       

                                      Source side line breaks are not rendered by the browsers. Neither are indentation spaces.

                                      In general this is true. But there is a very specific instance in which this is NOT true (at least, for source side line breaks.

                                       

                                      Check out my online example: http://estructor.biz/testje/lists/

                                       

                                      Yes, the OP is absolutely correct - the source code formatting is messing with the rendered output in the browser! So what is going on?

                                       

                                      Simple. The OP left out he is using [display:inline-block;] , which causes the line breaks to render as a space. It is a well-known "feature" of the inline-block display behaviour. Without this issue it would be a perfect replacement for floats, but as it stands it is quite inconvenient. Too bad, because with inline-block we can control the vertical alignment with [vertical-align:middle/bottom;].

                                       

                                      The solution is to switch to floated list elements. Or try balancing the extra space with a negative margin (awkward). Or not use line breaks in your code!

                                       

                                      Honestly, avoid inline-block, and use float:left on the list items, and display: block on the anchor tags.

                                      • 16. Re: Is it possible to tell browsers NOT to interpret line breaks as spaces?
                                        Nancy O. CommunityMVP

                                        Interesting observation, Herbert.

                                        I think inline-block served some magic purpose back in the bad old days of IE6.  I probably only ever used it inside a * hack so never noticed the difference in other browsers.

                                         

                                         

                                        Nancy O.

                                        • 17. Re: Is it possible to tell browsers NOT to interpret line breaks as spaces?
                                          MurraySummers CommunityMVP

                                          We could have avoided all of this confusion and jibber-jabber had OP mentioned that in the first post <sigh>.

                                           

                                          You can also use vertical alignments with display:table-cell, too. And when I want to vertically align an inline block to middle, I just make the line-height and the height have the same value.

                                          • 18. Re: Is it possible to tell browsers NOT to interpret line breaks as spaces?
                                            Herbert2001 Community Member

                                            @Nancy:

                                            IE6 and IE7 only had partial support, I recall - I checked caniuse.com, and indeed: inline-block is only supported by elements that are inline by default.

                                             

                                            @Murray:

                                            Sure, there are other methods to control vertical alignment. Let's hope the flex box model becomes more wide spread soon, so we can finally say goodbye to those pesky floats to control our layouts

                                            • 19. Re: Is it possible to tell browsers NOT to interpret line breaks as spaces?
                                              Jon Fritz II CommunityMVP

                                              I use inline-block along with text-align:center, relatively often to position containers side by side and centered within another container. I stumbled on the method a while back looking for something that would essentially look like what you'd expect a "float:center" value to do. I usually just leave the inline-block elements on the same line in the source to avoid the issue the OP is talking about.

                                               

                                              @ OP,

                                               

                                              I understand your issue with Apply Source Formatting with the <li> set. You can fix the spaces it generates when it forces your <li> sets onto separate lines within the css, and it's pretty simple, with one annoying caveat.

                                               

                                              You can change the font-size of the container holding the inline-block elements to 0px. That will make the spaces between them disappear. The problem is you need to then re-set the font-size of any text within that container, closer to the text itself, like in the <li> tags.