How do YOU post stories to BigCloset?

Printer-friendly version

Forums: 

Taxonomy upgrade extras: 

I'm opening this up for all of you old hands to talk about your procedures for posting, what you do, what tools you use and how you use them. We have a LOT of new members who can use some guidance. Have at it and thanks!

Hugs,
Erin

Simple

Angharad's picture

being a technophobe, I get Bonzi to do it for me :)He's busy at the moment repairing my bike. :D

Angharad
(With fingers crossed).

PS. I think he copies and pastes from Word - he never tells me.

Angharad

For me, it's...

A multi step process.

I generally write my stories in MS Word, and share it with my editors either through Google Docs or directly with MS Word.

In any event, once I get the story/chapter/segment ready to post, the process is fairly similar.

1) I open a text editor - like Notepad (or EditPad Lite)... If I were doing more, I'd use a better tool, but this works for me.
2) I copy an old "header" and "masage" it to fit the new posting. That means everything above the <!--break--> bit. (Sample below). This is the "teaser section, that gets repeated in the story.
3) I save this file in a directory with the name of my story/chapter and a txt extension. (I save my work a LOT!)
4) I then open my story, and copy the text to the clipboard.
5) Then, in the editor, I paste the text of the story below the header I already created (and save my work again. Did I say I saved a lot?)
6) Next, I craft my "footer" generally a <hr> which puts a line across the screen to separate this from my story. And, I type my beg for comments... Sadly I don't get all that many coments. (I save again. I do save a lot. I've lost work not saving before.)
7) Now comes the more time consuming bit... Getting in the bold face and italics type. I put my source doc and my text file side by side (sorta - they don't quite fit, if I make them large enough to see). I scroll through my story until I find a bold or italics section. I find it in my text document, and add the following: for bold I put a <strong> before the stuff in bold, and a </strong> after it; for italics I put a <em> before the text and a </em> after it.
8) I also add in some special formatting (Most BASIC HTML tags work... Though, I try to keep things fairly simple. I don't try to force a font on readers, though you can. I don't try forcing a font size. I want them to be able to zoom the text, if that makes it easier to see.
9) I save my work after just about EVERY edit to the text file. I think I said before that I save my work a lot.
10) Once I've got the text the way I THINK I want it to work, I use BCTS Create Content menus to get to the create page. I fill in all of the tags, and then paste the contents of my text file into the box at the bottom.
11) Now, I hit preview, and I skim the page - looking for surprise formatting. Yeah, despite all my care up above, I find I make mistakes. The most common being forgetting the "/" in the second tag - to close Italics or Bold.
12) If I find a mistake, I go to my text file, and fix it, an then save it, then I paste it OVER what I put in before.
13) Then, I hit the Preview again.
14) The preview | check | Fix | Repeat cycle continues until I'm SURE it looks right.
15) Once I like how it looks, I hit the "Submit" button, and I look again. I've occasionally found some strange formatting that doesn't show up in preview. MOST of the time, that's due to an unclosed HTML tag (those things in the < and > brackets) in someone else's story/blog, but not always. Sometimes I'm the screwup. If I find it, I fix it. Otherwise, I notify an admin, and suggest I might have made a mistake, or there might be an HTML error in one of the posts further up on the page. That's only happened a half dozen times in the more than a Year I've been posting here.
16) Once I do the post, there's one more step, if this is a chapter in an ongoing story. I have to LINK it to the title page (If yours is a serial/chapter story, did you remember to create a title page? If not, as an Admin for help. THey're actually pretty easy. I've only done three of them myself.) That's done on the "Outline" tab you see.
17) The next step, is to return to either the home page, or "My Stories" and keep hitting refresh - to wait for that first comment... This, is probably the HARDEST step of all... It's a scary, frustrating, anxoius period... Then, when you see it, you jump on it, and read that first comment. Then, it's back to waiting.

That's basically what I do. Others use other tools to edit the HTML. Some even let Google Docs export it for them. I dunno. I'm from the old school, and I like to hand write my HTML... I even got rid of DreamWeaver (don't worry if you don't know what that is)... But, that's another story. There are nice "free" text editors that will help you get your HTML right, if you have trouble. You can also copy an existing post and use that as a starting point.

Hope this is of use to at least one person.

Annette

A nice free text editor...

Puddintane's picture

...for Windows machines is at http://Chami.org/ called HTMLKit.

I particularly like it because it has an excellent interface to Tidy, a very powerful HTML checker with tremendous granularity, allowing you to control what happens to the file. Many other editors use Tidy but don't let you fiddle with the settings, and often the creator's idea of what the settings "ought" to be is totally lsme.

Using an HTML editor lets you control exactly what your story will look like without investing time in the online tools supplied by the site. Although it doesn't happen often lately, your online session *may* crash, and it would be a shame to spend any time at all retyping what you've already done.

If you see a technique you really like in someone else's story, every web browser allows you to "VIEW" the source code for the page.

Be aware that there is stuff in the source code that you *shouldn't* copy. The bad stuff is called the "HEADER" text and should be left behind.

The only thing to copy lies between "tags" named BODY, although they may be in lower case, and surrounded by what are sometimes called "angle brackets" or the "greater than" and "less than" mathematical operators found on the keyboard as shifted period (full stop) and comma respectively. The begin tag will have just the word BODY and the end tag will have /BODY (preceded by a stroke or slash) Don't use either tag in your code, even if your HTML editor inserts or requires it.

A similar tool for OS-X is Taco, from http://tacosw.com/

It's quick and dirty but allows you to easily preview your code.

Or you can try Smultron from http://tuppis.com/smultron/

