WordPress.org

Ready to get started?Download WordPress

Forums

Stop automatic insertion of line break (26 posts)

  1. TrishaM
    Member
    Posted 6 years ago #

    I am trying to "destyle" H1 - H6 tags in order to use them in my content a different way, but something buried in WP is automatically inserting a line break both before and after the tag, thwarting my efforts.

    I am not using the visual editor, but I searched through tinyMCE config anyway and couldn't find it (settings for force line breaks are set to false).

    I suspect it is somewhere else in the includes files (default-filters.php or rewrite.php perhaps?) but still can't find it.

    I'm not a coder by any stretch, but I can read and understand much of it, and can make minor modifications if someone can tell me where to find this and remove it.

    Ideally I'd like a solution that would exist in my own (theme's) functions.php (using a remove_action) so I don't have to re-fix this with each upgrade.

    Can anyone please help me find where WP is rewriting Hx tags and remove this?

  2. moshu
    Member
    Posted 6 years ago #

    Quote:

    Most browsers display heading tags with an automatic carriage return. You can change that with CSS

    Source: http://webdesign.about.com/od/htmltags/p/bltags_headings.htm

  3. TrishaM
    Member
    Posted 6 years ago #

    Hi Moshu - thanks - sorry I should have said that I've already done the CSS portion - it works great on a plain HTML file outside of WP, but inside of WP there is SOMETHING that is inserting the linebreak tags '<br>' that I can see when I View Source, but that I know are not in the text that I've entered.

    As mentioned, I don't use the Visual Editor, just the Source editor. My text appears in my editor like this:

    "Here is some text with a <h1>keyword phrase</h1> that I want to be sure is styled like any other text in this sentence."

    But when I view the page using View Source it looks like this:

    "Here is some text with a
    <h1>keyword phrase</h1>
    that I want to be sure is styled like any other text in this sentence."

    So something is making it drop down a line before the opening h1 tag and then adding in a br after the closing tag.

    Even though my CSS says it should be display inline with whitespace set to no-wrap, no margin or padding, etc.

    Any ideas on where this rewriting is happening?

  4. Samuel Wood (Otto)
    Tech Ninja
    Posted 6 years ago #

    That would probably be the wpautop function that is doing that. H1-6 tags are block level tags, and it treats them as such. Even if you override them to be inline, wpautop does not know that.

    WordPress is not expecting you to know and use HTML. It's expecting you to put in text, with minor HTML type formatting. Links, strong, em, stuff like that. If you want to use your own HTML in a big way, then you can disable wpautop using a plugin, but you will then be responsible for your own code. Paragraphs and all the automatic stuff WordPress is trying to do for you will no longer get done.

  5. TrishaM
    Member
    Posted 6 years ago #

    Thanks Otto42.

    I'm not sure I want to completely disable wpautop, because I do have some not-so-HTML-savvy people who also post on this particular blog, but I would like to modify it if possible to stop the auto-formatting on H tags.

    Where do I find this wpautop function?

  6. TrishaM
    Member
    Posted 6 years ago #

    I'm getting closer - just need a wee bit more help.

    I found wpautop in the /wp-includes/functions.php file, and found line 66, which was originally

    ' $allblocks = '(?:table|thead|tfoot|caption|colgroup|tbody|tr|td|th|div|dl|d
    d|dt|ul|ol|li|pre|select|form|map|area|blockquote|address|math|style|input|hr|p|h[1-6]|)';'

    which I changed to remove the '|p|h[[1-6]| at the very end.

    This removed the line break AFTER the closing /h tag but not the one before, although when you View Source at least the source code looks correct.

    I realize that whatever is within the tag would not be "broken" and if it were too long to fit in the remaining space on the line, it would naturally "wrap" down to the next line, but in my real-world test I have only one word within the tag, and there is plenty of space left on the line for it to not have to wrap down a line.

    Any suggestions for what else I might remove from wpautop?

  7. Samuel Wood (Otto)
    Tech Ninja
    Posted 6 years ago #

    You really should not edit core code like that, but you also really should leave the P tag in the allblocks section, because it is still a block level tag. Just remove the h[1-6].

    As for the rest, I don't understand your meaning. Is it adding BR's or something?

  8. TrishaM
    Member
    Posted 6 years ago #

    Hi Otto - I did wind up putting the |p back in because taking that one out made no difference. Taking out the H1-H6 did correct my problem where it was inserting a BR following the close tag.

    I realize most people use the H tags in the standard way and would want that block format, but for my purpose I need to have the text within the H tags displayed just as any other text on the page - inline and with no styling whatsoever.

    However, the text within the tag is still dropping down one line before the tag, so it now looks like this:

    "Here is some text with a
    <h1>keyword phrase</h1> that I want to be sure is styled like any other text in this sentence."

    So as you can see I still need to find a fix for the mysterious first line break. When I View Source it doesn't show any BR, in fact it looks exactly as I want it to, but in the browser display there is still that dratted line break, even though I have my CSS set to whitespace: nowrap and display: inline........

    I don't disagree with you about editing core code - I'm not entirely comfortable with it, but in this situation I don't see any other options. I would prefer to add something to my theme's functions.php that would do something along the lines of "remove_action" or "remove_filter" but don't know enough to write such lines myself.

    Any other ideas or suggestions would be much appreciated!

  9. Samuel Wood (Otto)
    Tech Ninja
    Posted 6 years ago #

    "Here is some text with a
    <h1>keyword phrase</h1> that I want to be sure is styled like any other text in this sentence."

    So as you can see I still need to find a fix for the mysterious first line break. When I View Source it doesn't show any BR, in fact it looks exactly as I want it to, but in the browser display there is still that dratted line break, even though I have my CSS set to whitespace: nowrap and display: inline........

    Can you point me to a page showing the problem? It's a lot easier to debug issues when I can actually *see* them in action.

  10. TrishaM
    Member
    Posted 6 years ago #

    Hi Otto - thanks!

    Here is a link:
    http://www.baja-fun.com/about/advertise/

    This is a page I doubt anyone would "stumble across" so that's the one I'm testing this with. You can see the sentence that says:

    Please give as much
    information as possible, including .....etc.

    I have the word "information" enclosed in an H1 tag. I did manage to get the BR that was formerly following the closing /H1 to go away, but can't seem to figure out how to stop the word from dropping down to the next line.

    As mentioned the technique works flawlessly outside of WP, just not within, so I think there still must be some rewriting going on that I can't find.

    Thanks so much for any ideas you can offer..

  11. Samuel Wood (Otto)
    Tech Ninja
    Posted 6 years ago #

    Yeah, I see it.

    You know, I'm not even sure that you are allowed to do that. I mean, you can declare H1 to be displayed inline, but that doesn't change what it is. It's still a block level element, and this will render the page invalid regardless of what your CSS says. CSS only describes how to display the page, not how to parse it.

    Basically, I think that when you open the H1, you implicitly close the P in most browsers, because then it's parsing in quirks mode. Closing the P causes the line break. I tested this by making the P display:inline as well, and sure enough, it eliminated the line break (along with all the other line breaks due to paragraphs as well).

    In short, there's no way to do it. It's invalid to start with and no amount of screwing with CSS is going to fix it. Use spans instead of header tags. That's what spans are designed for.

    BTW, this is not WordPress specific. The browser can't tell the difference, it just sees the XHTML and the CSS. Not what generated them.

  12. TrishaM
    Member
    Posted 6 years ago #

    Thanks Otto - I really do appreciate your input, but need to keep searching for a solution. Actually what I'm trying to do is not unique - a number of websites are currently testing/using this particular style of markup to optimize SE results for certain keywords. Spans won't have the same results because the SE's read the content within H tags as words of importance - spans mean nothing to them.

    It does work fine with just a plain old HTML page and associated CSS, and in fact I've seen it used successfully on a number of other sites that are non-WP sites.

    I did try restyling the P tag but had the same problems - it solves one problem but creates more, so the fix is worse than the problem.

    SO I respect your opinion, and largely agree with you, but don't have much choice in this. The site owner insists on using this technique to emphasize keywords, so I may have to abandon WP if I can't find a way to work around it.

  13. Samuel Wood (Otto)
    Tech Ninja
    Posted 6 years ago #

    It does work fine with just a plain old HTML page and associated CSS, and in fact I've seen it used successfully on a number of other sites that are non-WP sites.

    No, it doesn't. Save the page as HTML and CSS then load it as a static page. It still doesn't work. Perhaps something else in your CSS is interfering (can't think of what), but the point is that it is not a WordPress specific issue. WordPress doesn't have any input on what your browser does. The CSS and the HTML are all the browser sees. WordPress is just generating the page, not rendering it.

    Also, no matter what argument you use, the fact is that the resulting page is invalid. Any potential SEO benefits will be canceled out by the fact that search engines treat valid pages better than invalid ones. You think Google doesn't run webpages through an SGML parser?

    Also, search engines don't treat header tags as keywords, they treat them as titles. If you want keywords, use meta tags. If you want to emphasize words in the content, use em or strong and style those appropriately. em and strong are more likely to be treated as keywords than headers are. Misuse of headers like this is more likely to get your site dinged down, not up.

  14. TrishaM
    Member
    Posted 6 years ago #

    Hello Otto

    As I've said, I do respect your opinions, but on this subject I respectfully disagree.

    And it does work. Please check this link:
    http://www.baja-fun.com/blanktesth1.html

    It is the same content as the page inside WP. As you can clearly see, no line breaks, no styling. This is what I'm trying to recreate within the WP Page heirarchy.

    This technique is already in use on many other sites, and working as intended, to improve SERPs. H tags are not treated as titles, title tags are. H tags are treated as telling the SE's what the page is about - it's relevance to what is being searched. While strong and em tags work much the same way, they are not considered by SEs to be as important as H tags, hence this new technique.

    I don't particularly LIKE this method of SEO, but again as stated I don't have much choice in the matter. It works outside of WP, I just need to make it work from within WP.

  15. SimonJ
    Member
    Posted 6 years ago #

    Hello TrishaM.

    I srongly agree with Moshu to don't use <h1> for anything else than a header...

    But anyway, if it could help you, look at it :

    The html example you posted here :
    http://www.baja-fun.com/blanktesth1.html

    In this document, the paragraph is not nested between <p> </p> tags... This is why your css style for h1 works.

    Look here, I made two example :

    Here is the same document, in html, but with the paragraph nested in the same <div> you have in your wordpress theme :

    http://koolos.com/temp/blanktesth1_2.html

    As you can see, your partagraph here is nested in 3 <div> and <p> tags... Meaning that your <h1> tags are nested in <p> : <p><h1>bla bla bla</h1></p>

    In this document, your h1 styling doesn't work...

    Just for curiosity, I tried to remove all the <div>, leaving only <p> tags :

    http://koolos.com/temp/blanktesth1_3.html

    Same thing here... The style parameters for your <h1> doesn't work...

    So, my point is that <h1> (or any header) can't be nested in a <p> tag...

    As you can see in the source of the last example, I even tried to make a css element with "p h1" (meaning an <h1> child of a <p>)

    And, as you can guess, all this example are straight html and wordpress doesn't play any role there... It's a css limitation... An <h1> can't be nested in a <p> tag...

    Of course, you could write a html page without any <p> and using two "br /" for paragraphs... It could works and you wont see any difference...

    But Worpress, as any html editor, insert automaticaly a <p> tag in each paragraph... So I fear there is no way to use <h1> the way you want...

    I would be very curious to see an html example of the technique you talked about... My guess is that those whom use it doesn't use the <p> tag...

    S.

  16. TrishaM
    Member
    Posted 6 years ago #

    Hello Simon

    Thank you very much for taking the time to look at this, do some tests, and post such a clear explanation - I am grateful for your help and time.

    Here is a real-world example of this technique in use:

    http://www.azbreastnet.com/

    If you view the source, you can see that in the second paragraph (the first one being the "welcome to...") they are using H1, H2, and H3 tags nested within a paragraph tag. The technique is repeated several more times with other H tags nested in P tags on this page as well as several other pages on their site. This site is just one of several that I am aware of, and I'm sure there are many more that are doing this.

    I asked the web developer on this site example how they structured the CSS in order to achieve this, and did mine accordingly. I did miss putting my test paragraph in a <p> tag as you pointed out and sure enough when I did it duplicated your results.

    I'm at a loss to explain why it DOES work on other sites, but that is what I'm trying to do. Since it seems to work fine on other sites even when nested within a P tag, it seems logical to conclude that the P tag shouldn't matter......and yet it does.....

    So I will continue to try to seek a solution to this....may not find one, but I'll keep trying.....

  17. SimonJ
    Member
    Posted 6 years ago #

    Well!...

    Dude, do you wanna see something very weird ?

    Look at that file :

    http://koolos.com/temp/blanktesth1_4.html

    See the source...

    As you can see, you have two example... One from you, one I took from the site you linked for example.

    All I did was cut and paste the text from their source...!

    It works for their part, it don't works for yours...

    !?!

    S.

  18. TrishaM
    Member
    Posted 6 years ago #

    So it's ME???

    :(

    Dang, I was hoping it would be something I can fix. Not sure if I can fix me.

    So it sounds like a mystery......sigh.....

  19. TrishaM
    Member
    Posted 6 years ago #

    DUDE!! Simon, not sure what you did but I tried again - copied your page to mine and made a couple of MINOR adjustments and BANG! It looks good!

    SO now if I can just replicate that inside of WP - that's up next to try....

  20. SimonJ
    Member
    Posted 6 years ago #

    Really weird. I tried some other test, if I write word by word a paragraph in notepad++, it works... But If I cut and paste your text, it does'nt...

    Also, I discovered that it works well, or better, when the <h1> is right after the <p>...

    <p><h1>this test</h1> works well<h1> on my side</h1> no problem</p>

    <p>This test put <h1>a line break here</h1>and I don't know why...</p>

    At a certain point, I was asking myself if it has something to do with the format of the file... utf-u, with or without bom, ansi, or unix/windows... It could maybe explain why it don't works with WordPress, I mean, the way the data are extracted from the database... (?)

    I'm curious... What adjustments you made ?

    He he he... It's like playing a game of Myst...

    :-)

    By the way, if you want to do this only for some static pages that you don't change so often, you could use a page template, but not write the text via wordpress, I mean, write your text directly in the template with a text editor... That could do the trick...

    S.

    P.S. I'm still really not convinced that this method is so helpful for Seach Engine Optimisation... I'm sure that it's not...But it's a funny problem... :-)

  21. TrishaM
    Member
    Posted 6 years ago #

    I agree - I'm not convinced yet either on the actual benefits, but this is the way I'm being told to do this....

    I would use the page template method if I could, but the bloggers who will be contributing via the normal "write post" method will be using this markup style once (if?) I get this worked out.

    Basically I removed the space before and after the tag, and put the spaces as needed within the tag so it looks like this:

    <p>Blah blah blah<h1> keyword </h1>blah blah blah...

    not sure WHY but that seemed to do the trick....

    I'm still working on it but not yet having any luck within WP - in the View Source it looks perfect but still making the mysterious line break in the browser display.....so I'm still on the hunt....

    Yeah I'm too deep into this game to give it up now...he he he.......If I do figure it out I'll be sure to post it here!

  22. moshu
    Member
    Posted 6 years ago #

    I think people should make websites for visitors and not search engines.

    I just read the other day an article (can't find it for the moment) that was discussing heading tags (h1-h6), and the author explained what a revelation was for him seeing a blind person surfing the net... and realizing the HUGE importance of the properly used heading tags to make that website accessible and usable for the blind person.
    Food for thought!

    If machines (search engines or anything) begin to be more important than humans - we can screw all our websites.

    Just my $0.02

  23. TrishaM
    Member
    Posted 6 years ago #

    Hi Moshu

    I totally agree with your philosophy, and I've read a number of similar articles about making sites accessible to vision-impaired site visitors, which I agree is good business practice as well as the right thing to do.

    Even though I agree with you, and don't like this particular method of SEO, my understanding of the reasoning behind it is that it is supposed to tell the search engines what the page is about by pointing out (emphasizing) the most important words in the relevant content on the page. Since a lot of SEs no longer look at the <meta name="keyword" tag any longer, this is supposed to be the new method of accomplishing what the old meta tag did, in a way that still allows the page to read in a natural fashion for site visitors.

    All this has yet to be proven to me, so I'm approaching it grumbling and growling, but at the end of the day I have a job to do and unfortunately principles don't pay the bills.

  24. TrishaM
    Member
    Posted 6 years ago #

    Here's an intriguing clue: I can't explain WHY, but this works fine on POSTS (H tags appear just as normal text, no line breaks) but not on PAGES (H tags appear like normal text but do have a leading line break)....

    SO is there something different about the way the pages are formatted/rewritten as the page is assembled that is different from how posts are handled?

  25. SimonJ
    Member
    Posted 6 years ago #

    I can't give you any answer about this clue TrishaM... But at least, if it can help you, I guess it's the same... I mean, post and pages must be both formatted/rewritten the same way... Since Pages and Posts are all stored in the same database table...

    The only difference I see between page and posts is the .php page used in your template to display it. Post are displayed with single.php and pages are displayed with page.php and the page template you use, if you use one...

    S.

  26. Samuel Wood (Otto)
    Tech Ninja
    Posted 6 years ago #

    All this has yet to be proven to me, so I'm approaching it grumbling and growling, but at the end of the day I have a job to do and unfortunately principles don't pay the bills.

    If your employer is insisting on this, and they are a US company with more than 15 employees, you might consider pointing out that their misuse of tags like you are describing here is an ADA violation, and will very likely get them sued.

    Correct markup is not just recommended, it's the law. And if you're an independent contractor, you have a potential liability here too. ADA lawsuits are nuisance suits, but for independent workers, they can add up quickly.

    A client who asked me to do things in this incorrect way would very quickly find that they were not my client any more.

Topic Closed

This topic has been closed to new replies.

About this Topic