Line Spacing feature in the article content editor

[PierreB]

Hello forum!
I am new both to website building and Joomla and I would appreciate your help...

My problem is that there is no way for me to configure the line-spacing of the text I write or copy in the editor content area...
Part of the trouble is that the default paragraph spacing in Joomla's editor - including when changing paragraph - is different than the one set in Word or Notepad (even if I have large spacing in Word, it is read as single spacing in the Joomla editor)...

If I copy part of the text and type the rest or make corrections, it all gets messed up, but there is no way in which I can set the spacing for the whole article (that I know of, that is), like it is possible in Word or OpenOffice...

Therefore, I either have to re-write the whole text within the default editor to properly control its output and make sure it's uniform in formatting or I have to copy the whole text from word or whatever, which makes it difficult, then, because I must have continuous access to the original files and copy>paste the whole article each time...

I have downloaded and installed both JCE and JoomlaCK as alternative editors of the limited default
editor, but still they do not offer the function I need for creating, editing and publishing articles...

Do you have any idea if such a thing is possible, if another editor offers such features or alternative ways of achieving the desired result?

Thanks

[PierreB]

Ok I have found - with the help of a moderator in Rockettheme forum - a working solution to this...

...in TinyMCE editor there is an option to set new lines as either P elements or Br elements...

<p> is the standard paragraph in TinyMCE which produces a line space which is way too large...
<br> is the linebreak, which produces a line-space equal to that between two lines in a continuous paragraph...

I set it to "Br elements" so now the editor automatically inserts the <br> code when I press "enter" to change lines, and with a double line I get the same line spacing as that of <p> code.

This allows me to control the spacing the way I want...

[PierreB]

Ok I have found - with the help of a moderator in Rockettheme forum - a working solution to this...

...in TinyMCE editor there is an option to set new lines as either P elements or Br elements...

<p> is the standard paragraph in TinyMCE which produces a line space which is way too large...
<br> is the linebreak, which produces a line-space equal to that between two lines in a continuous paragraph...

I set it to "Br elements" so now the editor automatically inserts the <br> code when I press "enter" to change lines, and with a double line I get the same line spacing as that of <p> code.

This allows me to control the spacing the way I want...

Suddenly the above setting to "Br" does not work anymore, and I get the Paragraph when pressing enter instead.

[PierreB]

I did a little of searching & reading, and it seems many people have the same kind of anguish with the Paragraph / double spacing in TinyMCE (and all other editors as well), making them want to use <br> instead of <p>.

I ended up in the TinyMCE forum and wiki and found this interesting info:

TinyMCE produce P elements on enter/return instead of BR elements?

Here are a few reasons why BR elements and the force_br_newlines aren't enabled by default and why forced_root_block is.

• Paragraphs were invented for a reason. Try modifying paragraph margins using CSS without using paragraph tags and you see what we mean.
• The IE WYSIWYG environment is built on handling paragraphs when it comes to alignment/list management and much more. TinyMCE and other editors will start producing lots of strange results if you enable force_br_newlines.
• The space between the paragraphs can be removed using a simple CSS trick like this. p {margin:0; padding: 0;}. This is not possible with BR elements, since the whole line is not wrapped in a container. So P elements gives you the flexibility to choose.
• If you really must have BR instead of paragraph elements for some reason – for example to interface with Flash or send e-mail messages –, then simply post process them away by replacing <p with <span and </p> with </span><br />, which takes care of P tags with class or style attributes. The same process but from BR tags to P tags can not be done since you don't have a reference for the start element.
• Paragraphs make more semantically correct XHTML markup, and we are trying to make an XHTML editor, not an old HTML editor.
• Paragraphs are mostly more valid containers for text in a W3C strict environment since plain text nodes are not allowed in all containers.
• BR elements can still be produced if you really need one at a specific place for some reason using Shift+Enter/Return this is exactly the same behavior popular Word processors have. Check this video.
• We have never seen one single valid reason why paragraphs must not be used unless it's for e-mail software or for integration with Flash, and both cases can and should be solved with post processing if you want the user to be able to modify the contents again with TinyMCE. If you have a good reason please drop us a e-mail describing it and I will put it on my exceptions list.

So if you really really must use BR elements for some odd reason then set this in your init code:

Code: Select all

tinyMCE.init({
   forced_root_block : false,
   force_br_newlines : true,
   force_p_newlines : false
});

And here are two quite informative forum threads (especially the second one) :
http://tinymce.moxiecode.com/punbb/view ... p?id=18116
http://tinymce.moxiecode.com/punbb/view ... d=3878&p=1

So, it seems the best way to do it is to edit the CSS style to margin: 0px; padding: 0px;

I did some testing in TinyMCE and this works fine when I begin to write an article WITHIN TinyMCE and before I type any text, using the double AA button "Edit CSS style.

However, If I paste a document in the editor, or when I want to apply that styling to an existing document, this won't work. If more than one paragraph is selected, then the button goes gray and it does not allow you to edit the CSS style for the whole document.
I can still press the "Insert/Edit Attributes" and add the styling there, but it will not have any effect.

So here is the question
In what way could I have "padding 0px; margin 0px" apply as default for Paragraph elements to all text either written in the editor, or pasted in it, or when editing an existing text?


I would really appreciate some suggestions, I believe many people will benefit from this

[urbankaos]

Anyone manage to sort this?

I'm using JCE as I can't find TinyMCE to download (unless someone can supply a link)

I hate the space between lines when pressing enter, they are too big, so I use the <br/> code, this then starts a new line but keeps the text closer than when just pressing enter (guessing that's the <p> mentioned above)

I was given a code to help me with this inside Tables but after an update, it stopped working.... but i'd like it throughout the website, instead of having to keep going into toggle editor and putting <br/> all the time.

[NickC4555]

The spacing you can see between the lines in your editor are irrelevant, it's how it gets rendered on your website page that matters. The editor in the back end doesn't use the same css as the front end, so be cautious about making the editor look better without checking the impact on your pages. If they aren't right for you, then use custom css to override your template. Use Firebug to work out what you want the values to be.

[urbankaos]

I've just found a section on the JCE settings which changes the enter button, so when enter it pressed, it uses a line break instead of a paragraph, i've created a new menu and article to test, and i've started redoing one of the pages, and all looks fine on the website, pretty much the same as what i'm seeing on the editor, except the line breaks are a bit too close on the editor, but they're a little bigger on the website which is perfect, so text looks a little squashed on the editor, but a perfect distance apart on the website itself.

Now to try and get rid of these borders added to the article tables, even though a border isn't selected!