Or PageSpinner from http://www.optima-system.com/pagespinner/

Or TextWrangler from http://textwrangler.en.softonic.com/mac

there is also a TextWrangler version for Windows

Puddin'

-

Cheers,

Puddin'

A tender heart is an asset to an editor: it helps us be ruthless in a tactful way.
--- The Chicago Manual of Style

That's Chami.Com :)

Piper's picture

Just a lil FYI Puddin, that's Chami.Com or more specifically http://www.chami.com/html-kit/

-HuGgLeS-
-P/KAF


"She was like a butterfly, full of color and vibrancy when she chose to open her wings, yet hardly visible when she closed them."
— Geraldine Brooks


Whoops!

Puddintane's picture

That's the trouble with working from memory. It's been many years since I've used a Windows machine and I've tried to forget. It seems that I may partially have succeeded. One day, in the distant future, I may wake up without screaming...

Puddin'

-

Cheers,

Puddin'

A tender heart is an asset to an editor: it helps us be ruthless in a tactful way.
--- The Chicago Manual of Style

I would just confuse folks...

Edeyn I'm a little too, "Olde Skool" in that I don't use any kind of editing tools other than a text editor (usually MS Windows Notepad these days) and my own brain. I know what it's supposed to look like, and so I block-code it. It annoys Erin and Sephrena, so I can't imagine it would be any easier to take for the newbies. I'm a minimalist when it comes to code, and usually I can take a block of HTML and reduce it by at least half.
<font> is the tag I think I use most often, maybe tied with <table> if I think about it.

I use face, size, and color with <font>, and for the color I don't use the "color word" method, I use the hexadecimal codes. With <table>, though, I pretty much use all the options available. I love tables and forms, and play with them for entertainment sometimes.

I guess if folks need help whipping their postings into shape before they post it, they can ask me for to be taking a look-see at it.


Edeyn Hannah Blackeney
Wasn't it Jim Henson who said, "Without faith, I am nothing," after all? No, wait, that was God... Sorry, common mistake to make...

How I post for myself and others

I don’t think I do as much work as Annette to get the same results in formatting a story for posting, as I use the buttons at the top of the posting window. I only have 2 stories of my own, but I do post for other authors at their request.

The first thing I do is open an private mail to myself, just in case I hit submit instead of preview, to it won’t post by accident.
Then I use the posting window to set things up after the usual spell checking, etc.

1.A. I copy the file into the posting window and hit preview, to see if the paragraphs format properly as to leaving a blank line between paragraphs.

1.B. If it is properly formatted as to leaving a blank line between paragraphs, I go to 3.

1.C. If they do not, I exit, and open it with Word Perfect, which better with its view and Search and Replace, as it is easy to see soft returns and hard returns.
If the problem is, as is most often the case, a single hard return at the end of a paragraph, which won’t leave a blank line between paragraphs on BCTS,
I search for hard returns [HRt} and replace them with 2 hard returns, [HRt][HRt].
I save the file as a Rich Text Field (.rtf ) file.

2. I again copy the file into the posting window and hit preview, to see if the paragraphs are formatted properly.

3. I split my screen so that I have the document in WORD on the top half, and in BCTS on the bottom half.

4. I scroll through the WORD file looking for BOLD or Italicized sections.

5. When I find one, I use Firefox’s search function to locate it in the story posted in BCTS.

NOTE: I do not know how Annette was able to get the HTML commands to print rather than work, so I am going to us ( for < and ) for >, but then, I don't type them out as she does, which is where the big timesaver comes in.

6. When I find the targetted section I highlight the section and click on either the (strong)B(/strong) or (strong)(em)I(/em)(/strong) button at the top of the window. This puts the (strong) before the stuff in bold, and a (/strong) after it; or for italics the (em) before the text and a (/em) after it with no worries about typos or forgetting the / in the close section, in just two two easy steps with no typing and no typos.

7. I repeat steps 4-6 until I reach the end of the document, saving periodically just as Annette does, for safety. But I use a different procedure.

I save by copying the posting window in a file in WORD I’ve created for just that purpose

POSTSAVE-(Storyname)-(1 or 2).rtf

in my folder for the author.
I alternate between 1 & 2 as I go along, so I have a fallback in case I mess things up very badly OR in case there is a problem saving, so I do not get a corrupted file.

After each save, I do bit the PREVIEW button to see it as the reader will see it, and then Firefox’s BACK button to return to the working window.

8. When the text looks good, I set up the header and synopsis ( if any )
I used to create them by copying a header I had used previously, then pasting that at the top of the story, making sure I had the teaser break (!--break--) at the end, then just substituted the info for the new story.

9. I seldom post with a footer, and if I do, just make up my own string of characters and use the C button to center it, then type in the footer notes.

10. Once the preview looks good, I copy it back to WORD temporarily, then open an actual posting window in BCTS, copy it into the window and do a final preview before hitting the SUBMIT button


~§~§~§~§~

The buttons across the top are great, Besides B for Bold & I for italics,
there is U for underline;

C to center

Q to indent a quote, such as a letter

;
L for Larger type;
s for small type;
and the A over ---- over B, which creates that header break.

There are a few others, but I've never found a use for them here. The Bold and Italics buttons are the ones I use most.
But they save a lot of typing and typos, Annette.

Holly

Holly

It's nice to be important, but it's more important to be nice.

Holly

>> get the HTML commands to print...

Puddintane's picture

One uses what are called "escape codes." In the case of angle brackets, the escape code for the left angle bracket (the less than sign -- < ) is ampersandltsemicolon and the right angle bracket (greater than sign -- > ) is ampersandgtsemicolon.

