Man Page Reformatted on Mobile (and Desktop)

What is on Your Mind?
1

After experimenting with various Linux utilities like man2html and mandocs and other formats and software, none of them worked as well (or as clear) as by formatting by using PHP preg_replace() to add some CSS elements (wrappers) and then using the <pre> element combined with using jQuery to further refine.

So, today, I have redone all the individual man pages on mobile (and touched up the desktop man pages) with simple PHP code like this:

if($_COOKIE['neostyle'] == 'mobile') 
   { 
      putenv("MANWIDTH=50"); 
   } 
   else 
   { 
     putenv("MANWIDTH=120"); 
   }

and some simple formatting regex in PHP:

function addclasstoallCaps ($in) 
{ 
$out = preg_replace('/(<b>([A-Z\s]*)<\/b>)/','<div class="neo-man-caps">\\1</div>', $in); 
return $out; 
}

and some more CSS for mobile:

<style>
pre {
    margin: 2px;
    padding: 15px;
    border: 1px solid;
    margin-right: 10px;
    border-style: solid;
    border-color: rgba(0, 0, 0, .2);
    background-color: rgba(7, 27, 183, .05);
    overflow: auto;
    font-size: 16px;
    line-height: 20px;
    /*   width=100%; */
}
</style>

combined with some quick and easy jQuery:

<script>
$(function(){
 $('.neo-man-caps, .neo-man-header').css({"color":"midnightblue"});
 $('.neo-mobile-man').find('i').css({"color":"purple"});
 $('#neo-man-h1-bits, #neo-man-h1bits-section, h1').css({"font-size":"1em"});
 $('#neo-man-h1-bits, #neo-man-h1bits-section, h1, .neo-man-banner').css({"color":"palegreen","background-color":"black"});
 $('h1').find('a').css({"color":"palegreen","background-color":"black"});
});
</script>

So, things are looking much better for all man pages on mobile and the desktop man pages are a bit crisper.

Not as perfect as I would like it, but much better, especially on mobile (desktop was already very good).

Cheers.

3 Likes
2

This messy, but effective, addlinks() PHP function I wrote many years ago for the man pages has been working well over the years and continues to work well today. The only recent change is to add class="neo-man-link" to the links:

function addlinks($output,$os,$section='',$origin=''){
    global $vbulletin, $col2_f;
    $style = ' style="font-size:1.2em;" class="neo-man-link" ';
    if($_GET['apropos'] == '1' && $col2_f == '2')
    {
      define('REGEX7',"/(\w[-\:.\+\w]*)\s*\((\d)?(\w+)?\)/");
      $rep_string="<a $style href=\"/man-page/$os/$2$3/$1/\">$1($2$3)</a>";
    }
    elseif($_GET['apropos'] == '1' && $col2_f == '1')
    {
      define('REGEX7',"/(\w[\-\:.\+\w]*)\s*\(([0-9])\)/");
      $rep_string="<a $style href=\"/man-page/$os/$2/$1/\">$1($2)</a>";
      $set2=TRUE;
    }
    else
    {
      define('REGEX7',"/(\w[-\:.\+\w]*)\s*\((\d)(\w+)?\)/");
      $rep_string="<a $style href=\"/man-page/$os/$2$3/$1/\">$1($2$3)</a>";
    }

    if ($_GET['apropos'] == '1'){

            if($set2)
             {
              $save = $output;
              $out =preg_replace(REGEX7, $rep_string, $output);
              if(preg_match('/\d/',$output))
                  $output = strtolower($out);
              else
                  $output = $save;
             }
            else
              {
              $output =preg_replace(REGEX7, $rep_string, $output);
              }
            $output = trim($output);
     }
    else {
            if (preg_match("/(\w[\-\:\.\w]*)\((\d)(\w+)\)/",$output))
            {
                 $output=preg_replace(REGEX7, $rep_string, $output);
            }
            else 
            {
               $output=preg_replace("/(\w[\-\:\.\w]*)\((\d)\)/",
               "<a $style href=\"/man-page/$os/\\2/\\1/\">\\1(\\2)</a>",$output);
            }
        }
    $output=ltrim($output);
    return $output;
}