A little bit of graphics help?

[Rolfe]

Sigh. I'm just taking advantage of you guys. But if it's a quick job, as I suspect it might be for someone familiar with graphics packages, I'm in need of two small square graphics.

I'm trying to sort out a dramatis personae page, and I'm missing pics for a number of the characters. A few I just don't have pictures of, but hope to acquire these later. Some will never have pictures, because the characters in question were never portrayed in any visual medium.

I need a couple of placeholder piccies - maybe just a silhouette of head and shoulders, maybe different colours. Square. Not large. One with the words "No picture available" across it, and the other with "Never shown in any visual medium".

If it's too big a job, I'll improvise. However, if anyone thinks they can knock something up in five minutes, it would make my pages look better....

Rolfe.

[geni]

I need a couple of placeholder piccies - maybe just a silhouette of head and shoulders, maybe different colours. Square. Not large. One with the words "No picture available" across it, and the other with "Never shown in any visual medium".



In what file format?

http://commons.wikimedia.org/wiki/File:Falta_imagen_mujer.svg
http://commons.wikimedia.org/wiki/File:Replace_this_image_PL.svg

Since they are currently SVG changing the size and text is trival.

[Rolfe]

jpg. At least, all the others are .jpg.

That silhouette is much as I had in mind, but too specific. A generic head and shoulders would be better - on pther pages, the characters aren't even human, but they are generally humanoid.

OK, this is the page I'm working on (http://www.b5-dark-mirror.co.uk/humans.html). I've still got over 30 entries to go. Not sophisticated I know, but right now I just want to get it up.

Rolfe.

[geni]

jpg. At least, all the others are .jpg.

That silhouette is much as I had in mind, but too specific. A generic head and shoulders would be better - on pther pages, the characters aren't even human, but they are generally humanoid.


generic heads are tricky. Even gender neutral doesn't tend to work out too well (closest wikipedia ever got is http://commons.wikimedia.org/wiki/File:No_portrait_gray_test.svg ).

Otherwise:

http://commons.wikimedia.org/wiki/File:No_free_image_(camera)-he.svg


(again changeing the text and scaleing to 92*92 isn't a significant issue.

[Rolfe]

generic heads are tricky. Even gender neutral doesn't tend to work out too well (closest wikipedia ever got is http://commons.wikimedia.org/wiki/File:No_portrait_gray_test.svg ).


That one's just fine. Perfecto.

Rolfe.

[geni]

That one's just fine. Perfecto.

Rolfe.

Maybe but since the licenseing terms would require you to link to http://creativecommons.org/licenses/by-sa/3.0/ and credit Omegatron and geni probably not suitable. People also feel that it is very ugly.

"Never shown in any visual medium" is pushing it for 97 px BTW.

[Rolfe]

Don't see why not. Can put credits and link at the foot of the page I imagine, would be fine. Maybe a little asterisk by the actual images to indicate the footnote. Doesn't look ugly to me, just a neutral place-holder.

Can you think of a shorter form of words? "Image not available" or "No image available" is fine, but that rather covers the instances where an image might be sourced, that is there is either an actor's picture or a drawing somewhere that I hope to get my mitts on eventually. (I think I've got all the drawings actually, it's the video capture that's the pain. I have literally no idea how Gary Sanders got the ones he provided.) It's the ones where there will never be an image, because the character only exists in prose form, that need a suitable indication.

Maybe just "No image exists"? How about that?

Rolfe.

[Wudang]

"Never pictured/drawn"? vs "Awaiting image"?

"This graphic intentionally left blank"? (little in-joke)

This any help? http://labnol.blogspot.com/2005/11/capture-still-images-from-windows.html

[Rolfe]

"Never pictured/drawn"? vs "Awaiting image"?

"This graphic intentionally left blank"? (little in-joke)

This any help? http://labnol.blogspot.com/2005/11/capture-still-images-from-windows.html


That's handy. I did try to do some screen captures and failed miserably. I downloaded two or three DVD players because people said they would support screen capture, but never managed it. One or two people showed me screen captures they had produced, but I never got clear instructions on how they were doing it.

I had too much else to do with the site, editing the actual story. I gave up. Temporarily, I thought. You know how it goes.

Then a fan of the site who had been helping with the editing sent me a load of screen captures, with the relevant pages sort of half-completed. He must have spent quite a while finding these images and doing the screen capture, and also confirming which TV episode, book or whatever the character apeared in. However, they weren't quite ready to upload as they were, in particular the page I'm working on now. My original page had quite a lot of text for a good number of the characters, while Gary's version had the pics but not the text. I had other stuff going on, and I looked at the work involved and sighed a bit.

I left it aside for eight years. I had other stuff going on, and probably over-estimated the time it would take. I should just have dedicated a few days to it and sorted it out. I didn't.

Then, when I was collecting the files to move the whole web site to a new server, I found Gary's versions of the pages, and had a massive attack of guilt. I immediately shoved his pages up on the new site, because even in their unfinished form they were enormously better than the fragmentary pages I had put there myself. However, the first page in particular was crying out for the two versions (his and mine) to be amalgamated, so that's what I'm trying to do now.

Once that's all tidied, and decent placeholder pics sourced, the next thing is to write the text to go with each character - quite a lot haven't been done by either Gary or myself. This will take longer than it would have eight years ago, because I can't remember the episodes with as much clarity now, so I'll have to look stuff up. After that's done, I can take a look at the remaining images that are missing, and also perhaps replace one or two of Gary's that could be improved on.

Maybe in another eight years....

Sigh. I have a house to clean and tidy, an elderly mother who says, "you just sit playing with that computer....", an anti-homoeopathy web site to update, and TV to watch and books to read....

Who said immortality would be boring?

I'm still suffering massive guilt pangs over all the work Gary did, which I didn't put up at the time. I did email him two days ago, and although I haven't had a reply, I haven't had a bounce message either, so I hope the email is still active.

Did I ever tell you about my family motto, which is apparently "Sero sed Serio (http://www.stewkerr.pwp.blueyonder.co.uk/Kerr.htm)"? My school Latin teacher nearly had apoplexy on the spot when I asked her what it meant.

Rolfe.

PS. I think I'll go with "Image not available" for the ones I don't yet have, and "No image exists" for the ones that can never be sourced.