I spell these two symbols out because it can be moderately challenging to make Big Closet ignore the ampersand, whose escape character is ampersandampsemicolon. &amp;.

Here they are as you'd type them: &lt; and &gt;

I created those examples by "escaping" the ampersand itself like this: &amp;lt; and &amp;gt;

As you might guess, strings of escaped characters can become confusing, much more so than ordinary text.

Preview the text often before committing to a post.

Pretty soon, you'll go crazy, and then everything will become quite clear.

Puddin'

-

Cheers,

Puddin'

A tender heart is an asset to an editor: it helps us be ruthless in a tactful way.
--- The Chicago Manual of Style

html who?

kristina l s's picture

I'm with Angharad, 'cept I don't have a Bonzi handy. I use an old copy of Word which by default saves everything to rtf's. Started that because of FM and they's less 'baggy' than doc's. I did get a bit 'eeeked' when I got sent a doc.x to edit and couldn't open it, but a quick little download whosit fixed that.

I'm sort of a big KIS person. When I start a story it will have the header and disclaimer, the Title and my end tag, possibly attributions also, but they may get added later. Then I just fill that pesky middle bit, you know, the story.

To post I'll open my copy in Word and then go to the create content link and do all those little tags and bits and bobs. The ability to create your own little tag is a godsend, half my things at FM are 'misc story' because they don't fit the assorted fetishes.

Then it's copy and paste and preview. Not having a clue about html and assorted other tricky bits I don't do fancy colours and pics or the like. I sort of prefer the imagination of the reader to work on that, but each to their own. I did question Erin once on a font for a hand written note in 'Things...' but everything I tried it looked the same so I just went italic *shrug*.

Next step, I post and then open it. Occasionally I have to tweak a line or reset a spacing but mostly it's good. See, easy peasy. Nothin' to it, it's the getting the thing to that point that's the tough bit.

Kristina

Fonts

Puddintane's picture

Fonts are difficult. Because of the way HTML works (and thus Big Closet), you have to specify fonts on several levels, a sort of fall-back list, because the font won't appear unless it's already present on each individual machine. Most Windows machines have a font caled Comic Sans installed, because some idiot at Microsoft likes it, but Macs and Linux machines probably don't know it from Adam's Great Aunt... For which we can thank our lucky stars.

So when you specify fonts, you have to specify a "stack" of them, hopefully fairly similar in typographic appearance and weight, and enough of them that at least one of them is likely to be present on most machines your page will appear on.

So a reasonable text stack for serifed fonts might look like this: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif

A similar stack for sans-serif fonts might be: Geneva, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif

Note that the generic name comes after every specific name, because your fondest hope should be that it never comes up.

If you want to present Unicode characters beyond the standard alphabets of Western Europe, it's a good idea to tell people up front what sort of characters they can expect to see. If you're going to use authentic Egyptian hieroglyphs or Sanskrit using the Devanagari font, you'd best tell people where to find them and offer some hints, because a suitable font will have to be found and installed:

http://users.teilar.gr/~g1951d/

http://www.alanwood.net/unicode/devanagari.html

Alan Wood's site above is a wonderful resource for Unicode fonts:

http://www.alanwood.net/unicode/

He offers test pages for most supported fonts

Puddin'

-

Cheers,

Puddin'

A tender heart is an asset to an editor: it helps us be ruthless in a tactful way.
--- The Chicago Manual of Style

yes

kristina l s's picture

