Paragraph Text Formatting

My site is about words. Part of it is a Reverse Dictionary where you look up a word by its definition.

It has multiple headings (not titles - just normal text, but in upper case and bolded and underlined) on every page.

You can check it out here: (overhauling it right now, so it's a bit of this, and a bit of that!)

https://www.wordsandphrasesfromthepast.com/

Because there is so much text, the headings don't really stand out, so I have gone through and manually changed the font colour and size for the headings.

Which is fine if you're not constantly updating, which I am. I am still adding words, and use Word, as it is a lot easier to keep everything organized. But of course every time I do that, and copy the file to Weebly, I lose the colour and size formatting of the headings.

I have just been just copying over the body part, but it would be so much easier, and tons quicker, if I could copy the whole file, since I usually make quite a few changes to each page before updating the page.

So I've been trying to work something out.

And I did come across something. But I want to make sure it won't cause any problems down the road.

In a test page, I added a standard page link to each heading - the link being for the same page which the heading is on. (I figure nobody will click on the heading, as it's not mentioned as a link?) Though it doesn't keep the font size, it does keep the font colour.

The big question is - is that going to cause any problems?

A 'no' answer followed by 'go ahead' is what I'm looking for here! Smiley Happy

Thanks!

While I'm here, as I mentioned above, I've been overhauling the site, and deleted a number of pages that were no longer being used (they were marked 'hide in navigation' for a long time). Somehow, that changed the order of the Dictionary and Reverse Dictionary in the menu. The Reverse is now ahead, which it shouldn't be. (Why would that happen?? I sure as heck didn't do it!)

Is there any way to move either of them without doing each page separately? That's a lot of work, and it's not exactly a walk in the park doing it, as things jump all over the place when you have a lot of pages.

If you read down this far - thank you!

Have a great day/evening!

2,509 Views
Message 1 of 4
Report
3 REPLIES 3

@Jingles I hate to say this but what you've done here is bought yourself a massive formatting headache that will almost certainly require you to, down the road, completely rebuild your dictionary definitions pages with proper, formal formatting.

Let's take this page as an example of what not to do:

https://www.wordsandphrasesfromthepast.com/reverse-a---aby.html.

I've seen this type of "formatting" in Word documents done by people who know very little about how to properly lay out text using the appropriate formatting tools in Word. Where the text content is clearly tabular in nature, instead of encapsulating it in an actual table, they separate columnar items with tabs or, much worse, spaces - lots and lots of spaces. And that's what we have on this web page. If I examine the html code of these definitions:

image

you'll see a disastrous mess of non-breaking spaces (the many, many " " items) that separate text items and no formal delineation of titles (the defined words) and paragraphs (definitions) - everything is done in paragraph text with titles differentated by uppercase and bolding.

<strong>ABISELFA</strong>
<span>&nbsp;</span><br>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; n.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; the letter "a" (a-by-itself-a) ...1840 Amer. dial.</span><br><span>&nbsp;</span> <br> <strong><u><font color="#c23b3b" size="3">AARDVARK</font></u></strong>
<br>
<strong>ANT BEAR</strong><span>&nbsp;</span><br>
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; n.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; an aardvark ...1545</span>

As with Word, this is nothing short of a formatting nightmare to deal with. If you change font sizes, line spacing, font styles, content container widths, etc., all your intricate spacing can suddenly be for naught. If, at some future point, you wanted to change your defined words to a serif font but leave paragraphs as sans-serif, well, you can't do that. This is perhaps much worse in web pages where content will wrap in ways you perhaps didn't expect on mobile-sized screens.

Rule #1: NEVER, EVER copy formatted text into a web page from Word.

Rule #2: Refer to Rule #1.

Rule #3: Did I mention Rule #1?

Rule #4: Use proper text formatting. Don't make text look like properly formatted text, use the actual formatting tools for this purpose.

Search engines (and site visitors) expect you to make a nominal effort to clearly distinguish different types of text content. This helps make the content readable and conveys significance of text items. Title text is a thing (and, yes, it's not the same as paragraph text). Block quotes are their own thing. Emphasized (bold, italic, underline) text is a thing. Paragraphs are a thing. And these "things" are understood by readers and search engine bots.

Here's a beautifully formatted example of a definition from dictionary.com:

image

The word "fustigate" here is formatted as true title text (no, it's not paragraph text in a bigger font size with some color added, that sucker is actual title text). The grammatical type (verb) is paragraph text emphasized with italic formatting. The definition is simple paragraph text. Each item occupies a separate line. Clean, simple, understandable (by people and bots). The web code behind this is as clean and simple as what you see. No reams of spacing or tabs here.

In your case, you could stylistically set off the defined word using title text in serif font with a larger font size and perhaps a color. Do this by dragging a Title Element on to the page followed by a Text Element. Change font styling of text and titles via the theme styling panel.

https://www.weebly.com/app/help/us/en/topics/add-and-edit-text

https://www.weebly.com/app/help/us/en/topics/choose-fonts

So, a defined word might end up looking something like this (a large serif font for the defined word, fully black-colored, bolded font for the origin words, regular paragraph text for the definition with italics for grammatical type and circa). You could also use the Separator Element to break the defined word from the definitions (but this is added work so, totally optional). If you decide to change the color of your title text, do it in the theme styling panel and it'll change for all titles across the entire site. Want to make the paragraph text a bit bigger across the site? Do it in the theme font styling panel.

Aardvark

Ant Bear
noun | c. 1545
an aardvark


Earth-Hog
noun | c. 1731
an aardvark


Earth-Wolf
noun | c. 1796
an aardvark

Rule #5: DON'T use Word.

I'd strongly suggest that, going forward, you enter your website text content directly in the Weebly Site Editor. There's little point to doing this first in Word or any other text editor and then copying the whole mess into the Site Editor particularly if you follow the proper formatting suggestion above (using the Title Element for titles and Text Element for paragraphs). Do your text entry and formatting entirely in the Site Editor. If you want to do stuff in draft, create a hidden page where you can work up the content first and then copy it to the desired live page location. But do it in the Weebly Site Editor.

When in doubt, refer to Rule #1 lest you be mercilessly fustigated.

2,496 Views
Message 5 of 4
Report

After I posted this last night, I knew I was going to be fustigated! 

You didn't disappoint! Smiley Happy

Thank you for taking the time to remind me why I shouldn't be using Word.

I started making my word lists in Word 20 odd years ago, using tabs, and it was just easier to continue doing so.

But after I posted, I told myself to smarten up, and try to work something else out.

So I did. And I've eleminated tabs. And I used the site editor to format, as below. (Very similar to what you posted!)

image

It's going to take forever and ever to do, but it will keep me out of mischief I guess!

Again, thank you for taking the time to reply. 

I guess just posting was the kick in the butt I needed!

That may not be quite how it ends up, but will be similar. (The background colour will definitely change.)

PS Sorry the uploaded picture is so big. 

Have a great weekend. 

Cheers!

2,475 Views
Message 5 of 4
Report

@Jingles Ah, now that doesn't damage my retinas at all. Here's another suggestion for you. The theme font styling panels allow you to impose all uppercase on your text via a styling switch. I always advise that text be entered as regular mixed case but, should all uppercase be desired for presentation purposes, you simply turn that on. The key thing is that you have the ability to turn this off if you wish and revert your paragraph text to a regular (mixed case) state (uppercase is not a regular state so, if you have the ability to turn it off or on via a switch, use the switch).

In the Site Editor, click "Theme" in the top navigation menu, click "Change Fonts" in the left-hand sidebar, select the font type you wish to modify, e.g., paragraph titles, paragraph text, and click the "uppercase" switch into the on position.

I know it's a lot of work but this will lead you to the realm of non-fustigation. A worthwhile trip indeed.

2,473 Views
Message 5 of 4
Report
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.
grz-custom-initialLetter