How do you get the words on the image?

[geni]

Rolfe.

PS. I think I'll go with "Image not available" for the ones I don't yet have, and "No image exists" for the ones that can never be sourced.

How do you get the words on the image?

Open the image in inkscape or vector editor of your choice. Change the text then export as bitmap.

[geni]

and check you have the right thing selected when you export to bitmap

[Anthem]

Ideally,(for the smooth finish) I'd go for a vector-based program, like Illustrator (although vector-based, you can import bitmapped images to work upon). (But I'm heavely biased, simply love Illustrator).

[Soapy Sam]

That's handy. I did try to do some screen captures and failed miserably. I downloaded two or three DVD players because people said they would support screen capture, but never managed it. One or two people showed me screen captures they had produced, but I never got clear instructions on how they were doing it.


Forgive me if I'm being dim- but I usually find the "Print Screen" key (Fn PrtSc on this little EEE) does this perfectly. Then paste into M$Paint or any drawing prog. Or do you mean something totally different

[Rolfe]

That's what didn't work in any of the DVD players I tried. There's a long, technical explanation of the reasons on that page Wudang linked to, mostly to do with something called "overlay".

Rolfe.

[Rolfe]

Ideally,(for the smooth finish) I'd go for a vector-based program, like Illustrator (although vector-based, you can import bitmapped images to work upon). (But I'm heavely biased, simply love Illustrator).


Love it, love it. Now, the other one, in a contrasting colour? (I'll need to wait till I get on my own PC at home before I can try this myself.)

It doesn't need to be perfect, as you'd realise if you saw the page it's meant for. (Which will look a bit better than it does, but I'd like to get the material in before I start tweaking the layout.)

Rolfe.

[Soapy Sam]

*Scratches head in puzzletude. Dead beetles fall out.*

[Rolfe]

Nothing to the puzzletude of doing "print screen" and getting a black square. Or thinking you got the picture but having it slide around and out of frame while you're trying to edit it. And then realising that it's gone completely after you re-booted the computer.

I don't really know why some systems seem to copy OK and others don't, but Wudang's link goes into it in some detail. It also suggests that there are facilities available now that make it relatively easy.

Memo to self: steal Wudang's avatar right now for the "Vorlons" section, because it's a better image than the one Gary used.

Rolfe.

[ohms]

That's what didn't work in any of the DVD players I tried. There's a long, technical explanation of the reasons on that page Wudang linked to, mostly to do with something called "overlay".

Rolfe.


VLC media player should do what you need. You can set the save directory and which format you want to save as (png or jpg) then it's just Shift+S to
take a video snapshot. http://www.videolan.org/vlc/

[Wudang]

Memo to self: steal Wudang's avatar right now for the "Vorlons" section, because it's a better image than the one Gary used.


If you want some B5 screen caps I can probably help. Unless it's Crusade which I'd rather pretend didn't exist.
Actually I think I may have nicked it off t'interwebs somewhere.

PS what ohms said (though tempted to show him some resistance but probably futile). Done that and it's dead easy.

[Anthem]

Open the image in inkscape or vector editor of your choice. Change the text then export as bitmap.

Sounds like an elegant solution.
When opening the .SVG into illustrator I got the next message:
"This SVG is invalid, validate it".
To find a way around it, I finally opened Photoshop, opened the picture as a .PNG, selected the two grey areas, made paths out of those and saved the paths to Illustrator...Although I'd rather like to see Illustrator be able to open the .SVP in the first place. Got to find out what's up with that.

[Rolfe]

The blog page in the links mentions several the author says will do that.

I was actually trying to do this in about 2000. From the comments on the blog, people are still running into the same sort of trouble, but there are clearer ways out of it now.

Rolfe.

[Wudang]

BTW http://www.videolan.org/doc/faq/en/index.html#id438120

VLC saves them as png files. Irfanview can convert them to jpg or whatever. At work I have little choice (and less patience) about what software I can have on my PC so often just pull up Powerpoint, shove the jpg as background, put a text box or text art on top and save one foil as jpg.
Inelegant but .....

[Anthem]