or was that..ummmm? The font I was trying for and Erin gave me the exact line to use was this (I've gapped it slightly to show the tags, I think)

< font face= "Bradley Hand ITC TT, Lucida Handwriting, Lucida Calligraphy, Verdana, sanserif" size="+1" > Text you want to appear. < /font >

Which shows as... Text you want to appear. ... when not gapped. To me it looks the same as the rest of the text, except bigger and bolder, but maybe that changes after post. Like I said...shrug.

She mentioned the 'fallback' idea and I did more or less get it, but everything I did it looked the same so, like I said I went italics. Not sure whether that was just my browser or what. The font, Bradley hand, shows in my rtf file but... anyway maybe I'll play with it again sometime. Holly just sent me a little template thing that I'm sort of doing my cross-eyed ummm bit on too. We shall see...

Kristina

>> ...Verdana, sanserif....

Puddintane's picture

Well, there's your problem. Verdana is a Humanist San-serif font (like Arial or Helvetica but usually somewhat larger) and san-serif is... well, san-serif. Officially, the hyphen should be there, but what the heck, it doesn't belong in that stack anyway.

Since what you *want* is a cursive font, neither of those two words should be there, since they tell the browser that, if it doesn't have access to any of the first three fonts, it should do something else entirely. You can hardly blame the poor thing.

Monotype Corsiva on Windows, URW Chancery on Unix and Linux, and Apple Chancery on Mac are more common and look fairly similar, although you may have height problems. Brush Script MT and Mistral are also common, but much bolder. Other common scriptish fonts are Edwardian Script ITC (a copperplate font), Lucida Calligraphy, and Lucida Handwriting, which you show, but I'm fairly sure that Bradley Hand ITC TT is a TrueType variant of Bradley Hand ITC, so you might want to add that to your stack and then follow everything with the generic font descriptor, cursive.

The legal generic font-family names are:

* serif (e.g., Times or Times Roman)
* sans-serif (e.g., Arial or Helvetica)
* cursive (e.g., Zapf-Chancery or Freestyle Script)
* fantasy (e.g., Western or Dracula)
* monospace (e.g., Courier or other "typewriter" font)

Here's a resource by means of which you can see which common fonts are actually installed on your own system:

http://www.codestyle.org/css/font-family/sampler-Cursive.shtml

If they look "the same" as regular text, and not like handwriting at all, those fonts aren't available. At the bottom are links to pre-tested font stacks that work well in several categories. One such stack for cursive fonts, with a fair chance of finding a match on the major platforms, is:

font-family: "Bradley Hand ITC",
"Apple Chancery",
"URW Chancery L",
cursive;

Ideally, the quotes should be there when the font names have spaces in them, but some browsers don't need them.

There is a handy section below the exhaustive list describing what fonts are most available by operating system, but unless you've installed one of those large "font packs" you'll notice that most of the fonts mentioned don't work on your own system. Use at least a few from each OS anyway, as they *may* work on other systems, and try to find each of the fonts in your stack on the Web to see what it looks like graphically, because you'd want them all (ideally) to look roughly similar to maintain the look of your page. Copperplate (usually ornate with fine detail) fonts are not usually similar to brush fonts (bolder and usually with less detail) are not usually similar to calligrapher's fonts, which tend toward finish lines that might be drawn with a pen but not as florid as copperplate.

Always finish the stack with "cursive" as that's where the money is in a pinch.

Puddin'
------------------
Comic Sans MS is theoretically a cursive font, but should only be used if your name is Mickey Mouse, or that of a near relative, and don't mind derisive sneers from persons of taste and distinction. This is why one hopes that the generic font-family isn't used, since Comic Sans infests almost every computer, and may wind up as your default cursive font. Curses!

-

Cheers,

Puddin'

A tender heart is an asset to an editor: it helps us be ruthless in a tactful way.
--- The Chicago Manual of Style

Fonts, schmonts

Edeyn Fonts aren't all that difficult, when you take into account that 97+% of all computer users use Windows or Mac, and they both have a short list of available fonts that are ALWAYS loaded, even on the most bare-bones install.

It's not all that bad a list to choose from, either. Dividing them into the three categories that Erin separates them into seems to be a good fit:

Serif
Courier New - The quick brown fox jumps over the lazy dog. (<font face="courier new">)
Georgia - The quick brown fox jumps over the lazy dog. (<font face="georgia">)
Times New Roman - The quick brown fox jumps over the lazy dog. (<font face="times new roman">)

Sans-Serif

Arial - The quick brown fox jumps over the lazy dog. (<font face="arial">)
Tahoma - The quick brown fox jumps over the lazy dog. (<font face="tahoma">)
Verdana - The quick brown fox jumps over the lazy dog. (<font face="verdana">)

Stunt

Comic Sans MS - The quick brown fox jumps over the lazy dog. (<font face="comic sans ms">)
Fixedsys - The quick brown fox jumps over the lazy dog. (<font face="fixedsys">)
Impact - The quick brown fox jumps over the lazy dog. (<font face="impact">)

Those are a lot of options, actually, since there's all of those in 7 sizes (<font size="1">,<font size="2">,<font size="3">,<font size="4">,<font size="5">,<font size="6">,<font size="7">) that you can use plus or minus switching to go through temporary size changes (<font size="+x">, <font size="-x"> where "x" is an integer between 1 and 6 inclusive), there's bold (<strong>), italic (<em>), and bold-italic (<strong><em>)... and that doesn't even start to go into Text Art possibilities.

If you're using a font other than these 9, then you should use a fallback like Puddintane suggests, but keep in mind that if you DON'T use a fallback, it will just use the viewing user's computer's default font instead. The text doesn't just not show up.

Yes, most fonts of the MILLIONS of fonts out there (no exaggeration, folks) aren't loaded, but the font files can be installed on pretty close to any machine. I have over 9000 fonts on my computer. But the list of 9 above are pretty standard. Comic Sans MS is actually one of the biggest defaults not, "because some idiot at Microsoft likes it," but because it is a highly readable pseudo-handwritten font -- that is one of the defaults on most systems. Most Mac and Linux machines I've ever used had it, as a matter-of-fact.


Edeyn Hannah Blackeney
Wasn't it Jim Henson who said, "Without faith, I am nothing," after all? No, wait, that was God... Sorry, common mistake to make...

Comic Sans MS...

Puddintane's picture

Is shoddy work by an amateur designer, deliberately illiterate, incredibly ugly, irritating to read in any quantity, badly kerned and with artificial junkiness built in, like those backwards "R" pseudo-goofs inserted in faux "children's writing."

It's the only font I know of which has inspired both hatred on the part of professional graphic designers and a condemnatory web site: http://bancomicsans.com/ about which it must be said that it's heavily tongue in cheek.

There are a limited number of places in which it's appropriate, primarily when used for its intended purpose, to represent the lettering in the speech balloons of a badly-drawn comic strip.

All fonts represent approaches to professional calligraphy and the eye appreciates regularity and symmetry, neither of which qualities are possessed by Comic Sans. While very slight variations are attractive in fine calligraphy, and may be introduced programmatically in the very best of printing, allowing the shape and size of letters to be influenced by the letters around them, but the exaggerated shakiness of Comic Sans actually makes it harder to read, since it doesn't follow the rules developed by typographers and scribes over the past several thousand years.

It's not the ugliest font in the world by a long shot, nor even the most illiterate; it's just that there's so damned *much* of it littering the world.

Cheers,

Puddin'

-

Cheers,

Puddin'

A tender heart is an asset to an editor: it helps us be ruthless in a tactful way.
--- The Chicago Manual of Style

It's also

It's also one of the first fonts most newbie users spot that makes a significant change in the appearance of what they write, so many newbies latch on to it. Since they don't know that the "professionals" dislike the font as much as they dislike MS Windows and PCs, they have a lot of fun using it. Eventually, somebody up on Mt. Olympis sets them straight and they move on to other fonts.

It doesn't realy matter, though. No matter what they use, they won't be acceptable to the "professional graphics designers". But that's alright, the "professionals" aren't all that acceptable to us peons. So we'll just go along merrily, not caring what they think. ;-)

Damaged people are dangerous
They know they can survive

In defense of the unloved

erin's picture

The condemnations of Comic Sans are overblown and nearly as ubiquitous as the font itself. The one use you suggest for it is one place I would NOT use it since it is a terrible font for word balloons because it is not kerned like a comic lettering font. Not even like a bad lettering font; that's not what it is and not what it's for. Even for an ironic usage, it would annoy me. :)

