Stylesheets - stylesheet for screenplays

Author

stylesheet for screenplays - @page example ?

David J Patrick

2004-06-19, 7:15 pm

I'm trying to rewrite the CSS used in
http://s92415866.onlinehome.us/file...playCSSv2.html.
using the w3.org paged media standards as described at
http://www.w3.org/TR/REC-CSS2/page.html

The ScreenplayCSS is flawed, for several reasons;
-overuse of <div id= tags
-doesn't scale screen resolutions (convert from px to in, pt ?)
-no media="print" (how much coule be shared between "screen" & "print")
-no automatic page breaks (with automatic numbering ?)

The "hollywood" screenplay format is well defined
(http://www.online-communicator.com/faq20_5.html)
Is it possible to drive a consistant printout, from html, with CSS ?
Does anyone have suggestions for improvement of the above ScreenplayCSS ?
How about an example of a page that uses the @page definition ?
thanks !
djp

Tim

2004-06-20, 12:15 pm

On Sat, 19 Jun 2004 12:36:29 -0400,
David J Patrick <davidjpatrick@sympatico.ca> posted:

> I'm trying to rewrite the CSS used in
> http://s92415866.onlinehome.us/file...playCSSv2.html.
> using the w3.org paged media standards as described at
> http://www.w3.org/TR/REC-CSS2/page.html
>
> The ScreenplayCSS is flawed, for several reasons;
> -overuse of <div id= tags
> -doesn't scale screen resolutions (convert from px to in, pt ?)
> -no media="print" (how much coule be shared between "screen" & "print")

Pt should be fine for printing, but not for the screen. You're probably
best not to make font specifications in the screen styling (that's normal
advice, but I'd say even more so if you want to submit something long for
someone to read that might earn you a job - remove all obstacles that make
browser reading a pain).

> -no automatic page breaks (with automatic numbering ?)
>
> Is it possible to drive a consistant printout, from html, with CSS ?

This sort of thing, and what browsers typically do when printing (add their
own footers and headers) are some of the reasons that you'd probably not
want to print such things from a web browser.

--
If you insist on e-mailing me, use the reply-to address (it's real but
temporary). But please reply to the group, like you're supposed to.

This message was sent without a virus, please delete some files yourself.

Wolfgang Wildeblood

2004-06-21, 4:39 am

David J Patrick <davidjpatrick@sympatico.ca> wrote:

> The ScreenplayCSS is flawed, for several reasons;
> -overuse of <div id= tags

Damn right, all those IDs should be classes. This won't bother the
CSS, but it's very broken HTML.

> -doesn't scale screen resolutions (convert from px to in, pt ?)
> -no media="print" (how much could be shared between "screen" & "print")

Not much. You go about it (screen and print formatting) two different
ways.

Take MyNovel.txt, for example. To print this as a "manuscript" to send
to a publisher you'd want a specific format:-

- A monospaced font giving exactly:
- 60 characters per line,
- 25 lines per page,
- 1500 characters (250 words) per page.

To achieve this in print you measure the size of the paper, deduct the
margins, then divide by 60 to get the font-size that results in 60
characters per line. Then set a line-height that results in 25 lines
per page.

But to get the same formatting on screen (i.e. line breaks in the same
places), you simply specify directly that you want 60 characters per
line.

p {
width: 60em !important;
margin: auto;
}

That's all there is to it; as usual for screen, no mention of
font-size at all. So the stylesheet just looks something like:

@media print, projection, screen {
* {
font-family: "Courier New", monospace !important;
line-height: 2;
}
}

@media print {
* { font-size: 12pt /* or whatever */ !important;
}

@media projection, screen {
p {
width: 60em !important;
margin: auto;
}
}

--
"He's a kind of super-criminal, he can travel through time and space."

Neal

2004-06-21, 4:39 am

On 20 Jun 2004 22:51:41 -0700, Wolfgang Wildeblood
<wolfgangwildeblood@yahoo.com.au> wrote:

> But to get the same formatting on screen (i.e. line breaks in the same
> places), you simply specify directly that you want 60 characters per
> line.
>
> p {
> width: 60em !important;
> margin: auto;
> }

If only 1em = 1 character!

David J Patrick

2004-06-21, 7:14 am

On Sun, 20 Jun 2004 22:51:41 -0700, Wolfgang Wildeblood wrote:

> David J Patrick <davidjpatrick@sympatico.ca> wrote:
>
>
> Damn right, all those IDs should be classes. This won't bother the
> CSS, but it's very broken HTML.
>

I know I'm exibiting my ignorance here, but in replacing those <div id=
tags I simply use;

..dialog{ /* . instead of # */
margin:0pt 110pt 0pt 85pt: /* actual pixel to point conversion to be
worked out */
}

and in the html
<p class="dialog">Words words words</p>

That simple ?

Wolfgang Wildeblood

2004-06-21, 7:14 am

Neal <neal413@yahoo.com> wrote:

> On 20 Jun 2004 22:51:41 -0700, Wolfgang Wildeblood
> <wolfgangwildeblood@yahoo.com.au> wrote:
>
>
>
> If only 1em = 1 character!

That's the whole point of using monospaced fonts, Neal.

Just send your grovelling retraction on good quality paper suitable
for framing, okay?

--
"Join me, Doctor? We could rule together."

Steve Pugh

2004-06-21, 7:14 am

wolfgangwildeblood@yahoo.com.au (Wolfgang Wildeblood) wrote:
>Neal <neal413@yahoo.com> wrote:
>
>That's the whole point of using monospaced fonts, Neal.

But 1em is still the height of the font, not the width of a character.

Try it for yourself.
<div style="width: 10em; font-family: monospace; padding: 0; border:
1px solid red;">1234567890</div>
See how much wider the div is than the text?

>Just send your grovelling retraction on good quality paper suitable
>for framing, okay?

I'm sure Neal looks forward to receiving that from you.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

Tim

2004-06-21, 12:15 pm

Wolfgang Wildeblood <wolfgangwildeblood@yahoo.com.au> wrote:

Neal <neal413@yahoo.com> wrote:
[color=darkred]

Wolfgang Wildeblood wrote:
[color=darkred]

Steve Pugh <steve@pugh.net> posted:
[color=darkred]
> But 1em is still the height of the font, not the width of a character.

And... It's only a *width*, it doesn't mean 60 characters across the page,
it means fill the page with text to the width of 60 ems. You could well
have 70 characters across the page. Even with a monospaced font, each
character is still smaller than the width of an em (which has various vague
and contradictory definitions).

--
If you insist on e-mailing me, use the reply-to address (it's real but
temporary). But please reply to the group, like you're supposed to.

This message was sent without a virus, please delete some files yourself.

Neal

2004-06-21, 12:15 pm

On 21 Jun 2004 02:12:17 -0700, Wolfgang Wildeblood
<wolfgangwildeblood@yahoo.com.au> wrote:

> Just send your grovelling retraction on good quality paper suitable
> for framing, okay?
>

Sorry it's been flushed ;)

PeterMcC

2004-06-21, 7:16 pm

David J Patrick wrote in
<pan.2004.06.19.16.36.28.779818@sympatico.ca>

> I'm trying to rewrite the CSS used in
> http://s92415866.onlinehome.us/file...playCSSv2.html.
> using the w3.org paged media standards as described at
> http://www.w3.org/TR/REC-CSS2/page.html
>
> The ScreenplayCSS is flawed, for several reasons;
> -overuse of <div id= tags
> -doesn't scale screen resolutions (convert from px to in, pt ?)
> -no media="print" (how much coule be shared between "screen" &
> "print")
> -no automatic page breaks (with automatic numbering ?)
>
> The "hollywood" screenplay format is well defined
> (http://www.online-communicator.com/faq20_5.html)
> Is it possible to drive a consistant printout, from html, with CSS ?
> Does anyone have suggestions for improvement of the above
> ScreenplayCSS ? How about an example of a page that uses the @page
> definition ? thanks !

Apologies if this is on the wrong track but Final Draft - which is pretty
much accepted in the industry - works to the "Hollywood" format and has a
"Save as html option" which I've never used until your post. So, I just
tried it - confidently expecting Word-style bloat. Because of the
constraints of the screenplay format, FD is able to simply output the entire
thing in <pre>. Perhaps that might point in a useful direction.

BTW, FD is available as a demo at http://www.finaldraft.com/

--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

BenOne©

2004-06-21, 7:16 pm

Neal wrote:

> On 20 Jun 2004 22:51:41 -0700, Wolfgang Wildeblood
> <wolfgangwildeblood@yahoo.com.au> wrote:
>
>
>
>
> If only 1em = 1 character!

I learned that the hard way. It's a pity there isn't a standard measurement for
a character.

Is it true that IE sets the height of a container based on the contents, when
you use em to specify the height, or is IE just confusing me by automatically
resizing the div even if I explictly set the height?

--
Ben Thomas
Opinions, conclusions, and other information in this message that do not
relate to the official business of my firm shall be understood as neither
given nor endorsed by it.

Christoph Paeper

2004-06-21, 7:16 pm

*BenOne©* <nosp@m.thanks.mate>:
> Neal wrote:
>
>
> I learned that the hard way. It's a pity there isn't a standard measurement
> for a character.

Well, Mozilla uses the proprietary 'ch', but for what it's worth, 'ex' comes
much closer to the average character width than 'em', even if it's
implemented in its simplest form ("0.5em").

--
"Anyone who slaps a 'this page is best viewed with Browser X' label on a
Web page appears to be yearning for the bad old days, before the Web, when
you had very little chance of reading a document written on another computer,
another word processor, or another network." Tim Berners-Lee, 1996

Wolfgang Wildeblood

2004-06-21, 11:15 pm

Steve Pugh <steve@pugh.net> wrote:

> wolfgangwildeblood@yahoo.com.au (Wolfgang Wildeblood) wrote:
>
> But 1em is still the height of the font, not the width of a character.
>
> Try it for yourself.
> <div style="width: 10em; font-family: monospace; padding: 0; border:
> 1px solid red;">1234567890</div>
> See how much wider the div is than the text?

I thought Neal was waffling about how not all lines will have the
same number of characters. (And I still suspect he might have been.)
Don't be so vague Neal.

But even my dog knows characters in Courier fonts are 3/5 of an em
wide (How do they fit the capital M in, he wonders idly?). So my 60em
stated above gives 100 characters. I ommitted an important step:
multiply the required number of characters by 3/5 to get the width.

>
> I'm sure Neal looks forward to receiving that from you.

Sorry, Neal. (So how come you didn't give the correct number?)

--
"Really, Jo. Don't tell me you failed Latin as well as science?"

Wolfgang Wildeblood

2004-06-22, 7:14 am

Christoph Paeper <christoph.paeper@nurfuerspam.de> wrote:

> *BenOne©* <nosp@m.thanks.mate>:
>
> Well, Mozilla uses the proprietary 'ch', but for what it's worth, 'ex' comes
> much closer to the average character width than 'em', even if it's
> implemented in its simplest form ("0.5em").

Well Mozilla supposedly implements ex properly (i.e. independently of
em) but yes other browsers just substitute 0.5em, which is as good as
useless. That might be closer to the average character width than em
is, but it's not nearly close enough to use as a direct substitute
without correction. In their defence, it shouldn't be up to browsers
to perform low-level OS functions like dealing with fonts, anyway.

It's just another example of how misguided CSS is.

My theory is that ex is most useful in setting the leading between
lines, which should be some preferred multiple of 1ex, causing the
leading to adjust appropriately with different typefaces.
Unfortunately, CSS doesn't use "leading" but the misguided
"line-height". So it would need mathematical functions, something
like:-

* { line-height: 1em + 0.67ex }

Which it also doesn't have. So CSS as it stands is pretty damn broken.

--
Stephen Poley has a page about "ex" on his site,
but I can't recall the URL OTTOMH.

Wolfgang Wildeblood

2004-06-22, 7:14 am

David J Patrick wrote:

> On Sun, 20 Jun 2004 22:51:41 -0700, Wolfgang Wildeblood wrote:
>
>
> I know I'm exibiting my ignorance here, but in replacing those <div id=
> tags I simply use;
>
> .dialog{ /* . instead of # */
> margin:0pt 110pt 0pt 85pt: /* actual pixel to point conversion to be
> worked out */
> }
>
> and in the html
> <p class="dialog">Words words words</p>
>
> That simple ?

Yes.

Wolfgang Wildeblood

2004-06-22, 7:14 am

wolfgangwildeblood@yahoo.com.au (Wolfgang Wildeblood) wrote:

Well some smart-alec people have pointed out that I missed a step, but
they didn't look that closely or they would have seen that I also
missed a crucial bracket. Here's the corrected post:-

> David J Patrick <davidjpatrick@sympatico.ca> wrote:
>
>
> Damn right, all those IDs should be classes. This won't bother the
> CSS, but it's very broken HTML.
>
>
>
> Not much. You go about it (screen and print formatting) two different
> ways.
>
> Take MyNovel.txt, for example. To print this as a "manuscript" to send
> to a publisher you'd want a specific format:-
>
> - A monospaced font giving exactly:
> - 60 characters per line,
> - 25 lines per page,
> - 1500 characters (250 words) per page.
>
> To achieve this in print you measure the size of the paper, deduct the
> margins, then divide by 60 to get the font-size that results in 60
> characters per line. Then set a line-height that results in 25 lines
> per page.
>
> But to get the same formatting on screen (i.e. line breaks in the same
> places), you simply specify directly that you want 60 characters per
> line.

By multiplying 60 times the width of 1 character (3/5em) for a total
of 36em.

> p {
> width: 60em !important; <-- spot the mistake?
> margin: auto;
> }
>
> That's all there is to it; as usual for screen, no mention of
> font-size at all. So the stylesheet just looks something like:
>
> @media print, projection, screen {
> * {
> font-family: "Courier New", monospace !important;
> line-height: 2;
> }
> }
>
> @media print {
> * { font-size: 12pt /* or whatever */ !important;
> }

Anyone who copy/pasted this example would have quickly discovered a
missing bracket here :-( the @media print block was never closed. Ooh
look, there it is:

}

> @media projection, screen {
> p {
> width: 36em !important; /* 36em = 60 characters */
> margin: auto;
> }
> }

--
Don't Ebay and newsgroup at the same time, it's too distracting.