Tuesday 14 July 2015

ADDING HTML TO YOUR MULTI-VOICE WEBSITE


To write multi-voice poetry for your website you have to –in my opinion – write it in html. It has been almost impossible for me to get the words in a complicated multi-voice poem to fit where I want it to without using html to put everything exactly where I want it.


Having said the above I have yet to read a book on html which deals with putting complicated text onto a hosted site (like WordPress or Blogger). I am a beginner at html but I do know that html does not in practise always do what you think it is going to do. Browsers, limited screen size, and the theme of your site may change what html wants to say. I have read 20 books on html, CSS, and on building websites but I am genuinely a total beginner. Web books seem to either spend all their time taking you on a tour of pretty website themes. Or they go in the other direction and talk about writing up your own websites from scratch. There is none I have read that I can recommend.

When you cut and paste your code your site does not see white space or page breaks or tabs. That is why you have to mark everything with tags in html.

To get your html seen by people. You have to firstly write it in your editor. Notepad is free and comes in two different versions. I use Microsoft Expression Web 4 which you pay for but it is excellent. Whatever editor you pick (and there are a few) you need to stick to it to get to know it. You secondly have to get your html to work on your website. Thirdly you have to have it translated (I think that is a fair word to use) by a browser. Then lastly it gets displayed on a screen (which could be any size).

The Infiword WordPress theme is free and is said to be html friendly.  It is produced by the Zurb Foundation. It also does a wide screen format. I have asked Infiword for more information re its suitability for multi-voice poetry.

I quite often tour sites looking for a theme with a wide screen. I am still looking for a free WordPress.com one that can take CSS in a poetry post without causing conflicts.

I have also tried putting html only (no CSS) poetry onto my WordPress site but even then it does not always work. I have spent an awful lot of time looking at different themes and at suggestions for different themes. None of which have worked for me. I have looked at WordPress forums and help websites but none deal with what I am trying to do i.e. put lots of html coded columns into a post (or if they do, I have tried them and they don’t work).

To try and get up to six columns of text on a page you usually need width.  So, find a theme that allows you full width of the screen.

Luckily monitors are wider than they are taller. This helps. They are landscape mode. When I write most multi-voice poems I have the page set to landscape mode instead of portrait mode. I write my first version in Microsoft Word. But if I am pasting into an editor for eventually posting on my site I then Save As, Rich Text Format. Websites accept this format better than most others.

When using your website theme make sure you set preferences to make your site as wide as possible whilst still ensuring that it will be seen on different size monitors. I just presume that I cannot write material that will show on a small screen.

On your theme make sure you don’t have borders taking up space.

On your site, make sure you have set your margins to left and right as near to the edge as you can. All these things need to be tried out on other monitors than yours- if you get the chance.

What works in one browser make not work on another.  What fits on one screen won’t necessarily fit on another. Some editors allow you to preview what different browsers see (e.g. Microsoft Expression Web 4).

I have worked for many years with the – I think –best multi-voice group in the World. But no publisher has been interested in commissioning me to write a book about the subject. I believe that multi-voice is a new and important form of poetry.

I have always said that Multi-voice looks good on the page as well as on the stage. It is only now that quite a few new poetry magazines are starting to use my multi-voice. I think it does also look good as something visual. In the past an artist was meant to turn my multi-voice poems into paintings for a Refugee event. Unfortunately it never happened as the organiser became sick. I think that - surely -  people looking at multi-voice for the first time in the website will find it visually appealing (as well as having all the usual poetic attributes).

I had been trying to put all my text in xx small but as the expert in a previous post on my site commented, that is not always the best way. However, it does have to be smaller than usual to fit so many columns onto a page. This can be hard for those with bad eyesight to see but there is no way round this that I can think of. Many themed sites have a default of large text.

When you are posting material that you have written on Notepad or Microsoft Expression Web 4 or whatever, then you may experience the text overflowing in one of the columns. This is usually because you need to resize the columns. If you have numerous columns then in total you need to be using a bit less than 100% of the width of the page. Often I spend a lot of time changing the width of columns to fit.

It may be that you simply have too many words per line in a column. Then you have to go back and change it to fit i.e. have shorter lines.

I also have to add hundreds of break tabs to get verses of spoken text to fit each other (vertically aligned) on the page.

Sometimes I have had to fit additional text for comments at the end of the page into a table. This has been because the text wanted to join up with one of the columns. This was even though the html coding was ok. I presume there was some conflict in the browser or in the WordPress theme. A WordPress expert did try but was unable to solve this mystery for me.

When I put CSS (the language that adds additional effects and styling to html) onto a WordPress.com post in my website it does not like it. I will try finding a theme that does accept it. I will also try writing with no CSS (tried it and it didn’t work).

WordPress so far has been great for everything but some complicated multi-voice. As I understand it, WordPress themes have their own set of CSS to set the theme up. The addition of your CSS may cause (often has caused for me) conflicts where text does not fit and code gets shown on the page.

Blogger has coped with every bit of html and CSS I have posted. I use the simplest theme possible and don’t know if that makes a difference. I don’t know if a complicated theme would come with its own CSS settings that would cause conflict.

Blogger and WordPress.com are both free and both are hosted (so I don’t need to set up my own server etc.) so that is why I use these for my multi-voice sites.

Tumblr is also free and is hosted but I have not yet been able to try it out properly.

