I'm researching a way to simplify a publication process. I receive raw text and images from an author, format it in MS Word, process/upload and reference image URL's in a 2 column table, then convert text to HTML. I take the HTML and wrap it in CSS so the images and text are displayed a pre-determined way to meet our sites format.
For myself, the process is quite easy manually going through Word, Safari, Automator (I created a script that automates most of the CSS injection and HTML tweaking), and Brackets, but now that we are expanding, I need additional help, and this process is kind of tricky for some. Rather than trying to teach CSS coding to someone, and because not everyone has a MAC to use automator the way I have it configured, I'd like to be able to find a way to ideally paste the HTML into a form, and have it spit out the code with the CSS wrapped on it and ready to go.
An example of the completed work looks like this:
<div class="divv12">
<p style="text-align:center;"><span style="font-size:18px;"><span style="color:#000;"><strong>Aerosoft - Bologna X</strong></span></span>
<p style="text-align:center;"><span style="font-size:14px;"><span style="color:#000;"><em>A review by Maxim Pyankov</em></span></span>
</div>
<div class="divv11">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/040.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/040_T.jpg" class="img111"></a>
<p> </p>
<p>Bologna Airport (LIPE; BLQ), officially known as Bologna Guglielmo Marconi Airport, is an international airport serving the city of Bologna, Italy. The airport is smaller in size, when compared to some other international airports, with just the one runway and 20-plus gates. Nevertheless, it is the seventh busiest airport in Italy, with a wide range of European destinations.</p>
<p> </p>
<p>For me personally, this was my first payware package, representing an Italian airport. I have been looking for an Italian gateway for some time, and as such was very excited to have an opportunity to evaluate this product. This product was developed by MK Studios, and is available from the Aerosoft website, as a download, for a little over $18.</p>
<p> </p>
<p><strong>Purchase, Install, and Manual</strong></p>
<p>The purchase of this scenery, and the installation thereof, is a straightforward process, and will be familiar to those of you have purchased other products from the Aerosoft's site. The size of the installation file is 267 MB, and the installation wizard will seamlessly take you through the installation process.</p>
<p> </p>
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td style="width:319px;">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/001.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/001_T.jpg" class="img111"></a>
</td>
<td style="width:319px;">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/002.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/002_T.jpg" class="img111"></a>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p>The version installed, on which I did all of my testing, is v1.01. This package is compatible with the FSX and P3D V2 applications. This review is based on FSX, running in DirectX10 compatibility mode.</p>
<p> </p>
<p>Once the product is installed, the familiarity with the other Aerosoft products ends, to some extent. First of all, upon the completion of the installation, you are not presented with an option to adjust the airport's traffic density, which is present in most other Aerosoft sceneries I own. Second, this package is not installed inside the ..\Aerosoft folder, within the FSX root folder. Instead, you will find it in the ..\MK-Studios folder. And third, this package does not show up in the Aerosoft Launcher. This is neither bad, nor good. I just felt I needed to point that out.</p>
<p> </p>
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/114.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/114_T.jpg" class="img111"></a>
<p> </p>
<p>Within the BolognaX folder (and in the Program Files group, under the MK-Studios folder) you will find a couple of PDF files - Charts.pdf and Manual.pdf. The manual is about 10 pages long, and is only marginally useful (the airline parking assignment table, on page 8). The charts document, on the other hand, is a 38-page document containing high-quality airport approach and departure charts.</p>
<p> </p>
<p>The three screenshots below display the default FSX Bologna airport, the after the installation look of the area, and the outline of the areas provided as part of this package.</p>
<p> </p>
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td style="width:319px;">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/110.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/110_T.jpg" class="img111"></a>
</td>
<td style="width:319px;">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/111.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/111_T.jpg" class="img111"></a>
</td>
</tr>
<tr>
<td colspan="2" style="width:638px;">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/112.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/112_T.jpg" class="img111"></a>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p>As you can judge for yourself, even though this airport has just the one runway, the developers included quite a bit of the surrounding areas. Let us see how things look on the ground.</p>
<p> </p>
<p><strong>Airport Features and First Impressions</strong></p>
<p>I have done probably close to a dozen flights into and out of Bologna, prior to sitting down to write this review. My favorite route, for this airport, became the short hop (about 90 minutes) from Vienna into Bologna, and back.</p>
<p> </p>
<p>First and foremost - I absolutely fell in love with the geographic positioning of the airport; mainly, where the airport is located added a lot of immersion into my sim experience. The mountains and hills, surrounding the airport on the North, West, and to the South, and the Adriatic sea to the East, create an interesting mix for weather opportunities, and results in all kinds of interesting and challenging scenarios - the low clouds, hovering right above the ground level, the fog, creeping along the valley, the rain and, sometimes, a completely clear and crisp approach, uninhabited by any of the above!</p>
<p> </p>
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td style="width:319px;">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/056.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/056_T.jpg" class="img111"></a>
</td>
<td style="width:319px;">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/067.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/067_T.jpg" class="img111"></a>
</td>
</tr>
<tr>
<td style="width:319px;">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/068.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/068_T.jpg" class="img111"></a>
</td>
<td style="width:319px;">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/074.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/074_T.jpg" class="img111"></a>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p>Generally speaking, the airport is well visible and identifiable from the air. However, it often hides right underneath the low clouds, and I have found myself employing the ILS system far more often (and keeping it engaged for much more of the approach leg), than I have had to with my other payware sceneries. Other times (on multiple occasions), when blanketed by the dense fog, I actually found myself getting ready to abort the landing because I did not see the runway all the way down to the decision height (truth be told, I should have aborted a couple of times). Exhilarating! One point to note - the approach guiding lights, once (and when) visible, are easy to see and follow.</p>
<p> </p>
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td style="width:319px;">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/091.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/091_T.jpg" class="img111"></a>
</td>
<td style="width:319px;">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/096.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/096_T.jpg" class="img111"></a>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p>Another point - the airport is located in a beautiful place, geographically speaking. While challenging and exciting during the weather-intense landings and takeoffs, it is quiet and beautiful on the clear days, and especially in the dusk, dawn, and the night hours.</p>
<p> </p>
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td style="width:319px;">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/007.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/007_T.jpg" class="img111"></a>
</td>
<td style="width:319px;">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/014.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/014_T.jpg" class="img111"></a>
</td>
</tr>
<tr>
<td style="width:319px;">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/015.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/015_T.jpg" class="img111"></a>
</td>
<td style="width:319px;">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/070.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/070_T.jpg" class="img111"></a>
</td>
</tr>
<tr>
<td colspan="2" style="width:638px;">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/006.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/006_T.jpg" class="img111"></a>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p>Now that I have praised where the airport is located, and how great it looks during the approaches and departures, it is time to look at the airport at the ground level.</p>
<p> </p>
<p>Thank you, developers, for not skimping on the surrounding areas and giving us dense house and warehouse areas to enjoy during the descents and climb-outs.</p>
<p> </p>
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td style="width:319px;">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/034.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/034_T.jpg" class="img111"></a>
</td>
<td style="width:319px;">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/092.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/092_T.jpg" class="img111"></a>
</td>
</tr>
<tr>
<td style="width:319px;">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/100.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/100_T.jpg" class="img111"></a>
</td>
<td style="width:319px;">
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/005.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/005_T.jpg" class="img111"></a>
</td>
</tr>
</tbody>
</table>
<p> </p>
</div>
<style>
.img111
{border:3px solid #000;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.divv11 {
border:2px solid #000;
padding:15px;
background:clear;
width:auto;
border-radius:15px;
text-align:justify;
}
.divv12 {
border:2px solid #000;
padding:15px;
background:#9fa7e8;
width:auto;
height:60px;
border-radius:15px;
text-align:center;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=0 ); /* IE6-8 */
}
ul.a {list-style-type: circle;
list-style-position:inside;}
ul.b {list-style-type:square;
list-style-position:inside;}
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
.gradient
{
}
</style>
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
I had almost exactly the same exercise to do when I created a blog that I run (see my profile). I did it this way because my posts are always in a set format (as your web documents are), and I did not want to be writing all the HTML tags unnecessarily, it's too tedious for repetitive documents.
The main thing needed is a scripting language like PHP or similar. That allows you to read in a text file and reformat it in any way you please. If you don't know PHP, you might need to engage a programmer for a one-off task, though it is not too difficult a language to learn.
I just write my posts in a text editor. To avoid writing the HTML I use a very small set of very simple tags, all beginning with a tag marker character (say, the | character). A blank line separates paragraphs, which later get wrapped in <p> ....</p> tags by the PHP. Then |h1, |h2 at the start of a line mean headings, and I always have only the heading on a line, so the end of line indicates the end of the heading. PHP wraps the whole line in <h1,2...>...</h1> tags. In your case you would also need a tag for a table, with delimiter characters to mark new cells and rows, and an image tag.
If I want to do something particularly exotic for a one off document I can still type in raw HTML (your staff might need to call you over for that). But this approach all makes the HTML much easier and quicker.
Then I have the main PHP routine (quite a large one) which simply reads in the text, and applies the above rules to create the HTML. (You would start reformatting from either the raw text files you receive from the author, if they are suitably intelligable, or from after you've reformatted them in Word (but do that as .txt files, not .docs)). I simply display the HTML at runtime (PHP has an echo function to do that). But the PHP could save the HTML output to permanent .html files if you prefer.
As for the CSS, since you say your pages are all in a set format, that makes it easy. Just create a permanent external stylesheet yourself with set styles for your paragraphs, headings, the images, and so on (you should be doing that now). You might occasionally need to add extra bits at the end to cope with something unusal, but that would hopefully not be too often.
I hope this gives you just one idea of how to approach this. There are other ways.