Windows Live Writer – Almost Good Enough

Our intrepid editor maintains Chaos Manor and this site. Dr. Jerry Pournelle mainly writes for Chaos Manor. And he uses Microsoft Live Writer to do that. A new install of that resulted in a problem with entering the title of a post. And that resulted in a call to the Chaos Manor Advisors for help. Which, in turn, resulted in an interesting (well, to the editor, since he did it) troubleshooting process to figure out why.

Windows Live Writer main function is an easy way to write blog entries, and easily publish them to your blog site. It is a stripped-down version of Word, with basic HTML page editing functions. Once you set it up for your blog, you can write something, insert pictures, format text, add links, spell check, and the other usual things. Then there is a one-button ‘publish’ to your blogging site. The advantage to using it is that it is easy for anyone to easily write and publish blog entries.

Microsoft Word has some blog publishing capabilities also. So you could write a blog post in Word, then use the File, Save and Send to publish. One advantage to Live Writer over using Word is that you can see what your post will look like on your blogging site. The Live Writer editor screen will show your post with all of your blogs styling/look.

Sort of.

Windows Live Writer

Windows Live Writer (LW) is like a  step-child of Microsoft. It’s not very well maintained. It doesn’t work well as a full  WYSIWYG editor. Not to mention that if you want to install it, the proper download location (from Microsoft – you don’t want to get it from  non-Microsoft site) is not easy to find.

We use LW to initially create draft posts on this site, and other WordPress sites we have. We paste potential articles from Word (or email) into LW. Then we do the final editing within the WordPress editing screen.

Dr. Pournelle uses it for his posts to the Chaos Manor site. The process works fairly well for us and him. The LW editing screen is clean, with a ribbon bar to do basic formatting. Pictures pasted into LW will get uploaded to the site. The editing screen looks close enough to the final posted page on the web site.

Over in Chaos Manor, Dr. Pournelle has several computers that he uses to write his posts. He’s been rearranging his work areas lately, so he needed to get LW installed on a new system. That was the first problem.

Eric Pobirs, one of the Chaos Manor Advisors, helped get LW installed on the system at Chaos Manor. Dr. Pournelle was having difficulties getting the install process to complete. Eric said:

Essentially, it came down to downloading the correct file to start the install. For reasons that defy my understanding, Microsoft has never done a good job on how they manage the Live suite of apps. My impression is they regarded it more as something for OEMs to bundle with new PCs, like the MS Works suite of yore, and didn’t put the proper effort into presenting it to individuals downloading the product.

There were three major generations, 2009, 2011, and 2012. The earliest does not like post-XP versions of Windows. The middle version was intended for Vista, and the last version for 7 and 8.x. It was odd for a Microsoft program to display such compatibility issues but there it is. The 2011 version never gave me problems on Windows 7 but the only portion I used extensively is the Mail app, which has a long history as Outlook Express.

http://windows.microsoft.com/en-us/windows-live/download-windows-essentials#wetabs=we2012

Microsoft pulled the earlier versions from download availability but they are still offered on numerous sites that are likely to show up in search. They’re hard to distinguish because they always have the same wlsetup.exe file name, rather than carrying some clue to their version up front. Some people are still obsessively attached to the 8.3 file naming convention.

So, I made sure I was downloading the 2012 version and it simply worked. Notably, it showed a different icon than the one downloaded to Swan previously. The .NET 3.5 runtime must have been installed on Swan at some point because it didn’t ask for it as it did on my Windows 10 test machine a few days earlier.

So Eric was successful in getting LW installed on the “Swan” system, making it available to Dr. Pournelle on that system, after he set up the Blog Account in LW for the Chaos Manor site.


The LW Editing Screen

A bit about that. You can have multiple Blog Accounts set up in LW. Each account will ‘connect’ to the appropriate site. You enter the user credentials and the site URL, and LW does some trundling to get things set up. Part of that ‘trundling’ is to download the sites theme (‘look’), which results in templates that are used by the LW editing screen. That template includes the various HTML and CSS for the site’s theme, and is used to present the theme’s look in the LW editing screen. So the HTML/CSS of the site’s theme is an important part of the template used by LW to display content on the LW editing screen.