On WordPress the visual Editor is ok for prose but I need to use the text editor (the html editor) to put in complicated poetry. I have toured lots of different Forums. I have visited hosts of FAQ (Frequently Asked Questions) sites but am still unsure about many of the most basic steps in adding complicated text to a site.

WHAT I DO IN PRACTISE. I have a copy of the text of the poem printed out in front of me. I then go into my files and paste into my web editor the framework for a 2, or a 3, or a 4, or a 5, or a 6 part poem.  Then below that I copy and paste the (rich text format) text for my poem. I then work from the first column to the last column on the right putting text in the right place and checking that lines in columns that should be at the same height as lines in another column are at the exact same height. My web Editor has a Design mode to check how the poem looks when the code is applied. I also once in a while check preview browser to see how it looks in my browsers (e.g. Internet Explorer 9).

Half of my time is spent on fitting in the text. The other half is adding line Breaks in html. These take the text onto the next line. Remember there is no white space in html. Sometimes I have to use ten line breaks at a time and I just cut and paste these ten at a time.

I then check all column widths are at the optimum and occasionally add in a 5% width at one column and take it off another column. Making sure it all adds up to just under 100%.

When I cut and paste the code into the html view of my website then I can see if it works or not.

Some code is seen as being out of date by different browsers and different editors. The standards are changing as to what is acceptable in html. So a lot of the code I write comes up as out of date on a web editor (when using a compatibility checker) but it will work on my site. Likewise, when you test your code in an editor you can see lots of failures but usually they are just out of date code that at the moment still works ok on websites.  There are different error messages for major faults like not using closing tags when needed (e.g. to stop a style that you have been using). Editors will check both for code errors and for html incompatibility. There is a validation site you can go to and discover the dozens of errors you have made: that are usually just code being out of date, “hopefully”. So I won’t give you that site in case you worry too much.

This sounds long and involved and sometimes just does not seem to work but when it does work there is some kind of a “Wow!” feeling. Please try and post a multi-voice poem on your own website. Start with a two column poem that you have written. And cut and paste the html code for two column multi-voice that is on my website: code for two to six columns has already been shown on my WordPress site. Below I reproduce the two column code. I hope you get the same “Wow!” feeling as me.

 


WEB 4.

THIS is from a previous post on my site. It relates to me trying again to get code to work on my multi-voice sites. I then posted my query on a Web 4 Forum

 

I use Microsoft Expression Web 4 (2010). I write multi-voice poetry which requires me to write text in up to six columns.

I write multi-voice poetry at home and after work place it into Web 4. I am a total beginner in html. I believe that web 4 uses xhtml. I have had poems work on Design mode and in preview browser mode. But then not work when placed onto a website. Sometimes the columns over run and sometimes the initial coding is left on display. Should I be using html5?

I contacted WordPress Forum and they could not help with this particular problem. I presume that when the html is placed into their text editor that it gets altered in some way. That is more or less what they told me.

So I have been using Blogger to place my multi-voice poems. I have eventually managed to get all of them working apart from the multi-voice poem I am working on now- called Roadblock.

Using similar coding-to what worked before- I get coding showing at the top of my intended web page. I also get run on from the first column putting text out of place. In web 4 the text does not seem to be too long in each line.

I have all settings on Web 4 on default. i.e. 10 left and 10 right for margins.

In Blogger I use a website with no border (to cut down on the width I need). Also, I have it near maximum width in settings.

I alter text to xx small to allow me to get in as many columns as I can.

I write poetry for the most well know multi-voice group in the World, Chromatic Voices 2.

I have tried the help user guide in web 4 but it seems to be mainly reference for those already expert in html and CSS.

If you can give me any help to enable me to get my Web 4 poems working on Blogger then I would of course credit you in my website. My website is half poetry and half help for those wanting to write multi-voice poetry for the web (there is no other site does this). I have nearly given up on placing complicated poetry onto WordPress but I still want to use Blogger.

There are a couple of poetry sites that deal with poetry and the web. They do not deal specifically with multi-voice but I sometimes keep them updated.

 

I have a multi-voice website. Web address is:


And at:


 

 

 

THE REPLY TO MY POST (Their fix worked for my poem Roadblock: which I posted to  Blogger)

 

I enclose the Reply to my query on Microsoft Expression Web 4 Online Forum 7/7/2015. Many thanks to their expert KathyW2. (The multi-voice poem had shown great on Web 4 but changed when posted to my site)-

The font-size of your text on the page you linked is 100%. It is not determined by anything you did, it's part of the theme styling. And, since you have a block of style code displaying at the top of the page, clearly you can't simply paste an in-page style block into your post.

Your blog theme styles are not in Expression Web, so you cannot assume that what you do in EW will translate to your blog. You would need to learn how to add additional styles to your blog, or (better) use the ones it already has.

Font-size xxsmall is not something that is consistent across browsers, and is too small to read. If WordPress had really shown your text in that size, it would not have been very useful. Font sizes should be in ems or %. But in your case, you should leave them alone and let the blog theme styling do its job. The number of columns you get is not determined by the font size, but by the number of floated divs you have, and that they have widths that add up to less than 100%.

Look at the page in IE, in FireFox, and in Chrome. You'll see some differences. For Firefox and Chrome, you have a table that doesn't clear the preceding floats and sits up where your columns are. I can't tell you what causes that difference - again, you are subject to the styles in your blog theme - but you could try adding an explicit style="clear:both" to the table element.

1 comment:

  1. Wonderful post dear, I love to read this post. Thank you so much.
    Freya, UK
    poetrythemes.com

    ReplyDelete