Love it, love it. Now, the other one, in a contrasting colour? (I'll need to wait till I get on my own PC at home before I can try this myself.)
Rolfe.

In blue and green?

[Rolfe]

If you want some B5 screen caps I can probably help. Unless it's Crusade which I'd rather pretend didn't exist.
Actually I think I may have nicked it off t'interwebs somewhere.

PS what ohms said (though tempted to show him some resistance but probably futile). Done that and it's dead easy.


Thanks, but I don't really need the screen caps right now. In fact Gary Sanders did 95% of the work in 2000, I just didn't do the last bit and get the pages up. I think there's some of his images could be bettered, maybe most of them, but I'm not really looking that particular gift horse in the mouth at the moment. I'm more interested in getting the placeholder image for the characters that never appeared visually.

Well, I suppose, if you're offering.... the ones Gary seems to have missed are:

Amanda Carter (Spider in the Web)
Deuce (Grail)
Netter (Survivors)
G'Dan (And the rock cried out)
G'Dok (A Day in the Strife)
G'Lorn (The Long Night)
The Walkers of Sigma 957 (Mind War)
If I had these, I wouldn't need the "Image not available" placeholder - until I find one that even the obsessive Gary has missed, I suppose.

The pages are www.b5-dark-mirror.co.uk/humans.html (http://www.b5-dark-mirror.co.uk/humans.html)
www.b5-dark-mirror.co.uk/minbari.html (http://www.b5-dark-mirror.co.uk/minbari.html)
www.b5-dark-mirror.co.uk/others.html (http://www.b5-dark-mirror.co.uk/others.html)

You can see that they're not very well laid out, but I'll tweak the layout later when the content is there.

Actually, that whole web site was built when many if not most people were using 640x480 screen resolution, and the images were sized accordingly. I suppose later I may try to re-design the pages which have images and use bigger ones, but not this week.

Crusade does not feature. That doesn't figure in the fanfic at all. For every reason you can think of, starting with, it sucks. Neither does Elizabeth Lochley - we're pretending she didn't exist as well.

Rolfe.

[Rolfe]

In blue and green?


Oh, pretty!

However, the idea is to have one which reads "Image not avaliable" and one which reads "No image exists", and to do them in difference colours so that they're easily distinguished.

Rolfe.

[grmcdorman]

Rolfe, while I don't have anything to add on the graphics issue, as it's been covered pretty well, I did take a look at the source HTML on your web page. It's pretty good except for a few cases where the image size specified in the IMG tag doesn't match the actual source image (for example, the picture of the Alicia character).

I suspect you already know why this is a bad thing, but in case you don't - and for the general audience - I'll explain.

The intent of the size specification on the IMG tag (<IMG HEIGHT="nn" WIDTH="nn" ...) is to allow the browser to layout the page before it actually receives the image; this speeds up page render. However, it can be used to cause the browser to resize the image to the specified size.

Some web page writers use this to display much reduced images (e.g. thumbnails). This is inappropriate, though, because then the browser must fetch the full sized image and perform the resize. If the user has a slower connection, or a slower computer, this can cause a significant delay.

[ohms]

In blue and green?


Purple! ;)

[Anthem]

Oh, pretty!

However, the idea is to have one which reads "Image not avaliable" and one which reads "No image exists", and to do them in difference colours so that they're easily distinguished.

Rolfe.

Ah, understood.

[Anthem]

Purple! ;)

And in purple, although there was something nice to the RGB sequence ;)

[Rolfe]

Rolfe, while I don't have anything to add on the graphics issue, as it's been covered pretty well, I did take a look at the source HTML on your web page. It's pretty good except for a few cases where the image size specified in the IMG tag doesn't match the actual source image (for example, the picture of the Alicia character).

I suspect you already know why this is a bad thing, but in case you don't - and for the general audience - I'll explain.

The intent of the size specification on the IMG tag (<IMG HEIGHT="nn" WIDTH="nn" ...) is to allow the browser to layout the page before it actually receives the image; this speeds up page render. However, it can be used to cause the browser to resize the image to the specified size.

Some web page writers use this to display much reduced images (e.g. thumbnails). This is inappropriate, though, because then the browser must fetch the full sized image and perform the resize. If the user has a slower connection, or a slower computer, this can cause a significant delay.


Yeah, I know about that problem. It seems to have been due to crossed wires between Gary and me, almost certainly my fault. I had intended the images to be square, probably 92 square (don't ask me why, I can't remember now). The ones I did myself (scans of pictures in books and comics) were 92 square I think. But I seem to have mis-typed, and put 97 for the width when I wrote the code. Then Gary swiped my source code to do the bit he did, and he's taken me literally. The images he did as screen captures are wider than they are tall.

So, the discrepancy. It's not huge, but it's a little annoying because the right-hand edges of the images don't line up. One of the things in my "to-fix" list, but to be honest, not very near the top of it right now.

As I said, one day (maybe about 2020) I'd like to re-design the pages with the images with bigger pictures, to reflect the fact that modern screen resolutions have changed a lot in the past 10 years. The start of the front page (http://www.b5-dark-mirror.co.uk/) (a dog's breakfast after the top bit, but I still like the top bit) was originally meant to fill the screen, at full-screen, on a 640x480 monitor. Not many of these around now!

Rolfe.

[Rolfe]

Ah, pretty images all round. I just need to re-size them, and sort out the attribution.

Rolfe.

[Rolfe]

Used green and purple. How could I choose otherwise?

Rolfe.

[Anthem]

Hereby the .svg file of "image not available", it should be editable for Illustrator and hopefully for another vector-based drawing program, you could try and open it and assign your colors. The font has been replaced by outlined objects.

If you can't succeed, you might try and open the .svg file in a text-editor and change the colours in the text-version, I don't have any experience there, so there's something to learn for me as well.

[grmcdorman]

Yeah, I know about that problem. It seems to have been due to crossed wires between Gary and me, almost certainly my fault. I had intended the images to be square, probably 92 square (don't ask me why, I can't remember now). [snip]

Unfortunately, it's worse than that. The image I mentioned, for example - Alisa - is actually 143x143, scaled to 97x92. So not only is it much different than the source, it's distorted.

(Firefox has a quick way to check this, by the way; right click on the image and select 'Properties'. The popup tells you, among other things, the original and scaled dimensions, and the alternate text.)

ETA: I just selected Boggs at random, and he's even worse: original is 152x151, scaled to 97x92.

[Anthem]

Used green and purple. How could I choose otherwise?

Rolfe.

If it's too much hassle, let me know which color you prefer, I can change it subsequently. It would be after work tomorrow evening though (Amsterdam time).

[Rolfe]

[snip]

Unfortunately, it's worse than that. The image I mentioned, for example - Alisa - is actually 143x143, scaled to 97x92. So not only is it much different than the source, it's distorted.

(Firefox has a quick way to check this, by the way; right click on the image and select 'Properties'. The popup tells you, among other things, the original and scaled dimensions, and the alternate text.)

ETA: I just selected Boggs at random, and he's even worse: original is 152x151, scaled to 97x92.


Yeah, I just realised that. It's coming back to me. I intended to make every image 92x92, but with an extra white stripe at the right-hand side making the actual dimensions 92x97, in order to get get a bit of free space between the image and the text. It was a fudge, but it seemed to be working at the time. If you look at the images for Lyta Alexander and Zack Allen, these were mine and that's how it was meant to be.