I do use it for headings sometimes and I've even used it for body type where I felt it was appropriate. Sometimes it's the right font for the job. That said, the reason I did not end the above suggested string with "cursive" was to avoid Comic Sans since I did not feel it was appropriate to the story.

The absolute worst thing about Comic Sans is the name; it implies some application to comics and Comic Sans has absolutely no application there. The prejudice against it is mostly due to this name and the implications of that name to uneducated users of fonts. It's also misused and overused and those are the second and third worst things about it.. But Arial, Helvetica and Times are overused too and Times is so frequently misused that it sets my teeth on edge. Helvetica and Courier are third and fourth runner ups in being frequently misused.

But I'll continue to use Comic Sans where I think it appropriate to my purpose. If they had called it Hasty Sans, I think the objections to it would be about 30% of what they currently are, maybe 15%. Yes, it's not a particularly good font but nearly everyone has it on their machine and that gives it a utility that a lot of better fonts lack.

As you say, it's not the ugliest font nor the most poorly designed but it sure is overused and misused. But like any tool, it deserves to be used where it IS the right tool for the job.

Hugs,
Erin

= Give everyone the benefit of the doubt because certainty is a fragile thing that can be shattered by one overlooked fact.

= Give everyone the benefit of the doubt because certainty is a fragile thing that can be shattered by one overlooked fact.

okay

kristina l s's picture

This is one of those crossed choice points. Do I respond and continue the discussion away from the original intent or does it help the wider knowledge to do so? I had absolutely no intention to make this a 'fonts' discussion. That was completely a side issue to the general ease of posting something. My lack of knowledge to get 'tricky' makes it less desirable to try. Yet if I understood it, I could, as plenty do. Erin gave me exactly what I needed to do what I had in mind. She took the time to do so amidst the general daily hassles. To my eye it didn't work. Does the example I give above work to others, do you see other than standard or what? If so why? Several examples of fonts look identical to me as I read this comment string yet I know I have those fonts on board. So what is it that causes it to not work? Is it as someone said that html voodoo or is it some setting on a browser or...? Is it the way I post using the text with breaks rather than wysiwyg, for my story post?

For the record I fiddled with Erin's html string, deleting and adding and changing the order of the various fonts. It made no difference that I could see. So I used the inbuilt italic tool to do it. Why? All this talk of comics being antisocial, or not, seems a little off point, if it fits wear it. Most of us don't know dick about computers beyond the basics. Coding and programming might as well be swahili. Most of us will use Windows as do, what is it 70%, 80% of the worlds computer users. Macs and then Linux, hey I know the names, beyond that.... Oh cute penguin... and oh yeah there's red hat there somewhere. Firemen?

So can some clever and oh so knowledgeable type tell me why it didn't work, hmmm? Why do I see the same thing for several different fonts that I know I have on my system??? This is not a challenge to Erin, she has more than enough to do. But all of you that claim to understand all this, eh.

Why Is It So, as a now departed and still famous physics prof used to ask here. I bet if old 'Julie' was about still he could tell me. Sorry you have to be a kid in the 70's here in Oz to get that one, but the question still applies.

Yours befuddledly

Kristina

ps if it is felt this should be a separate comment or bloggy thing feel free.

Okay...

Puddintane's picture

...try this:

The quick brown fox jumps over the lazy dog.

<p><font face="Bradley Hand ITC, Monotype Corsiva, Apple Chancery, URW Chancery L, Brush Script MT, Lucida Handwriting, Lucida Calligraphy, French Script MT, Mistral, Maiandra GD, cursive">The quick brown fox jumps over the lazy dog.</font></p>

You can also shuffle the order of the fonts in the stack, or add (don't subtract unless you don't like the font at all) the exact names of fonts on your own system that you'd like to see, but go out on the web and find them first, so you can see what you'd like to see first. I just used a bunch of likely suspects with no particular design in mind.

The quick brown fox jumps over the lazy dog.

<p><font face="Bradley Hand ITC TT, Brush Script MT, Bradley Hand ITC, Lucida Handwriting, Lucida Calligraphy, French Script MT, Mistral, Maiandra GD, Monotype Corsiva, Apple Chancery, URW Chancery L, cursive">The quick brown fox jumps over the lazy dog.</font></p>

Here is a bigger selection:

The quick brown fox jumps over the lazy dog. There are from 7 to 9 cats in the 1 bag.

<p><font face="Papyrus, Casual, Chalkboard, SchoolHouse Cursive B, Santa Fe LET, Bradley Hand ITC TT, Brush Script MT, Bradley Hand ITC, Lucida Handwriting, Tempus Sans ITC, Lucida Calligraphy, French Script MT, Mistral, Maiandra GD, Kristen ITC, Monotype Corsiva, Apple Chancery, URW Chancery L, Textile, cursive">The quick brown fox jumps over the lazy dog. There are from 7 to 9 cats in the 1 bag.</font></p>

