Printer-friendly version
Author:
Blog About:
Every time I post a story here I have to go though and fix the line spacing. I will get sentences like this:
This sentence must be to long for the website because
it does this.
and the the next sentence is below like this.
I write in libre office and then copy and paste. Also, while I'm asking, how do I center something like the inscription in The Lynching Tree. It was centered in my draft but moved to the margin when copied.
Comments
Topshelf Formatting Resources
Years Ago, Bobbi-C wrote an excellent guide for this sort of thing, BigCloset TopShelf for Dumdums, she called it. You can find her post here: https://bigclosetr.us/topshelf/forum/27881/topshelf-dumdums-.... Just click on the title image to download the PDF.
-Piper
Pick your output format
I also write in LibreOffice, but I save all my files as HTML.
No, it doesn't make the file inscrutable, not unless you then open in in Notepad or another text editor!
- But when I copy and paste, I do it from a text editor, like (on Linux) Mousepad, not from LibreOffice. Just select the whole shooting match and paste it over. The magic edit box in BC will throw away anything it doesn't need (or like).
The only other thing to remember is to select "Filtered HTML w/o Line Breaks" when posting, in the dropdown below the edit box, since the HTML formatting already puts them in for you.
Penny
Line spacing is truly a problem
If your word processor doesn't wrap text it will likely add either a carriage return (
) or a manual line break (
) at the end of the screen line and results in what you've experienced.
Libre Office says it's files are compatible with word doc. That is accomplished in the saving function. For your purposes, I would suggest you copy and past into Notepad and then copy and past from there, Be sure to put a double space between paragraphs.
As for centering things I format off line. The format for centering is:
<div align="center">Centered</div>
That results in:
Hugs
Patricia
Happiness is being all dressed up and HAVING some place to go.
Semper in femineo gerunt
Ich bin eine Mann
Thank you ladies
I think I've got it. For me that means only four or five tries to get it right, but at least I know where I'm going now.
Obsolete and deprecated attribute
As I explained in my extensive comment below, the
align="center"attribute has been deprecated in HTML 5 and also CSS 3. Though it will still render correctly, new content should not use it anymore. The recommended usage is with thestyle="text-align: center;"attribute. And you can also add additional CSS codes into the same attribute value.Adding the
<div></div>around your paragraph to be centered just adds another layer of processing. And strictly speaking, each paragraph of text should be enclosed in<p></p>codes. While the<div></div>codes are supposed to identify blocks like the page header, page footer, “Navigation” sidebar, “The Hatbox” sidebar, etc.LibreOffice is not a typewriter
That has been one of my biggest gripes and pet peeves as a computer instructor well into the 2000s. It did not matter if it was called WordPerfect, Word, Office, Writer or OpenOffice. I still saw some secretaries hit the carriage return (aka “Enter” or “Return” key) at the end of each and every line of text! And then they got frustrated about all the weird line breaks as they added formatting like boldface, a different font or a bigger size. Not to mention corrections to spelling or grammar.
My gut feeling is that somehow you get manual line breaks in your text.
There are some fundamental differences between LibreOffice (or most common word processors for that matter) and web platforms regarding how they handle text formatting in general. Word processors make no distinction between function and form, since they freely mix the formatting with the content. The inter-web makes a clear distinction between content and presentation with the HTML/CSS combo. That clear separation of content from presentation is also a fundamental strength of the TeX (LaTeX, XeTeX) typesetting platform.
Using a word processor is perfectly acceptable for editing the content. But it is a bad tool to use for formatting the text for publication!
For example: The paragraph spacing and first line indent is hidden in the “Enter” key. By default in the text field here on BigCloset you signal a new paragraph by inserting an empty line, that is you hit the “Enter” key twice.
As for centering text, you could either use the deprecated
<div align="center">your text here</div>or the recommended<p style="text-align: center;">your centered text</p>. In the latter example the the CSS code is embedded as thestyle=""attribute inside the HTML code.It would be more elegant (as well as more standard conformant) to gather all formatting code in the head of the HTML file, or better yet in a separate CSS file linked into your HTML file. And then you can call on specific formatting by inserting a
class="name"into the corresponding HTML elements.The benefit of having an external CSS file, is that you will have a consistent formatting throughout all your linked HTML pages, and that you only have to edit the CSS file (instead of searching through each of your HTML files) change your formatting.
I know that this separation of content and presentation (or function from form) is rather difficult to grasp for anyone who is accustomed to simple select some text and apply formatting such as color, size, font, etc directly. Though using only “styles” to format your documents is a step in that direction.
Another example: In HTML there exists the element
<em>emphasized text</em>to identify some text as having a function of emphasis. But that code element gives no indication as to how that emphasis will be displayed. On one platform it could be displayed as italics, on another it could be displayed a bold or underlined, or it could be displayed as white text on a red background. Somewhere on each platform are one or more CSS files that establish how each element of content will be displayed.Hands off the enter key
Thank you. If I understood what you are saying, I should only hit the enter key at the end of a paragraph and let the machine decide where the line ends. Beyond that, I think I need to take your class to understand what you said. My formal computer training began and ended with Fortran back in the dark ages.
Class on formatting
After a recent private discussion I had with another author here on BCTS, you are the second person to express interest in learning how to make consistent formatting [with word processor styles]. I have already considered writing a tutorial of some kind. But I am currently struggling with an extremely limited daily supply of spoons, that I can not really promise anything concrete.
After delving into various documentations and tutorials on HTML and CSS &emdash; both to learn some new “marketable” skills and to improve the quality of the archived stories for my personal [digital] library &emdash; I have discovered that web publishing has moved squarely into the “form follows function” realm of separating the presentation from the content. Although many of the previous formatting hacks of HTML are still supported by most (if not all) rendering engines, they have been deprecated in the HTML 5 standard with the guidance not to use them for the creation of new content. The current recommendation being to use CSS instead.
And validator and clean-up tools for HTML files, like HTML tidy with installers for Linux, macOS and Windows available at download HTML tidy binaries, will flag those older hacks as warnings or even errors to be corrected.
Add to that the need and requirement to make websites accessible to people with disabilities, it just makes sense to me to separate content and presentation. In Germany there is a legal mandate to remove all barriers from public service websites by 2026. That means to make them accessible for use with a screen reader by providing alternative context based content information as a minimum.
I learned about consistent formatting with styles when I switched from the Commodore C-64/C-128 to a PC-AT with DOS 3.3 back in 1989 and got a 1200+ page handbook for WordPerfect 5. And I carried those lessons learned over Word for Windows 5 in 1993. After Word 97 I switched over to OpenOffice around 2003, and finally ending up with the free LibreOffice.
Now that the request has been seconded, I will try to write a [brief] tutorial on using styles for formatting with a word processor as I have the available spoons to spare.
Thank you Jessica
I hope you get to feeling better soon, with or without that tutorial we need more of your stories.
Here on Big Closet, <em> is
Here on Big Closet, <em> is the same as <i> that is Italic
Hugs
Patricia
Happiness is being all dressed up and HAVING some place to go.
Semper in femineo gerunt
Ich bin eine Mann
Other Suggestion
I've recently asked ChatGPT to write me some macro code that I use on the file. (It'll tell you how to do it too) I have been using it to add paragraph tags and then also add the format tags for italics and bold font as well.
There's a lot to learn
When I format off line (in my word processor) I use a cheat sheet. This isn't all I have, but just the basics.
Patricia's HTML cheat sheet
Strike through <This is strike through text> =
Strike through
This is strike through textTab Character  
Alternate:
Tab Space  
inserted at the beginning of a paragraph =
This has a tab in front of it.
Forced space ; 
Forces a space (not sure I’ve ever used it)
<div align="center">Centered</div> =
<em>Italic</em> =
Italic
<strong>Bold</strong>
Bold
<big>Big</big> =
Big (Large)
<small>Small</small> =
Small
<blockquote>Indented</blockquote> =
Hugs
Patricia
Happiness is being all dressed up and HAVING some place to go.
Semper in femineo gerunt
Ich bin eine Mann
Updates to cheat-sheet
Dear Patricia,
Please do not take offense with my updates to your cheat-sheet. As long as it works for you, you may continue to use it. Just be aware that many of your “cheats” have been deprecated, and content creators are advised to avoid them for new content.
Below the “Text format” selection list you will see a list of “Allowed HTML tags:” that are recognized by the BCTS content server. Several of those tags are legacy from HTML 3 or HTML 4 and deprecated in HTML 5, though still supported by many rendering engines.
Authors are strongly encouraged to other tags that better convey the function of the marked-up text instead of relying on the default rendering of
<i>italic text</i>,<b>bold text</u>or<u>underlined text</u>. The proper HTML/CSS way would be<span style="">formatted text</span>withstyle="font-style: italic;",style="font-weight: bold;"orstyle="text-decoration: underline;"being the respective replacements.The default rendering of
<s>strike-through text</s>would be replaced with<span style="text-decoration: line-through;">formatted text</span>.The default rendering of
<center>centered text</center>would be replaced with<p style="text-align: center;">formatted text</p>.The
<big>tag should be replaced by either<p style="font-size: larger;">or<span style="font-size: larger;">, if it applies to the whole paragraph or just a portion of the paragraph respectively. For titles or headings you should use the corresponding<h1>to<h6>tags.The HTML 4 standard has already deprecated the
<center>,<font>,<s>and<u>tags. Meaning these tags should NOT be used for new content, but MAY still be supported by browsers for backward compatibility.The HTML 5 standard has declared the
<big>,<center>and<font>tags as obsolete. Meaning that these tags do NOT need to be supported by browsers.The “forced space” (
HTML 5.)The correct way to indent the first line of a paragraph is through the use of
<p style="text-indent: 10%;">or<p style="text-indent: 2em;">, not by inserting a tabulator (	or&tab;) or a “m” sized white space ( or ).In the above examples I have listed only the basic CSS options to make the formatting work. You can add additional options for line type, size, color and even position. Or you can specify alternative formatting options instead. But that would go way beyond the scope of this comment.
Inline styling
In the above you haven't used CSS tags, you have used style tags as used inline in the text.
CSS is a whole other ball game. HTML can be hard enough if you don't come from a programming or publishing background. CSS is yet another language which is different to HTML. CSS basically wraps up all those style definitions in a set of declarations which are presented before the body of the text; they are usually referred to e.g. as something like the following: <p class="style">text</p>.
I believe the HTML 5 standard discourages users from using inline style definitions but to use CSS instead. On the other hand I don't know if BC ignores style definitions which are not inline.
I have nearly 50 years as a programmer/developer/analyst and to me HTML is just another language which I learned long ago. CSS stands for cascading style sheets and they are the spawn of the devil. Any slight changes can throw the whole thing out and it is never clear which definition is currently active. Writing a website to use CSS definitions is painful.
Penny
CSS tags for inline style definitions
I have to respond with both a correct and incorrect to your assertion
In section 3.2.6.5 The style attribute of the HTML Living Standard it says this:
There is also a note when the
styleattribute is non-conforming:And for web developers there is a non-normative note:
So based on that HTML Standard documentation, as well as the introductory article of the German CSS - SelfHTML Wiki at CSS/Tutorials/Einstieg/Stylesheets einbinden the CSS properties can be used in three different ways:
style="". This is known as “inline style” and it forgoes many of the benefits. Since the inline style is bound to that specific element, you loose flexibility and increase maintenance because you can not modify them in a central location.styleelement located in theheadelement of the HTML document. This option allows you to gather all the formatting code in one place for consistency within that document. But you have to copy thatstyleelement to each and every HTML page of your website. Thereby potentially loosing the consistency across your whole website.*.cssfile and bind or include it with the HTMLlinkelement in the documenthead.I can understand your frustration with the cascading nature of CSS and the difficulty of determining what style properties apply to which element when. And if you are not accustomed to the separation of form from function or content from presentation, it can be an exercise in frustration.
I learned how to “properly” link formatting styles back in 1989 with WordPerfect 5, and expanded on that knowledge when I transitioned to Word 6/95/97 for Windows. In LibreOffice the styles side-bar even shows how the styles are linked in a tree list.
For example, by using relative font sizes in linked styles I just need to change the font size in the “root” style, and that size change will cascade through the whole document maintaining the size proportions between all styles.
For me the biggest drawback with formatting styles in word processors is that they are not easily transferable between documents. Either you create a document template ahead of time or you have to recreate the stiles manually for each document.
Then in 2000 I learned about the typesetting software TeX and its extensions LaTeX and XeTeX/XeLaTeX. This is a markup language that originate that originated in 1978 at Stanford University, and has become very popular for typesetting complex mathematical formulae. It is widely used in academia and in publishing. The author just concentrates on what to say, not on how to present it, by assigning a function to certain portions of text: this is a heading, this is a footnote, this is a citation, etc. The style-sheet will later take care of the layout and presentation. Many universities have developed their own thesis style-sheets, including all the required elements like logos, page formatting, etc. Thus students should not mess up the presentation of their thesis.
And HTML/CSS follows that same philosophy. But what makes CSS so challenging, is not only the cascading of CSS, but also the often deep nesting of HTML itself. At a minimum you have three levels of HTML nesting for a simple paragraph of text:
<html><body><p>. And a simple bullet list adds at least two more levels:<ul><li>When you add the plain nesting of HTML elements with the nesting through the
class=""HTML attribute it can become rather difficult to keep track of the formatting manually. A good code editor becomes essential for complex web sites.Also for simple inspection and debugging purposes I have found the FireFox option Tools → Browser Tools → Web Developer Tools very informative regarding the applicable or active CSS formatting properties.
Be that as it may, you are entitled to your opinion regarding CSS. All that I ask is that we agree to disagree agreeably.
When in Rome do as the Roman's do.
If I were actually creating a standalone web site, I'd want to use the latest version. What I have in my cheat sheet, is copied directly from the buttons over the content block. B I U
H n S Y
If that's what Drupal supplies, the who am I to say different?
Hugs
Patricia
Happiness is being all dressed up and HAVING some place to go.
Semper in femineo gerunt
Ich bin eine Mann
Re: When in Rome do as the Roman's do
That is what I meant when I wrote:
Formatting with fonts and colors
Greybeard has not mentioned font formatting in this post. But given the extensive exchange about formatting in the comments, and past issues with the availability of specific fonts, I feel that some comment on this issue is warranted here and also within the scope of the current exchange.
As I mentioned in a different comment, the HTML 5 standard has declared the
<font>tag [or element] obsolete. With the consequence that browsers [and other rendering engines] no longer need to support it. And CSS has far better support anyhow.But one thing that about web or HTML/CSS based publishing that is very different from traditional paper based publishing &emdash; that also includes PDF files &emdash; is that the author or creator has far less control over cosmetic presentation. The more obvious aspect is that HTML/CSS is re-flowable. Which means that there are no conventional page breaks or even line breaks. Since all that depends on size of the display window. But less obvious is the fact that not every font is installed on every device, either because of licensing or because of availability issues. Not to mention that different screen resolutions [and reader preferences] require different font sizes for comfortable reading. People with vision impairment (maybe due to age) can just increase the default font size and re-flow the text instead of having to get a large-print edition (if it is even available) or scroll a PDF document left and right in order to read a line of text.
Since a HTML author/creator can not know which fonts are installed on the readers devices, and it is difficult or impractical to embed specific fonts in HTML/CSS files, there are some limitations to consider.
The easiest thing to do, is to specify only generic font families. CSS defines some generic values for use with the
font-family:attribute that can be used either in a*.cssfile or as an attribute in HTML like<p style="font-family: serif;">. The most common generic font families are listed below, as copied from the 15.3.1. Generic font families of the CSS 2.2 Specification:serifsans-serifcursivefantasymonospaceThe rendering engine will select one of the fonts installed the device that belongs to that font family for display.
Though it is possible to specify a specific font for display, That font name should be followed with alternative fonts as fallback, ending the coma separated list with one of the generic font families listed above.
In a similar vein, CSS has defined a list of system colors that are almost universally used to define various display color schemes. Most “professional” color schemes try to ensure that they are accessible for people with vision impairments. As well as take into account either light or dark color schemes suited to different ambient light environments. By using these system color definitions the author/creator allows the reader to use the optimal color scheme for their circumstances. This is especially applicable for e-book readers.
Here is the list as copied from the 6.2. Sytem Colors section of the CSS Color Module Level 4:
AccentColorAccentColorTextActiveTextButtonBorderButtonFaceButtonTextCanvasCanvasTextFieldFieldTextGrayTextHighlightHighlightTextLinkTextMarkMarkTextSelectedItemSelectedItemTextVisitedTextBefore I discovered these system color definitions, I had cases where I formatted with a custom color that worked well with a light color scheme but was virtually invisible when I switched my reader to a dark color scheme. Or where a background color would suddenly create a blindingly bright spot when used with a dark color scheme.
&emdash;
While there is a lot that Drupal will allow and support, it doesn't support all of what you propose from the CSS language, as is shone by its refusal to render &emdash; as -- .
As to colors I do play with colors when I format. I didn't include any of that in the rendering of my cheat sheet because I thought it was beyond the realm of this discussion. I do that playing with the elements of the "n" button which Drupal renders <font face='verdana,arial,geneva,sanserif' size='2' color='#603'></font>
It comes up with this as it's default
Drawing on this website HTML Color Codes I can change that to this color to simulate the blue of off site links.. That's useful when linking to a BCTS page which Drupal, in the past, saw fit to leave in the original color, leaving the reader to have to guess that there's a link there.
Another thing that Drupal will support that the site doesn't tell you about is jump links. I discovered that when formatting the "One Dozen Rose" anthology. Twelve stories plus an epilogue coming in at over 35K words, the reader needed to be able to read some and go away, then come back to read some more without having to scroll down, hoping to find where they left off. Each story was about 5K words; an easy read time-wise. Hence, jump links to each story in the Table of Contents allowed the reader to read one or two stories and close the file and come back and jump to the next story from the TOC
Hugs
Patricia
Happiness is being all dressed up and HAVING some place to go.
Semper in femineo gerunt
Ich bin eine Mann