But I was stalled. I couldn't find a way to do the screen captures and acquire the vast majority of the images. Then Gary mailed me his pile of images, and they're all sort of random sizes, near the intended size but not there. That was one of the reasons they lay on my computer for eight years without being uploaded. It's only the 92x97 size in the coding that's keeping the images matching at all (including the placeholders, at the moment I'm afraid).

They're just going to have to stay the way they are for now, it's not as I'd like it or as I'd originally intended it, but it's a helluva lot better than nothing, and nothing was close to what we had before. I'm not leaving it another eight years without anything in these pages!

Sorry, fudge. In my defence, the rest of the site is better coded, if out-of-date. And I've seen a lot worse! But now it's get-the-material-up time.

ETA: OK, I've edited it so that my own images still have the original dimensions, but Gary's are all forced to 92x92. This gets rid of the distorsion, which was noticeable in some of the images, and lines up the right-hand sides of the images. It just leaves the text hard against the pictures in all of Gary's efforts. It'll have to do like that for now.

And before anyone mentions border tags, I only wanted the border on the right.

Rolfe.

[Rolfe]

If it's too much hassle, let me know which color you prefer, I can change it subsequently. It would be after work tomorrow evening though (Amsterdam time).


Well, the fudge is working acceptably for now, see pathetic explanation above why these image sizes are a bit of a moveable feast. I don't mind leaving it as it is at the moment. The green and purple look fine, and in context they're inevitable! I'll do the credits when I finish the bottom of the page - too late in GMT to finish tonight.

ETA: If you ever get the time (I haven't tried the graphics packages on this new computer yet), the colours are fine, I used the green and the purple. The intended dimensions are picture 92x92 pixels, but with an extra 5 pixels of white space on the right so that the entire image is 97x92. Which is the bit Gary never asked back in October 2000.

Rolfe.

[grmcdorman]

Yeah, I just realised that. It's coming back to me. I intended to make every image 92x92, but with an extra white stripe at the right-hand side making the actual dimensions 92x97, in order to get get a bit of free space between the image and the text.

[snip[

They're just going to have to stay the way they are for now, it's not as I'd like it or as I'd originally intended it, but it's a helluva lot better than nothing, and nothing was close to what we had before. I'm not leaving it another eight years without anything in these pages!

Sorry, fudge. In my defence, the rest of the site is better coded, if out-of-date. And I've seen a lot worse! But now it's get-the-material-up time,

Rolfe.It's pretty easy to batch-resize the images. IrfanView (free for non-commercial use) or ImageMagick (command-line only) both provide ways of batch resizing.

If you don't feel comfortable doing it, PM me and we can arrange for me to get the images; should take about 5 minutes to get them to a standard size once I have them. I can even generate an empty HTML template in the style of your page for all of them.

By the way, with CSS it's pretty easy to put a right-margin on HTML elements.

[ThatSoundAgain]

If you're still collecting images, do yourself a favour and take the time to save the original framegrabs or scans at high resolutions on your own machine. You never know when's the next time you run into layout adjustments or want to put bigger pictures in there.

[Rolfe]

It's pretty easy to batch-resize the images. IrfanView (free for non-commercial use) or ImageMagick (command-line only) both provide ways of batch resizing.

If you don't feel comfortable doing it, PM me and we can arrange for me to get the images; should take about 5 minutes to get them to a standard size once I have them. I can even generate an empty HTML template in the style of your page for all of them.

By the way, with CSS it's pretty easy to put a right-margin on HTML elements.


Yes, I was wondering about batch re-sizing last night. The more I play with this page, the more I realise why I went away and did something else for eight years rather than sort it out. I used to have IrfanView on my old computer, I think it was something I downloaded while I was trying to get these accursed screen captures to stay captured, but I never used it.

I was using PaintShopPro when I originally started, and I had a quick little routine for framing the bit of the image I wanted and saving it as 92x92 with the 5-pixel right margin. This was two computers ago. Even then, though, I think the prospect of doing it for what, maybe 250 or 300 images was a bit of a thought.

One of the reasons I'm hesitating and leaving the fudge is that the 92x92 size really looks a bit small now. I was actually using a 640x480 screen resolution when I designed the web site, with the idea that the pages would look good displayed full-screen at that resolution. I was also reasonably happy with the way they displayed in smaller windows at higher screen resolutions. But now, screen resolutions are all by default much higher than they were then, and I'm hankering for bigger. 130x130 might be a better compromise.

Maybe what I need to do is make that decision now, and do everything to 130x130 while I'm at it. Which does mean ditching the graphics I made myself at the start of it but I just counted and there are only 10 of these. I should have the original scans of these somewhere, or I've still got the hard copy I scanned. The other snag I suppose is that some of Gary's images aren't as big as 130x130 - two or three are only about 70x70. Still, it's only a few, so the loss in resolution isn't going to be that critical.

There are probably several I'd like to replace now I see how easy it's likely to be to do the screen captures for myself (I've got all the DVDs). That would of course include the ones that are only 70x70, especially the one of Sophie Ivanova - I'm sure her actual face must have been visible for a frame or two at least! But the more I think about it, the more I think I should do the present batch at 130x130 so that the page is half-decent while I concentrate on writing the text for a lot more of the entries.

So, [grovel, pretty please....], if it really is just a five-minute job for you, can we discuss the resizing of the entire boiling to 130x130? I'll need to sort out the correct images into one folder, but that won't take long. I can PM you when it's done, if that's OK with you.

About the right-hand margins. OK, I confess, cascading style sheets was the bit I decided not to read in that copy of "HTML4 For Dummies". (If it was even there - to be honest, I don't think it was, it might have been on the supplementary CD.) I managed without, though possibly some of what I did was a fudge. (It worked though.) Somehow, just creating every image with a white border on the relevant side seemed simpler. At the time.

How hard would it be to do a batch re-size, and then add say 10 pixels of white right-hand border to every one? (I don't think 5 pixels is really enough, looking at it now.) If this was an easily-automated job then that would probably be the easiest way of having a decent page up there in the shortest time.

I wouldn't need an html template, just the images with the same names as the present ones - then just replace the graphics folder, and hey presto. Unless there's another advantage I haven't grasped? (A lot of the code that's in there now is Gary's modification of my original code, but it seems basically OK - subject to validation.)

These "dramatis personae" pages were of course intended to allow readers of the Alternate Universe story to identify characters who appeared in it, whom they didn't recognise from the original. Some of the characters used are pretty damn obscure. However, it always occurred to me that if I made a decent job of it, it could be quite a good resource for use in connection with the original story too. The Lurkers' Guide (http://www.midwinter.com/lurk/toc.html) has some damn good stuff (for example (http://www.midwinter.com/lurk/universe/supporting-2.html)), but it only covers the main characters, and even the bare text listings of (allegedly) the entire cast are not complete for the bit-part walk-ons. OK, the show has been essentially out of production for 10 years, but better sero (sed serio) than never!

In other news, I always intended to provide downloadable word-processed files of the entire story in a printable format at some stage. Chalk that up as one more thing I never got round to. However, my 30-day trial of WordPerfect X4 is fully functional with a "publish as pdf" utility. Mmmmm, very tasty indeed. I think I might even pay to keep it.

Rolfe.

[geni]

In other news, I always intended to provide downloadable word-processed files of the entire story in a printable format at some stage. Chalk that up as one more thing I never got round to. However, my 30-day trial of WordPerfect X4 is fully functional with a "publish as pdf" utility. Mmmmm, very tasty indeed. I think I might even pay to keep it.

Rolfe.

OpenOffice.org is free and includes an export to PDF function.

[Rolfe]

Yes, that was mentioned before. However, the files are currently very nicely laid out in WordPerfect format, which took longer than ten minutes I can tell you. Having one button which translates all that exactly to pdf format in a few seconds is really rather nice. Quite apart from the fact that I was considering buying the WordPerfect upgrade anyway.

Rolfe.

[Anthem]

Maybe what I need to do is make that decision now, and do everything to 130x130 while I'm at it.


130px x 130px with an extra 10 pix. white border on the right, although grmcdorman might already be onto it.

[Rolfe]

Oh thanks! Those will be better. I'll need to make a folder of the images for these pages to get the batch job done easily though.

I think some characters might have been omitted, but I also think Gary has put in people who never appeared in the Mirror Universe (I'm virtually sure Mariah Cirrus never showed up for a start). Anyway, if I remember a character who isn't there, I can easily add text and use the purple placeholder until I get an image.

(I don't suppose you could make the text on the pics a bit bigger? It doesn't have to fit in the face..... not that I'm ungrateful, they're great the way they are....)

I just put that page through the w3c validator and it's a mess. Gary has put in invalid code, for a start he hasn't closed any of the <name> tags he added. Hmmm, maybe I better bite the bullet and fix that first.

Rolfe the exceedingly grateful.

[Anthem]

(I don't suppose you could make the text on the pics a bit bigger? It doesn't have to fit in the face..... not that I'm ungrateful, they're great the way they are....)

No problem, fontsize went from around 14pt to 20pt, if any bigger let me know.

[Rolfe]

Wunderbar!

I should leard how to do that! But I just spent a while making all my pages validate at w3c, so I haven't been wasting my time.

Thanks a million!

Rolfe.

[Wudang]

Any good?

[Rolfe]

Oh yes! I don't know why she got missed. Taro Isogi is in there. (I'm sure there are others - Sebastian for a start - but I can add to it gradually.)

I think it's coming on quite well really, and Gary has caught some obscure stuff I'd have missed for certain (he's even found a screen-shot of Marie Crane for goodness sake, and named the person cast - one of the show's producers, never credited anywhere I can see). And he's found stuff that floored me - Gareth was obviously mining other fanfic (or doing a homage to a couple of his mates) for some of the minor characters.

I've managed to make all the pages validate at w3c again, except for the four others Gary messed with, which I'll do tonight. It's nothing much, he's just not closed any of the "name" tags he put in, and the odd stray tag has crept in when I amalgamated pages. (Oops, I see I've inadvertently re-loaded the original skeletal pages there, I'll have to change that back.)

I's getting respectable enough that it's probably time to take down the original site and figure out how to set a permanant redirect.

Rolfe.

[Wudang]

Deuce.

[Rolfe]

Hey, you're a marvel. I don't imagine Deuce ever appeared anywhere well-lit!

Are you doing that from NTSC discs? Does it make any difference if they're PAL (as mine are)? Does the computer care?

Rolfe.

[Wudang]

No they're PAL discs. I'm having trouble with the Walkers getting a good clear frame. I'll maybe try Voices of Authority or Into the Fire.

[Wudang]

Netter - he only seems to be shown on a screen and the image quality isnt great.

[Rolfe]

These are a lot better than some of Gary's - though Gary did do so many I'm eternally grateful to him. Some characters only appeared on monitor displays. That Netter view is actually one of the better results.

Rolfe.

[Wudang]

I used Irfanview's built in "auto adjust colours" and "sharpen". About as far as my image skills go.

[grmcdorman]

Rolfe, when you get all your graphics send me a PM and I'll resize them for you. (Sent you a PM yesterday; did you get it?)

[Rolfe]

Sorry, I hadn't seen it. PM in the post.

Rolfe.

[Wudang]

Wsan't happy with Deuce (well who is?) so tweaked a bit.

[Rolfe]

Oh, I can't believe it. I just tried to "Go Advanced" to tweak some fonts, and my entire post has been swallowed by the database error! Here goes again.

That image is much better, I'll replace it tonight. Thank you.

I've forced the image size to 120x120 now, which I think is about right. 130 is probably a bit big for the purpose, it's just that my own computer has a very high screen resolution on a rather small screen so things tend to look even smaller than they are. What do you think about the size yourself? The images I originally scanned as 92x92 are looking a bit pixillated, and I don't seem to have saved larger scans, but I can always redo them later.

The style tag grmcdorman sent me has worked like a charm to move the text away from the edge of the images. I didn't find that one when I was looking for an easy way to do this originally - that "for Dummies" book can't have been all that comprehensive.

A thought which may open another can of worms.... There were a couple of things I always wanted to do to the main text pages and never accomplished. Hmmmm....

I see the Lurkers' Guide (http://www.midwinter.com/lurk/universe/supporting-2.html) uses some quite neat markup to handle what is essentially the same objective.

]<dl>[/FONT]
<dt>
<img width=80 height=100
align="middle" src="/lurk/gif/chars/vir.gif">
Vir Cotto
-
<a href="/lurk/making/cast.html#furst">Stephen Furst</a>
<dd>
Centauri assistant to Londo. Generally timid and unsure of himself, Vir occasionally works up the nerve to confront Londo about the dangerous path he's following by dealing with Morden.
<p>
<dt>
<img width=80 height=100
align="middle" src="/lurk/gif/chars/natoth-2.gif"> ....

.... and so on. It certainly saves all these table codes. But the rendering uses a lot more space for the same information, and I've always been concerned that people might want to print the pages for information when they're complete (well, maybe they would have done in 2001!). It's OK for the LG, who haven't put more than about a dozen characters on a page because they only cover the main ones, but I've got about 100 on that "Humans" page, with a few more to come. What do you think?

I've found some decent image edting software on my new computer - I haven't seen that old PantShopPro that I used originally for over five years. But the software that came with my digital camera does a nice cropping and resizing job. I'd hate to have to do all 200 images that are there at the moment, so thank goodness for grmcdorman's offer to organise a batch job for these. But at least I now know I can handle the odd ones myself.

I'm deeply grateful guys, all of you.

Rolfe.

[Wudang]

I'm a big fan of 2 books - Zeldman's "Designing with web standards" and "Eric Meyer on CSS". What you can do is apply a "print style" to a page so that it displayes one way but prints another. You define something like a "name" style for a characters name then the online style sheet applies a certain font, alignment etc and the print style for "name" applies different rules. The second book above does a nice job of leading you through the process of tarting up a website.
Excuse the prose - typing madly while waiting for a process to finish

[grmcdorman]

I'll experiment with some alternative HTML on the weekend. In particular, floats might help (that's sort of like an image in a word-processor with text wrapped around it).

[Wudang]

Quick hack of something I had on disc see if it helps.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">
<html lang="en-GB"><head profile="http://purl.org/metadata/dublin_core">


<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
div
{
float:left;
width:320px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
</style>
</head>

<body>


<title>Dramatis Personae, Humans</title>
<p></p><h2 align="center"><i>Humans</i></h2>
<div>
<br />Abby<br />
<img src="humans_files/noimage2.png" width="95" height="84" />
<p>Who knows</p>

<p>Talia Winters' childhood mentor, who welcomed her when she first joined Psi Corps at the age of five, as recounted by Talia in <A href="http://www.midwinter.com/lurk/guide/028.html"><I>Spider in the Web</I></A>.</p>
</div>
<p></p>

<br>
<div>
<br />Alexander, Lyta<br />
<img src="humans_files/lyta.jpg" width="95" height="84" />
<p>Played by Patricia Tallman.</p>
<p>Major Character.&nbsp; Commercial telepath seconded to Babylon Five when it was first commissioned.&nbsp; She left the station after <a href="http://www.midwinter.com/lurk/guide/000.html"><i>The Gathering</i></a>, and did not reappear until the second season episode <a href="http://www.midwinter.com/lurk/guide/041.html"><i>Divided Loyalties</i></a>.</td>
</div>
</body></html>

[Rolfe]

Hey, Deuce looks better, doesn't he!

I had a look at that code of yours, but I don't think it's right for this job. Best to have the alphabetical listing in a vertical column I think. Good for a different job though.

I can see the fascination in web layout, but I also don't want to get too far into it. First, because my main aim is to get the material up there and fiddling with the code is time-consuming, but second because I don't actually have the design flair to know what would look good. If I had a vision, I'd pursue it. Vision not there though. Especially if it means taking weeks to learn about css!

The only time I had any vision of what I wanted was the front page (http://www.b5-dark-mirror.co.uk/index.html) (the first screen I mean, the rest is a muddle). I decided I wanted that before I even bought the html book, and I had no idea how to achieve it. 24 hours after buying the book, the basic code was there. I don't care if it's not hip, I like it. Never had another interesting idea, ever.

I think these pages are going as well as can be expected for the moment. They'll probably look better when each character has a few lines of text as well.

I found a few image files in Gary's folder of characters he hadn't put in any code for, so I should do these as well. And I need to sort out the two pages that haven't been tidied or validated yet. And I think there are charactes there that never appeared in the Mirror Universe, so once I verify that, I'll take them out.

While I was looking for the original scans of some of this stuff, I found a couple of more or less blank files called M&P.jpg. I remember now that these were my abortive efforts at capturing Marrain and Parlonn from the DVD. These are the two warriors who greet Valen when he arrives in the past, and who aren't even named in the show. (I asked Gareth which was which, and he said he didn't care, so I decreed that Marrain was on the right.) I was keen to get them, because these two are pretty major in the Mirror Universe - there's a whole story (http://www.b5-dark-mirror.co.uk/v5p2c1.html) developing the politics of that time, and taking the reader into that scene where they meet Valen, but from the Minbari point of view. I tried to get a screen capture of them both, but I ran into this problem with the "overlay" and never succeeded. I see Gary hasn't got them either.

OK, on to some Narns.

Rolfe.

[Rolfe]

Talking of images, I found these in a folder. Sometimes, I am one sick puppy.

http://www.vetpath.co.uk/jref/aolcost.jpg

http://www.vetpath.co.uk/jref/spacers.jpg

http://www.vetpath.co.uk/jref/d-cost.jpg

Rolfe.

[Soapy Sam]

Scary.
Very, very scary.

[Rolfe]

What are you doing in this thread anyway...? :p

I'll set Caramel on you. :c1:

Rolfe.

[grmcdorman]

OK, I played a bit with the HTML and I think I have a fairly clean CSS layout that gives you the appearance you want.

For the played by section, I've changed it from centered to indented 20em (about 20 characters); you can change it back to centered by uncommenting the text-align line and removing the margin-right in the playedBy style.

In the HEAD section of the page:
<style type="text/css">
.castPictureAndCaption
{
float: left;
margin-right: 15px;
margin-left: 5px;
margin-bottom: 15px;
font-weight: bold;
clear: both;
text-align: center;
}
.castPictureAndCaption IMG
{
border: 3px outset green;
display: block;
}
.playedBy
{
margin-left: 20em;
/*text-align: center;*/
font-style: italic;
display: block;
clear: right;
}
.description
{
clear: right;
margin-bottom: 15px;
}
.entry
{
clear: both;
}
</style>

and the characters will look like this:<div class="entry">
<span class="castPictureAndCaption">
Alexander, Lyta
<img src="lyta.jpg" title="Lyta Alexander" alt="Lyta Alexander">
</span>
<span class="playedBy">
played by Patricia Tallman
</span>
Major Character. Commercial telepath seconded to Babylon Five when it was first commissioned. She left the station after The Gathering, and did not reappear until the second season episode Divided Loyalties.
</div>

<div class="entry">
<span class="castPictureAndCaption">
Allan, Zack
<img src="zack.jpg" title="Zack Allan" alt="Zack Allan">
</span>
<span class="playedBy">
played by Jeff Conaway
</span>
Major character. Security guard on Babylon Five, first seen in Spider in the Web. He eventually rose to the position of Security Chief.
</div>
A tiny bit simpler than the current table, and looks pretty much identical. Plus, the CSS allows extra fancy stuff pretty easily (e.g. background images, frames - want a frame around each entry? add it to the .entries section).

However, given that you already have a page set up it may not be worth the effort to convert.

[Rolfe]

Useful to have it, though. I'm deeply grateful for all your help, and this is something I can play with later. One dayl I really need to get to grips with CSS, and that looks like a very good way in.

Rolfe.

[grmcdorman]

Indeed. One the very nice things about CSS is that you set up the classes based on meaning (character image and caption) instead of content (left-justified image with title). Then, later, if you want to change the appearance, you can just adjust the CSS - the body text doesn't get touched.

Even better, since the CSS can be in a separate file (<link rel="stylesheet" type="text/css" href="file.css" />), you can have the same thing for multiple pages - and they all get automagically changed when you edit the CSS file.

It's really very powerful, even ignoring the fact that there are HTML effects that can't be achieved without CSS.

[Rolfe]

Hmmmm. You're tempting me to mention what I wanted to achieve with the text pages, but never managed. One was simply to use open-and-close quote marks, which caused the validator to blow a gasket 10 years ago. So far as I could tell, there were no kosher codes that allowed these. Is that still the same?

The other was tab indenting of paragraphs. If you look at any of the story pages, you'll see that it looks as if I achieved that. I did, but by using a string of "&nbsp; &nbsp; &nbsp; " to do the indent. The downside of that was that it meant I couldn't justify the (right) margin, because the minute I put in the justify tag, the tab indents all became different lengths, obviously.

I may never change it, because doing the open-and-close quotes would require re-formatting all the pages from the word-processed source, and 170 pages is a bit daunting. The other thing is, I'm just about to post .pdf files of the word-processed text, and that has all that formatting and more. I'd quite like to know if either of these things is possible in html now though.

Rolfe.

[grmcdorman]

Open and close quote marks? You mean something like left-quote and right-quote? Those aren't basic ASCII characters; unless you really need them I'd avoid them.

"Tab indenting" I presume, means first line indent. Yes, you can do that with CSS: the property is text-indent. Try text-indent: 3em; and if you want a smooth right margin, add text-align: justify; - these don't apply to all elements, though; best choice is to use a P or DIV (i.e. block) element.

To see these and others in action, here's some sample code:<html>
<head>
<style type="text/css">
.castPictureAndCaption
{
float: left;
margin-right: 15px;
margin-left: 5px;
margin-bottom: 15px;
font-weight: bold;
clear: both;
text-align: center;
}
.castPictureAndCaption IMG
{
border: 3px outset green;
display: block;
}
.playedBy
{
margin-left: 20em;
/*text-align: center;*/
font-style: italic;
display: block;
clear: right;
}
.description
{
clear: right;
margin-bottom: 15px;
}
.descriptionText
{
text-align: justify;
text-indent: 1cm;
display: block;
}
.entry
{
clear: both;
display: block;
border-top: 4px double green;
}
</style>
<body>
<div class="entry">
<span class="castPictureAndCaption">
Alexander, Lyta
<img src="lyta.jpg" title="Lyta Alexander" alt="Lyta Alexander">
</span>
<span class="playedBy">
played by Patricia Tallman
</span>
<div class="descriptionText">Major Character. Commercial telepath seconded to Babylon Five when it was first commissioned. She left the station after The Gathering, and did not reappear until the second season episode Divided Loyalties.
</div>
</span>
</div>

<div class="entry">
<span class="castPictureAndCaption">
Allan, Zack
<img src="zack.jpg" title="Zack Allan" alt="Zack Allan">
</span>
<span class="playedBy">
played by Jeff Conaway
</span>
<div class="descriptionText">Major character. Security guard on Babylon Five, first seen in Spider in the Web. He eventually rose to the position of Security Chief.
</div>
</div>
</body>
</html>

ETA: The HTML code for left single quote is &lsquo;; right is &rsquo;, and double quotes similar: &ldquo; and &rdquo; - see http://htmlhelp.com/reference/html40/entities/special.html. However, as I mentioned I would avoid them, as they are HTML 4.0 (i.e. new) and not, as far as I know, standard Latin-1 (ISO8859-1) characters.

Incidentally, try adding this in the CSS: .descriptionText:first-letter
{
color: red;
font-size: xx-large;
} (or some other rule). Result is a nice drop cap.

ETA 2: There is a CSS style, quotes, but it requires you to use the HTML tag <q> .. </q> for the quotes. Not much better than putting in &ldquo; and &rdquo; everywhere, especially if the opening and closing quotes are all the same right now.

[Rolfe]

Oh, that's handy!

ETA: The HTML code for left single quote is &lsquo;; right is &rsquo;, and double quotes similar: &ldquo; and &rdquo; - see http://htmlhelp.com/reference/html40...s/special.html (http://htmlhelp.com/reference/html40/entities/special.html). However, as I mentioned I would avoid them, as they are HTML 4.0 (i.e. new) and not, as far as I know, standard Latin-1 (ISO8859-1) characters.


Yes, I saw these codes and tried them when I first wrote the pages, but they didn't render on the browser I was using at the time (some flavour of IE3 I think), so I abandoned the idea. The irony is that if you simply paste in quote characters generated by any word processor, they seemed to display perfectly in any browser I tried (OK, that would be IE and Netscape at the time). Lots of people were actually doing this in 1999. But that comes up as invalid html, so I wasn't going to do it. I got a bit of stick for that at the time, and indeed I got an email just two weeks ago also giving me stick for it. But what can you do?

It's always surprised me that this isn't supported as part of basic html, but there you go. I might try updating the chartset to include these codes if I ever re-code the pages. Surely 10 years on, browsers will render them OK? It would be an impossible task to modify the pages as they are, because the html conversion macro I wrote deliberately stripped out the distinction between left and right quotes. However, they're all still there in the master WordPerfect files, so a new macro to re-code the pages is possible.

I like the idea of the drop caps as well. The WordPerfect files have nice drop caps, but the best I could manage on the html pages was to put the initial letters of each chapter in a bigger font size.

It's hard for me to follow the sample CSS for the paragraph indents, because the pages with the cast pictures aren't the pages with that layout. I was talking about the 146 pages of actual story chapter, like this one (http://www.b5-dark-mirror.co.uk/v1p1c1.html). I'll have a fiddle with it though.

The thing is, I hope to re-code the text (story) pages at some point for another reason. After they were posted, another editing pass was begun, to try to eliminate as much of possible of the repeated story recaps Gareth (the author) was in the habit of putting in at the beginning of every bloody chapter. He did this because the stories originally went out on an email list, and he wanted to give people who were new to the list some chance of figuring out what was going on.

It was probably unnecessary all along, because the email list archives were posted on the internet not long after each circulation. Once we had the web site up, I insisted that the url was at the top of every chapter that went to the list, so it was doubly pointless. After a while I finally got it through to him, and besides, latterly there was just too much story to summarise. But up to mid volume 3, the recaps were always there. Quite a number of readers said they annoyed the hell out of them.

However, it wasn't as simple as just deleting those sections. Oh no. Most of them took the form of a character running over previous events in his mind, and quite often new insights into the character and/or the events were presented. So it became quite a detailed editing job. Looking back at it last night I think I managed to do volume 1 (which is now four pages shorter than it was), but got bogged down somewhere in volume 2. I think if I can crack that, I'll be nearly there, because the later chapters aren't written like that anyway.

I just realised last night that I have No. Bloody. Idea. where the printed copies of these stories are. The drawer where they used to live is empty, and I now realise I haven't seen them since I moved house. How can you lose 4 or 5 kilos of paper? I'm aware of a handful of other books that seem to have vanished in the move, and I think there must be a box lurking somewhere, with the garage really the only place left. Hard to get on with the editing without the original hard copies to refer to. Oh well.

Anyway, my point is that once that exercise is completed, it makes sense to re-code the pages and replace them with the final edited version. I reckon that working from a template, it takes me about 10 minutes to convert a chapter to html (yes, I know, hand-knitting, but I swear it's therapeutic). It's actually quite easy to do from WordPerfect, because WP itself workes on the same logic as html, so most of it is just a macro to change [ital] to <I> and so on. So, if I keep at it I could maybe do it in a couple of weeks. If I can work out a new template at that stage that does what you've outlined, then that makes it doubly worth while.

This may seem pretty pointless. It's only fan fiction after all. But it's by far the best fan fiction I've ever read, and it's a damn shame it can never be published. I just get some satisfaction out of smartening it up as much as possible and putting it where people can see it.

Rolfe.

[ThatSoundAgain]

It should be possible to do a search pattern that alternates between replacing the single quotes with right and left ones. If you're going to edit the pages anyway, you could run each one through that search first, and check that it's in sync while you're looking at it anyway.

This may require a regexp tool, like grep. I know some text editors have that built in, maybe WP does.

[Rolfe]

It's not quite as simple as that, because it's not just the quote marks (which are double, so that does help differentiate), but also all the apostrophes. Most apostrophes are "right single quote" marks, but not all, sometimes there are actual single quotes used for one reason or another. Also, in a number of cases, speeches go on for more than one paragraph. In that case, the quote marks are opened again at the beginning of each paragraph, without being closed first.

This makes for a lot of checking. Not so bad for a short story, but for something that's well over a million words long - well, frankly it's easier to re-code the master files, that already have the quote marks and apostrophes the right way round to start with.

The main problem has always been the thing that grmcdorman pointed out, that the &ldquo; and &rdquo; etc. codes are not part of the standard chartset. That's the thing that really needs to be looked into before I try anything along these lines.

Rolfe.

[grmcdorman]

The reason left/right quotes aren't - or weren't - supported in HTML is that they do not exist in the ASCII or ISO Latin-1 (that is, 8-bit) character sets.

When you copy & paste these characters from the Wordperfect document, you may be actually pasting Unicode characters in the form &#hex-value;

With Unicode, which is a 16-bit character set, there are more characters available. None the less, to ensure maximum compatibility you should restrict yourself to ISO-8859-1; the special characters are listed at http://www.w3schools.com/tags/ref_entities.asp and Unicode character sets can be found at http://www.unicode.org/charts/

With respect to the indent and other styles, do this:
<style type="text/css">
.firstTextParagraph, .textParagraph {
text-align: justify;
margin: 0;
text-indent: 0;
}
.textParagraph {
text-indent: 3em;
}
.firstTextParagraph:first-letter {
font-size: 200%;
line-height: 50%;
}
.storyBody
{
margin: 3em; /* 3em on all sides */
}
The paragraphLead style makes the characters double-height, but reduces the line spacing by 50% so the line, overall, doesn't change in height. (This will break, of course, if your first character has a descender).

The extra style, storyBody, is because IE has an issue with the first-letter selector: it likes to indent it, unless the entire block has no margin. Note that the browsers automatically extend the style if the first character is punctuation (as is the case in the sample below).

So, the body looks like:<div class="storyBody">
<p class="firstTextParagraph">"THE Minbari cruiser's closing, Captain." The commander's voice was tense. He looked up into the face of his captain, hoping to see the sort of miracle he had witnessed before. Instead, the captain's eyes were blank and distant. Almost dead. "Captain?"</p>
<p class="textParagraph">Captain John Sheridan suddenly came to life. "Lay out dispersion fire. Make them back off. A little." They couldn't target the Minbari ship directly of course, but there were other ways. There were always other ways.
</p><p class="textParagraph">
"Yes, Sir." The commander began manipulating the controls with easy skill. He had always been a talented gunner and, despite his youth, he was one of the most experienced artillerymen the EAS Babylon had. After the captain, of course.
</p><p class="textParagraph">
The dispersion fire had only limited effectiveness of course. Not being able to target the Minbari made their task that much more difficult, but none of them was willing to give up simply because their enemy was better equipped, better armed and in better condition than they were. As the captain had put it, 'They fall down too. It just hurts them more.'
</p>
</div>


ETA: I would put the above CSS in a separate file and use the <link rel="stylesheet" type="text/css" href="file.css" /> code, since you have multiple pages that will share the same style.

[Rolfe]

How can you lose 4 or 5 kilos of paper?


I just checked (I have a note of the actual weights). 6.1 kg of printout, in six volumes. The removal company says it's not aware of anything having been left behind. Well, everything gotta be somewhere!

Rolfe.