Let me know if it doesn't work at all for your system.

Puddin'

-

Cheers,

Puddin'

A tender heart is an asset to an editor: it helps us be ruthless in a tactful way.
--- The Chicago Manual of Style

Question

Is the font supposed to look the same all three times and be microscopic in size? Even when I increase the zoom on the text the font appears identical all three times. In case it's of any use I'm using OpenSuSE 11.1, latest patch on Firefox 3.0.7 and as many non M$ fonts installed as the distro provides.

Arwen

Font size

Puddintane's picture

The font size can be adjusted separately using either the Big Closet editing tools or another FONT tag attribute: size="+1" or something like it.

Different fonts use up more or less of their hypothetical point size. Some are smaller than the "normal" fonts, but some are larger. This is one of the problems with manipulating fonts as opposed to font treatments like italics and bold.

This is why graphic designers get paid the big bucks and many are completely insane and/or dull-witted through constant disappointment and frustration.

HTML was designed by scientists for the express purpose of allowing them to present scholarly papers on the Web, so its typographical tools are poor to non-existent as far as what real graphic designers -- who work with ink and type on real paper -- are used to.

As I explained in my post about fonts, not all fonts are available on all machines, so what the reader sees is dependent on what's essentially a roll of the dice, and the designer has little or no control of it.

Balancing what's likely to be available on different machines and the overall similarity of the fonts one *hopes* will be available across different platforms is part skill and part guesswork, so a more careful (and expensive) version of my sample font stack would carefully arrange the order -- in combination with a similar stack for body text -- so that those more likely to be similar in size to "typical" display fonts are all arranged in similar fallback orders, leaving anomalies such as you experienced rare exceptions rather than the rule.

But perfection is impossible.

Adjusting the cursive font size so what *you* see is perfect is quite likely to leave someone else in even worse shape. Everything is a tradeoff.

