Pandoc on AlmaLinux Conversion Emoji SVG CSS Tutorial

Pandoc on AlmaLinux Conversion Emoji SVG CSS Tutorial

Thinking on yesterday’s Pandoc on AlmaLinux Conversion Multiple Tutorial progress with our public facing Pandoc interfacing inhouse PHP Document Conversion web application we thought it might be good to have a day where we think about what my Under 7’s coach used to call …

Oompha

… and we went forward on this combining several of our favourite web work concepts, they being …

• emojis
• SVG
• background images
• text rotation
• colour
• opacity
• text shadow

… and, let’s be honest, it’s usually not one of our favourite, but useful today adding to the CSS ideas above …


background-repeat: repeat;


Then we applied CSS …

<?php echo ”

<style>
.docx {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:lightgreen;'><text y='20%'>\\01f4c4</text><text y='50%' transform='translate(5,0) rotate(30)' fill='red' fill-opacity='0.6'>docx</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.doc {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:lightgreen;'><text y='20%'>\\01f4c4</text><text y='50%' transform='translate(5,0) rotate(30)' fill='red' fill-opacity='0.6'>doc</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.html {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:lightgreen;'><text y='20%'>\\01f4c4</text><text y='50%' transform='translate(5,0) rotate(30)' fill='red' fill-opacity='0.6'>html</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.odt {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:lightgreen;'><text y='20%'>\\01f4c4</text><text y='50%' transform='translate(5,0) rotate(30)' fill='red' fill-opacity='0.6'>odt</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.pdf {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:lightgreen;'><text y='20%'>\\01f4c4</text><text y='50%' transform='translate(5,0) rotate(30)' fill='red' fill-opacity='0.6'>pdf</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.rtfd {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:lightgreen;'><text y='20%'>\\01f4c4</text><text y='50%' transform='translate(5,0) rotate(30)' fill='red' fill-opacity='0.6'>rtfd</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.rtf {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:lightgreen;'><text y='20%'>\\01f4c4</text><text y='50%' transform='translate(5,0) rotate(30)' fill='red' fill-opacity='0.6'>rtf</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.txt {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:lightgreen;'><text y='20%'>\\01f4c4</text><text y='50%' transform='translate(5,0) rotate(30)' fill='red' fill-opacity='0.6'>txt</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}

.ydocx {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:yellow;'><text y='20%'>\\01f4dd</text><text y='50%' transform='translate(5,0) rotate(30)' fill='blue' fill-opacity='0.6'>docx</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.ydoc {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:yellow;'><text y='20%'>\\01f4dd</text><text y='50%' transform='translate(5,0) rotate(30)' fill='blue' fill-opacity='0.6'>doc</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.yhtml {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:yellow;'><text y='20%'>\\01f4dd</text><text y='50%' transform='translate(5,0) rotate(30)' fill='blue' fill-opacity='0.6'>html</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.yodt {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:yellow;'><text y='20%'>\\01f4dd</text><text y='50%' transform='translate(5,0) rotate(30)' fill='blue' fill-opacity='0.6'>odt</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.ypdf {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:yellow;'><text y='20%'>\\01f4dd</text><text y='50%' transform='translate(5,0) rotate(30)' fill='blue' fill-opacity='0.6'>pdf</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.yrtfd {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:yellow;'><text y='20%'>\\01f4dd</text><text y='50%' transform='translate(5,0) rotate(30)' fill='blue' fill-opacity='0.6'>rtfd</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.yrtf {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:yellow;'><text y='20%'>\\01f4dd</text><text y='50%' transform='translate(5,0) rotate(30)' fill='blue' fill-opacity='0.6'>rtf</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
.ytxt {
background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;background-color:yellow;'><text y='20%'>\\01f4dd</text><text y='50%' transform='translate(5,0) rotate(30)' fill='blue' fill-opacity='0.6'>txt</text></svg>\") !important;
background-repeat:repeat;
background-position: center right;
}
</style>

“; ?>

<?php echo ”

var newouts=['dopdf','dovideo','doag','dohtml','doxml','doexcel','doword','dopowerpoint'];
var newouws=['image', 'video','agif', 'html', 'xml', 'xlsx', 'docx', 'pptx'];

function inform(iois) {
if (iois) {
inaconto = (iois.contentWindow || iois.contentDocument);
if (inaconto != null) {
if (inaconto.document) { inaconto = inaconto.document; }
if (inaconto.body != null) {
var spansare=inaconto.getElementsByTagName('span');
for (var ijkh=0; ijkh<spansare.length; ijkh++) {
if (spansare[ijkh].outerHTML.indexOf(' ondblclick=') != -1 && spansare[ijkh].outerHTML.indexOf(' onclick=') == -1) {
if (spansare[ijkh].outerHTML.indexOf('install=') != -1) {
spansare[ijkh].setAttribute('data-name', spansare[ijkh].outerHTML.split('install=')[1].split(\"'\")[0].split('\"')[0].split('&')[0]);
if (spansare[ijkh].getAttribute('data-name') == 'pdfimages') {
spansare[ijkh].title+=' Click for Pdfimages information';
spansare[ijkh].onclick=function(event){ window.open('//www.xpdfreader.com/pdfimages-man.html', '_blank', 'top=150,left=150,height=500,width=500'); };
} else {
//spansare[ijkh].title+=' Click for ' + event.target.getAttribute('data-name').substring(0,1).toUpperCase() + event.target.getAttribute('data-name').substring(1).toLowerCase() + ' information';
spansare[ijkh].title+='. Click for ' + spansare[ijkh].outerHTML.split('install=')[1].split(\"'\")[0].split('\"')[0].split('&')[0].substring(0,1).toUpperCase() + spansare[ijkh].outerHTML.split('install=')[1].split(\"'\")[0].split('\"')[0].split('&')[0].substring(1).toLowerCase() + ' information';
spansare[ijkh].onclick=function(event){ window.open('//www.' + event.target.getAttribute('data-name') + '.org', '_blank', 'top=150,left=150,height=500,width=500'); };
}
//alert(spansare[ijkh].outerHTML.split('install=')[1].split(\"'\")[0].split('\"')[0].split('&')[0]);
}
}
}

var stys=document.getElementsByTagName('style');
var stmore=''. txis='', ky=0, siz='';
for (var jsy=0; jsy<stys.length; jsy++) {
stmore='';
if (('' + stys[jsy].innerHTML).indexOf('<svg') != -1) {
if (('' + stys[jsy].innerHTML.split('}')[0]).indexOf('<svg') != -1 && ('' + stys[jsy].innerHTML.split('}')[0]).indexOf('</text></svg>') != -1) {
txis='>' + ('' + stys[jsy].innerHTML.split('}')[0]).split('</text></svg>')[0].split('>')[eval(-1 + ('' + stys[jsy].innerHTML.split('}')[0]).split('</text></svg>')[0].split('>').length)] + '</text>';
//alert('Try to find ' + '.y' + ('' + stys[jsy].innerHTML.split('}')[0]).split('</text></svg>')[0].split('>')[eval(-1 + ('' + stys[jsy].innerHTML.split('}')[0]).split('</text></svg>')[0].split('>').length)] + ' {');
if (('' + stys[jsy].innerHTML).indexOf('.y' + ('' + stys[jsy].innerHTML.split('}')[0]).split('</text></svg>')[0].split('>')[eval(-1 + ('' + stys[jsy].innerHTML.split('}')[0]).split('</text></svg>')[0].split('>').length)] + ' {') != -1) {
siv='.y' + ('' + stys[jsy].innerHTML.split('}')[0]).split('</text></svg>')[0].split('>')[eval(-1 + ('' + stys[jsy].innerHTML.split('}')[0]).split('</text></svg>')[0].split('>').length)] + ' {';
for (ky=0; ky<newouts.length; ky++) {
stmore+=String.fromCharCode(10) + ' .y' + newouts[ky] + ' { ' + stys[jsy].innerHTML.split(siv)[1].split('}')[0].replace(txis, '>' + newouws[ky] + '</text>') + ' } ' + String.fromCharCode(10);
}
} else {
for (ky=0; ky<newouts.length; ky++) {
stmore+=String.fromCharCode(10) + ' .y' + newouts[ky] + ' { ' + stys[jsy].innerHTML.split('{')[1].split('}')[0].replace(txis, '>' + newouws[ky] + '</text>') + ' } ' + String.fromCharCode(10);
}
}
}
inaconto.body.innerHTML+='<style> ' + stys[jsy].innerHTML.replace(/lightgreen/g,'transparent').replace(/yellow/g,'transparent').replace(/blue/g,'orange').replace(/0\.6/g,'0.9') + stmore.replace(/lightgreen/g,'transparent').replace(/yellow/g,'transparent').replace(/blue/g,'orange').replace(/0\.6/g,'0.9') + ' </style>';
if (inaconto.getElementById('thewords')) {
if (('' + inaconto.getElementById('thewords').outerHTML).indexOf(' class=') == -1) {
inaconto.getElementById('thewords').className='pdf';
inaconto.getElementById('thewords').style.textShadow='-2px 2px 2px #ff2d95';
}
}
if (inaconto.getElementById('mysbut')) {
if (('' + inaconto.getElementById('mysbut').outerHTML).indexOf(' class=') == -1) {
inaconto.getElementById('mysbut').className='ydopdf';
inaconto.getElementById('mysbut').style.textShadow='-1px 1px 1px #ff2d95';
setInterval(inacheck, 4000);
}
}
}
}

}
}
}
}

function inacheck() {
var xnewouts=\",'dopdf','dovideo','doag','dohtml','doxml','doexcel','doword','dopowerpoint',\";
if (inaconto) {
var csofar='', xx='';
var cbsare=inaconto.getElementsByTagName('input');
//document.title='count ' + xnewouts + ' is ' + cbsare.length;
for (var icb=0; icb<cbsare.length; icb++) {
if (('' + cbsare[icb].type) == 'checkbox') {
if (cbsare[icb].checked) {
if (('' + cbsare[icb].id) != '') {
//xx+=' ' + '' + cbsare[icb].id;
if (xnewouts.replace(/\'/g,'').indexOf(',' + cbsare[icb].id + ',') != -1) {
//xx+='=' + '' + cbsare[icb].id;
if (csofar == '') {
csofar='y' + cbsare[icb].id;
} else {
csofar+=' y' + cbsare[icb].id;
}
}
}
}
}
}
//document.title='count is ' + cbsare.length + ' ' + xx + ' and csofar=' + csofar;
if (csofar != '' && csofar != ('' + inaconto.getElementById('mysbut').className)) {
inaconto.getElementById('mysbut').className=csofar;
}
}
}

“; ?>

… in our changed for multiple input file selections macos_textutil_convert.php PHP web application you can also try below.

Previous relevant Pandoc on AlmaLinux Conversion Multiple Tutorial is shown below.

Pandoc on AlmaLinux Conversion Multiple Tutorial

The “theme word” of today’s blog posting adding to yesterday’s Pandoc on AlmaLinux Conversion Sharing Tutorial is …

multiple

… in the sense of …

• allowing for multiple sharing conduits whether they be email and/or SMS recipients
• allowing for multiple browsed for input file selections which involved a tweaked client_browsing.htm local file browsing help_erer out_erer

… in terms of our public facing Pandoc interfacing inhouse PHP Document Conversion web application. But, did we mention, downloading to a local Apache/PHP/MySql web server such as MAMP is a good alternative environment approach, that is?

Also, we’ve added to the PDF (output, that is) format smarts by filling in fields of that accompanying PDF Conversion web application we introduced yesterday, if the user selects to output to PDF, and follows through on this, in our changed for multiple input file selections macos_textutil_convert.php PHP web application you can also try below.

Did you know?

You may have noticed a few uses for hashtagging in this project …

• used extensively for email (where it appears to us to be of more practical use in so far as saved email links can be clicked much later to reconstruct output files … that is) and SMS link URLs
• used to help populate input data items when multiple browsed for files are selected and new popup windows need that help
• navigating from non-PDF parts of the webpage to PDF parts … more your traditional use of hashtags … #that is

Just note, though, it could be that the web browser cache is not your friend here, and you may want a PHP $_GET (ie. ? delimited) argument with some randomosity to accompany any “lonely hashtags” out there!

And just before we go …


var mylocationhash='';

if (('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/^\#/g,'').trim() == '') { // sometimes it's because ...
if (('' + document.URL).indexOf('#') != -1) {
if (('' + document.URL).split('#')[1].trim() != '') {
mylocationhash=decodeURIComponent(('' + document.URL).split('#')[1]); // your hashtagging is contained in document.URL ...
}
}
} else {
mylocationhash=decodeURIComponent(('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'').replace(/^\#/g,'')); // versus it existing in location.hash
}


Don’t give up … don’t give up … that is

Previous relevant Pandoc on AlmaLinux Conversion Guises Tutorial is shown below.

Pandoc on AlmaLinux Conversion Guises Tutorial

It pans out yesterday’s Pandoc on AlmaLinux Conversions Primer Tutorial revisit start to our …


Pandoc document conversion


… interfacing PHP web application involves more than a two day job. Today, before any PDF input or any new format thinking, we took an interest in the way a user may want to use the output formats …

• html
• txt … which Pandoc knows as plain

… as we found “talents” for each, those being …

• html … is better when there are UTF-8 characters involved in the converted data
• txt … which Pandoc knows as plain … is useful in a pair of guises …
  1. with line feeds
  2. without line feeds

… depending on what use the user sees with this data, and because we want to restrict the user to internal use only data displays, we wanted to have a means by which these three “guises” were available to the user in an HTML div element (which is more flexible than a textarea element) to serve these purposes, as well as popup window HTML presentations where those UTF-8 characters can be more easily controlled.

The day gets quickly used up with issues like this, we find, regarding the changed macos_textutil_convert.php PHP web application you can also try below.

Previous relevant Pandoc on AlmaLinux Conversions Primer Tutorial is shown below.

Pandoc on AlmaLinux Conversions Primer Tutorial

Yesterday’s Word to HTML to CSV Delimitation Primer Tutorial offered a timely reminder that not only …

• LibreOffice and Microsoft Office software applications offer exports of document formats to HTML … but, also, open source gives us …
• (what is now possible to offer in a public sense because of the recent AlmaLinux installation (you can read more about at Pandoc Install and Public Face Tutorial) of) Pandoc command line application we can use to convert input document formats such as *.doc* and *.html and *.txt to others … and down the track …
• tomorrow’s job can involve the interfacing of another inhouse “open source using” web application so that input *.pdf is possible here too

For security purposes we restrict where output files end up to …


/tmp/


… as you might surmise would be a wise move. The user ends up relying on the changed macos_textutil_convert.php PHP web application itself, that way, to display the outputted data (created via command line Pandoc commands performed on the RJM Programming AlmaLinux web server via PHP exec calls) for them.

In making this happen, exporting to PDF, we found that we additionally had to install to the AlmaLinux web server …


dnf install texlive


… the best “heads up” for this after reading the Pandoc error message being this useful webpage, thanks.

Previous relevant Word to HTML to CSV Delimitation Primer Tutorial is shown below.

Word to HTML to CSV Delimitation Primer Tutorial

The modern document applications allow conversion to HTML. What happens during that process, exactly? Well, that’s “under the hood” stuff. A little background, though, and context …

• Why would you want to convert, say a Word file, to HTML (using, perhaps, LibreOffice, in our case, or Microsoft Word)? … well, as a mere mortal programmer …
• (any form of) text is easier to deal with for “mere mortal programmer” languages we might want to use like …
• PHP … is very good at the delimiter processing bits that allow the programmer be useful …
• converting … the data into other guises, the one that interested us being …
• CSV (comma separated value) data … to be fed into spreadsheet applications like Excel or LibreOffice’s one … and then create charts

… and to do useful delimiter work in PHP you need to know, or suss out, “what happens”, or evidence of that … think hex dumps (where $dr is a PHP variable containing an HTML file record) …

<?php

echo bin2hex($dr) . "\n";
// ... gave, in our case, output such as ...
// c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020546f74616c207c20c2a020c2a02036302c30333220c2a020c2a020c2a03130302e3030

?>

And so we line up all the useful contributors …

1. CP3O
2. C2A0
3. R2D2
4. … … …

Hang on?! What’s with C2A0? And for that matter, the pitiful “am typing” simulation “… … … “?!

Well, we asked around, and got to this useful link telling us these are non-ascii characters describing a …


Non-breaking space


… scenario programmers of HTML will know can be those …


 


… HTML entities in your webpage content. Well, now, at least to us, that all makes sense. But, for our job, that could be the tip of the “UTF-8 headache” situation! We know we’re only interested in ascii data characters for the conversion job we are trying to do. Is there a way to simplify this “middleperson” HTML data content? Well, this other useful link … got us to use …

<?php

$dr=preg_replace('/[\x7F-\xFF]/ui', '', $dr);

?>

… helped us with …

1. sanity
2. simplification

… as far as the PHP delimitation logic went. This was an inhouse job, but we’ll show you a skeletal of how we used …

• input Word report … we are calling from_word_to_html.html … say …
• containing spreadsheet_able data …
• we wanted to extract into …
• individual CSV files … ready to …
• open as useful spreadsheets … and perhaps onto some chart production …
• processing via command line command …
  
php dostuff.php

  … where that PHP is (very informally) …
• dostuff.php

… in case these ideas interest you?!

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.