WordPress themes get updated all of the time with additional features, and probably new and changed CSS styles. LW has a button to update the theme, so it’s editing screen will ‘look’ like a published post on the live site.

The LW editing screen looks like this (a partial screenshot of the LW editing area.

imageYou can see the ribbon bar (similar to the one in Word) across the top for basic formatting (there is more that is not shown on this screen shot). There is an area to enter the post’s title, and the area underneath that is the content area. You click on the Post Title area, type in the title, then move to the content area and type in the content. When all is done, you hit the Publish button, and the post is published on your web site.

This first screenshot shows the LW editing screen when we are using the Chaos Manor Reviews blog account. The CMR site uses a theme called “Voyage”. We’ve done some modifications of it, adding some CSS and other changes that we wanted to have.

The Chaos Manor site uses a different theme called ‘Mantra’. I’ve modified it with additional CSS and code. If you look at the two sites, you can see the difference in how they ‘look’. That is because they use different themes, each having it’s own ‘look and feel’.

Now, let’s take a look at the LW editing screen for the Chaos Manor site:

imageSee the difference? No title area. Just the entry area for the post’s content, and the gray area of the site’s background. (LW doesn’t show the sidebar area, nor the heading/menu area.)

Both screenshots are in the LW “WYSIWYG” mode. On the Chaos Manor site, because it uses a different theme, you can’t enter the title of the post on this LW editing screen. You can get the title area if you toggle off the WYSIWYG mode (with Ctrl + F11). Here’s what the Chaos Manor site looks like in LW with the WYSIWYG mode turned off:

imageThe Post Title area is back, but the WYSIWYG (the look of the post with the site’s theme) is gone.

The missing post title area caused a problem for Dr. Pournelle on the new install of LW. The title area was OK on the other systems he uses, since they were working off of the older version of the Mantra theme.

So it appeared that additional CSS with the latest version of the Mantra theme was causing the Post Title area to disappear in WYSIWYG mode in LW.

Digging into the Problem

imageThat took a bit of digging around to figure out. This next part is a bit more technical, with HTML and CSS code references. But it is interesting, even to the non-web page designer.

LW stores the site’s theme templates in the AppData folder on the computer. Each site is stored in a folder with a GUID-type name. Inside that folder area is the template file for the site. Here’s the file list for the Chaos Manor site; other sites that I have installed on my system have a similar file structure, shown on the right.

The LW editing page uses the index.htm template. The older versions of the index.html file are prior template ‘syncs’, as are, I think, the other GUID-named folders.

If we look at the code inside the index.htm file, we see standard HTML code with CSS styles, etc. Here’s the BODY area of the template code in that file

image

Note the highlighted code at line 172:

<DIV class=”comments-link”><SPAN><SPAN class=”screen-reader-text”>{post-title}</SPAN></SPAN></DIV>

Again, this code is ‘built’ by LW from the theme’s generated code for a page. The {post-title} is used by LW for the input area for the post’s title. Note that it is surrounded by the CSS Class called ‘screen-reader-text’. That’s an indication of where our problem of not seeing the title area on the LW screen. Compare that to the code in the index.htm file for the Chaos Manor Reviews site, which uses a different theme:

<H2 class=”entry-title”><A href=”http://www.jerrypournelle.com/chaosmanor/”>{post-title}</A></H2>

That gives us a clue as to the problem with the disappearing Post Title area on the Chaos Manor LW screen. The {post-title} is surrounded by the ‘screen-reader-text’ class. In the CMR code, there is a different class. So looking at the ‘screen-reader-text’ class is our next step. Here’s the CSS code for that CSS class.

.screen-reader-text {

position: absolute;

left: -9000px;

}

Digging into our knowledge of CSS stuff, we see that any HTML code using that class will have the text positioned 9000 px (pixels) to the left of the current position. That will position the visual text off of the LW screen (and off of the browser screen when the page is viewed). Screen reader applications (for the visually impaired) will be able to read the text, but a ‘normal’ view of the page in a browser will not show any content surrounded by that CSS class ‘div’.

Since LW editing screen uses a browser-representation (based on the LW template created from the site’s theme) of the post, that CSS class was the cause of the disappearing post title area on the new (with the current updated theme) installation of LW on Dr. Pournelle’s ‘Swan’ system. That particular bit of code is not in the LW installs for the old version of the Mantra theme, which is why Dr. Pournelle was able to see the Post Title when using LW on those systems.

The Fix is In – Sort Of

So, how to fix that? The quick way is to use the Ctrl+F11 toggle to get out of WYSIWYG mode on the LW editing screen. The disadvantage of that is that you can’t see what the post will look like when published. For instance, the ‘block quotes’ we used above to show the code contents will look similar to the web site version, with indentation, a lighter gray background, and a white border around the box. If you toggle off the WYSIWYG mode in LW, that area is just shown as indented text. But that is a Good Enough solution for Dr. Pournelle.

You could modify the Mantra Theme to not put in that CSS code. That takes away some of the ‘accessability’ of the site to visually impaired visitors.

And there is a risk in modifying theme code, unless you use a ‘child theme’ (as we do on both sites, and on all WordPress sites we make). If you don’t use a child theme, any changes you make to the theme’s code or CSS will get destroyed with a theme update. And if you do use a child theme, you may have to duplicate a lot of the theme code – depending on how the theme is ‘built’. Either way, some PHP skills are needed (among other skills). We’ve done child themes, and recommend them, but there is some effort involved.

You could change themes, of course (and we may do that at some point on the Chaos Manor site), but that requires a lot of testing and tweaking the new theme; things that you don’t want to do on a live site. And finding just the right theme with all of the features you want to have can be quite a ‘time sink’. You can spend hours finding the right theme (I’ve done it). And still things aren’t quite what you want.

Or you could build your own theme. There are theme building templates to help out, but that is still a bunch of effort requiring PHP, HTML, and CSS skills. (Again, I’ve done it – or at least, started on the process. Many hours/days/weeks of coding and testing are required to build a theme that works well.)

Now, it may be, as the executive editor and web guy of the Chaos Manor and Chaos Manor Review sites, that I’ll change the theme of Chaos Manor to be closer to Chaos Manor Reviews. Again, time is involved in that.

But in the meantime using the Ctrl+F11 key to toggle in and out of WYSIWYG mode just so Dr. Pournelle can type in the post title is the best short-term solution.

Whither Live Writer?

There aren’t many good alternatives to LW. You could use the native editor in WordPress, but that requires learning a bit about the WP Admin area. LW is great, since it doesn’t require any access to the WP Admin area.

You could use Word and publish there. That would work with simple blogs, but once you get into more than the basic formatting, Word is not the best solution either; it creates a lot of HTML ‘gunk’ in the page code.

Will Live Writer ever be more than ‘good enough’? Microsoft has announced that they are planning on taking it open-source, which might fix all of the little problems it has (including, hopefully, this one). No announcement of when that will happen, though. One can hope that it will be Real Soon Now.

So, we’re stuck with Live Writer. It is, overall, a great way to easily ‘blog’.  You do have to work around some issues. But it is almost ‘good enough’.

What do you think? What is your favorite blog editor? Let us know in the comments. And if you have a story you’d like to share on Chaos Manor Reviews, let us know here.

3 comments on “Windows Live Writer – Almost Good Enough

  1. Windows Live Writer requires ,NET Since I am currently experimenting with computing free of .NET, I can’t look into Live Writer at this point.

    I have been using an HTML Editor offered by Coffee Cup. In my limited use it has been handy, and I am glad to have it in my tool box.

Comments are closed.