And you should be aware that the FONT tag is deprecated in modern HTML, and may someday disappear (since this would break hundreds of thousands of pages, perhaps millions, all over the web, I don't think that it will happen soon, but still, eventually) to be replaced by cascading stylesheets, which aren't well-supported on the user end of things on Big Closet, so are essentially off-limits.

Puddin'

-

Cheers,

Puddin'

A tender heart is an asset to an editor: it helps us be ruthless in a tactful way.
--- The Chicago Manual of Style

Cascading Style Sheets

erin's picture

Essentially, giving style commands to end users is a security problem since there are well-known exploits and hacks to insert harmful code into browsers for execution on client machines. When the next upgrade happens to BC, sometime in the next couple of months, I'm going to experiment with the newest WYSIWYG editors to see if I can make them work on BC. They are supposed to "sanitize" the code produced to make it safe. I'm running one of them on Fictioneer right now and there doesn't seem to be a problem, or no more of a problem than exists now.

Hugs,
Erin

= Give everyone the benefit of the doubt because certainty is a fragile thing that can be shattered by one overlooked fact.

= Give everyone the benefit of the doubt because certainty is a fragile thing that can be shattered by one overlooked fact.

Cascading Stylesheets...

Puddintane's picture

Similar effects can be obtained through the judicious use of tables, so here are some possible examples of ways to differentiate notes or other material from the body of the story.

Below, you can see one way to differentiate a note or e-mail message using tables. This is not for the faint of heart but allows a great deal of control, including the background colour and whether or not to include a border. I don't particularly like borders, and they tend to crowd the text unless one fiddles with interior containers, so I leave them off. Using a different colour for the background will pop it out from the page without obsessive-compulsive lines drawn around everything. Because I use percentages instead of fixed pixel widths, the tables below will resize themselves to look reasonable in different browser window widths.

This example uses a white background but, with a little fiddling, you can use any colour you please.

Here's another example:

This example uses a pale cyan background but, with a little fiddling, you can use any colour you please.

This is a second paragraph in the same table

Here's another example with two columns, such as might indicate a newspaper:

This column uses a white background to distinguish it from the page background colour but, with a little fiddling, you can use any colour you please. You'll note that the columns don't balance as newspaper columns are wont to do, so you'll have to handle rough balancing on your own.

This is a second paragraph in the same table

This column uses a white background to distinguish it from the page background colour but, with a little fiddling, you can use any colour you please.

This is a second paragraph in the same table but there's a second skinny empty column placed between the two with content to form a gutter between the columns.

Here's the source code so you can see how the trick is done:

<table align="center" width="90%" border="0" bgcolor="#ffffff">
<tbody>
<tr>
<td border="0">
This example uses a white background but, with a little fiddling, you can use any colour you please.
</td>
</tr>

</tbody>
</table>

<p>Here's another example:</p>

<table align="center" width="90%" border="0" bgcolor="#ddffff">
<tbody>

<tr>
<td border="0">
<p>This example uses a pale cyan background but, with a little fiddling, you can use any colour you like.</p>
<p>This is a second paragraph in the same table</p>
</td>
</tr>

</tbody>
</table>

<p>Here's another example with two columns, as might indicate a newspaper:</p>

<table align="center" width="90%" border="0" bgcolor="#ffffff">
<tbody>

<tr>
<td width="47%" border="0" valign="top">
<p>This column uses a white background to distinguish it from the page background colour but, with a little fiddling, you can use any colour you please. You'll note that the columns don't balance as newspaper columns are wont to do, so you'll have to handle rough balancing on your own.</p>
<p>This is a second paragraph in the same table</p>
</td>
<td width="6%">
</td>
<td width="47%" border="0" valign="top">
<p>This column uses a white background to distinguish it from the page background colour but, with a little fiddling, you can use any colour you please.</p>
<p>This is a second paragraph in the same table but there's a second skinny empty column placed between the two with content to form a gutter between the columns.</p>
</td>
</tr>

</tbody>
</table>

Here's another example with two columns, such as might indicate a newspaper, plus a two column headline and full justification:

Kidnappers Foiled in Daring Rescue


This column uses a white background to distinguish it from the page background colour but, with a little fiddling, you can use any colour you please. You'll note that the columns don't balance as newspaper columns are wont to do, so you'll have to handle rough balancing on your own.

This is a second paragraph in the same table

This column uses a white background to distinguish it from the page background colour but, with a little fiddling, you can use any colour you please.

This is a second paragraph in the same table but there's a second skinny empty column placed between the two with content to form a gutter between the columns.

Here's the code:

<p>Here's another example with two columns, as might indicate a newspaper, plus a two column headline and full justification:</p>

<table align="center" width="90%" border="0" bgcolor="#ffffff">

<tbody>

<tr>

<td colspan="3" width="100" border="0" align="center">

<p><font face="san-serif" size="+1"><strong>Kidnappers Foiled in Daring Rescue</strong></p>

<hr />

</td>

</tr>

<tr>

<td width="47%" border="0" valign="top" align="justify">

<p>This column uses a white background to distinguish it from the page background colour but, with a little fiddling, you can use any colour you please. You'll note that the columns don't balance as newspaper columns are wont to do, so you'll have to handle rough balancing on your own.</p>

<p>This is a second paragraph in the same table</p>

</td>

<td width="6%">

</td>

<td width="47%" border="0" valign="top" align="justify">

<p>This column uses a white background to distinguish it from the page background colour but, with a little fiddling, you can use any colour you please.</p>

<p>This is a second paragraph in the same table but there's a second skinny empty column placed between the two with content to form a gutter between the columns.</p>

</td>

</tr>

</tbody>

</table>

Of course, you can fiddle with the fonts as well, but that's already been covered.

Puddin'

-

Cheers,

Puddin'

A tender heart is an asset to an editor: it helps us be ruthless in a tactful way.
--- The Chicago Manual of Style

This is a sample HTML wrapper with some content...

Puddintane's picture

As you can see, the "tags" used for HTML surrond the text they control, including nesting, just like the “quotation marks” around the words ‘quotation marks’ in this sentence. There are many tutorials on the web which allow you to explore in more depth, but cutting and pasting these tags, or doing the equivalent using the Big Closet editing tools, is plenty for most stories.

The code is below this line:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>

<head>
<title>Your title here</title>
</head>

<body>

<!-- This is an invisible comment -->

<!-- Nothing above this comment should be pasted into the story creation window. It's the top part of the HTML wrapper. -->

<h2>This is a Header or Title</h2>
<h3>They take values from 1 to 6</h3>
<h4>Larger numbers are smaller</h4>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<p>This is <em>italicised text</em> in a paragraph.</p>

<p>This is <strong>bold text</strong> in a paragraph.</p>

<p>The line below is a good way to set off a section of text:</p>

<p>*****</p>

<p>The line below is another good way to set off a section of text:</p>

<p><strong>* * * * *</strong></p>

<p>Asterisks are nice to use because most screen readers will pronounce them, so they are accessible to people with difficulty seeing. Other characters, arguably more attractive, may not be pronounced. Horizontal rules, like those which precede and follow this code section, are completely invisible to screen readers, and should <strong>never</strong> be used to set off sections of text which are important to understanding the story. They are for decoration only.</p>

<p>This is another paragraph.</p>

<!-- This is an invisible comment -->

<!-- Nothing below this comment should be pasted into the story creation window. It's the bottom part of the HTML wrapper. -->

</body>
</html>


The code is above this line.

Best of luck,

Puddin'

-

Cheers,

Puddin'

A tender heart is an asset to an editor: it helps us be ruthless in a tactful way.
--- The Chicago Manual of Style

All fine and good.

However I was asking you if the font was supposed to render exactly the same in all three examples you gave. Everything else you listed there is basic stuff. It's understanding the font aspect that is of the most interest to me. If I ever get my epic story completed (three pages to go and total muse abandonment) it'll have some font change requirements. If I can't figure fonts out I'll just have to post the story as a .pdf which would make things very simple for me.

Arwen

Actually...

Puddintane's picture

PDFs have the same problem, unless one embeds the fonts one uses, as Adobe made a decision to trust that certain fonts would "always" be available locally to cut down on the size of every file. Embedded fonts increase file size, and thus the download time for users on slow connections, as well as the storage costs for Erin, and also presents a problem for indexing and searching, so simplifying *your* problem only foists it off on many other people, in one way or another.

Everything's a tradeoff.

You might think about using colours, although they too are invisible to screen readers, possibly in combination with special punctuation, to indicate important differences. Italics and bold have the same problem, so many writers use flanking asterisks or various brackets or braces to indicate, let's say, thoughts or mental telepathy or foreign languages.

*Heck!* she observed to herself.

"Achtung!" [Attention!] the German officer shouted with a pronounced Bavarian accent.

{You are standing unto danger!} the man signaled with nautical code flags.

--You are in my power-- Dracula insinuated mentally, as he exerted his dreadful hypnotic will upon the helpless maiden.

Cheers,

Puddin'

-

Cheers,

Puddin'

A tender heart is an asset to an editor: it helps us be ruthless in a tactful way.
--- The Chicago Manual of Style

Copy and paste

I work on my stories in MS Word, and then copy the text into the editor here, and then find the parts I want in italics or blockquote or bold (there usually aren't a lot of them) and change them. For my serials, I open the previous chapter in edit mode and copy everything above the break so that I don't have to remember the HTML voodoo that formats it, and then change the teaser to the new text. Sometimes I write those while writing the story, and sometimes I type them up during this formatting phase.

I'm no Techie

And maybe I'm a bit lazy at times, too. Okay -- probably so on that last one.

I simply copy from MS word, then past into the block for the story. Then use the convenient tools at the top to center, use bold, and alter the font size. Oh, I also then to use Verdana for text since it seems to render best on computer screens.

Simple, no coding involved, and there you have it.

Writing stories

is, to me, the easiest part. The hard part is submitting them. How do you send a story so it is easy to post.

In writing, MS Word is rather easy, compared to an old typewriter. No wasted paper. I set everything in Word, wear out keys reading, adding this or that, using the old
hunt-and-peck system, 'til I'm nearly satisfied (I am really never completely finished as I feel there could changes here and there).

Then comes the problem -- do I submit in .doc, .rtf, .txt or the "unicode," and which is the best way: that is, which makes the least amount of work? (If I'm doing or will do something wrong, Erin, I apologize beforehand!)

Okay, I had my say. Thank you, all, for this open forum, I'm sure I'll get some ideas from this erudite grouping.

Annie in PA

Annie in PA

Posting

Puddintane's picture

Actually, cutting and pasting from MS Word simplifies a great number of things, since Big Closet's engine will automatically do quite a bit of conversion (or rather, allow flexible variations from the strict rules of HTML) to allow the insertion of accented characters and whatnot, very few of which are available in the rigidly US-centric ASCII which forms the basis of the Internet.

If you want to write, ‘déjà vu’ without wincing when you read it on the page, or use “curly quotes” like these instead of ugly straight "typewriter quotes" like these, one can easily forgive the need to “clean up” the text through hand editing using Big Closet facilities, or learn a very few tags to do the same thing by hand.

I prefer reading serifed fonts, as they have a rhythm and beauty which is attractive to me, so take some pains to ensure these qualities when it counts.

If it doesn't matter, I don't much care, so this paragraph is in the default Big Closet font. San-serif fonts are wonderful as titles, and that's actually one of the best uses for them, because sans-serif fonts are slightly harder to read in quantity.

On the Web, one sees a lot of them because the resolution of the screen is usually so poor that serifs and other fine detail become muddy unless one enlarges the type size. In printed media, especially newspapers, the typical choice for body copy is Times Roman or another serifed font, since legibility is greatly enhanced by printed serifs, since real ink can preserve very fine details.

Cheers,

Puddin’

-

Cheers,

Puddin'

A tender heart is an asset to an editor: it helps us be ruthless in a tactful way.
--- The Chicago Manual of Style

Fonts on BC

erin's picture

Georgia is the default body type for story posts at BC but not for comments.

Georgia has serifs and is optimized for pixel representation rather than ink, so it doesn't look muddy or smudged. It's kind of plain and a little stupid-looking in print. :) One of the earlier versions of the print-page function used Palatino but that got wiped out in the upgrade and I haven't restored it. Palatino is a more book-oriented relative of Times (or Times New Roman), the cheap printing newspaper font.

Otherwise, Verdana which makes better use of space for on screen legibility than its print-oriented sanserif cousins, Arial and Helvetica.

I don't overuse Georgia because I want the stories to stand out. I do use the heck out of Verdana because it is the most inoffensive of type faces. If your machine does not have Georgia you are probably seeing Times or Times New Roman or maybe Palatino. If your machine does not have Verdana, you are probably seeing Arial or Helvetica or maybe Tahoma.

The only other default font on BC is (New) Courier which has a very limited use: inbetween code tags.

Hugs,
Erin

= Give everyone the benefit of the doubt because certainty is a fragile thing that can be shattered by one overlooked fact.

= Give everyone the benefit of the doubt because certainty is a fragile thing that can be shattered by one overlooked fact.

Opposite, in my experience

From what I've seen and used, both in web design and in actual paper-and-ink print newspapers, the SERIF fonts are the ones preferred for the headlines and the San-Serif for the body, as San-Serif is more readable.

I don't know what newspapers you look at ...

erin's picture

... but that is completely opposite MY experience and training. :) Serif fonts like Times and Palatino and New Century Schoolbook are everywhere for body-type while san-serif fonts like Arial and Helvetica are used for headlines and captions. Serif fonts give more information to the eye and brain and are more easily read in the same size font. For this reason, gothic (sanserif) fonts are usually printed larger than roman (serif) ones.

Hugs,
Erin

= Give everyone the benefit of the doubt because certainty is a fragile thing that can be shattered by one overlooked fact.

= Give everyone the benefit of the doubt because certainty is a fragile thing that can be shattered by one overlooked fact.

Mainly Copy and Paste

I write in a fairly simple RTF editor and copy/past from it. In general, the posting of a story is a more enjoyable experience when I use minimal formatting, it also makes it easier to post to other text based sites, but I still find myself giving in to the lure of formatting.

If it is fairly minimal, a bit of alignment/bolding/italics, I will usually just do it in the editor. If it is more, then I will create a copy of my story in which I bracket text with the actual formatting commands before pasting.

How do I post stories to BigCloset??

 

Berry Berry carefully


Hang on Baby Friday's coming!

I end up reformatting from RTF to html with notetab pro and then copy and paste!
It works for me!

Konichiwa