To fix this, I have to rewrite:

sub get_utf8_text {
  use 5.010;
  use HTML::FromText;
  use Path::Tiny;
  use utf8;
  use open OUT => ':utf8';

### Passing in
  #reference to main data structure and directory for captions
  my ( $rvars, $dir ) = (@_);
  my %vars = %$rvars;

  say "dir is $dir";
  opendir my $eh, $dir or warn "can't open dir for utf8 captions  $!\n
+";
  while ( defined( $_ = readdir($eh) ) ) {
    next if m/~$/;
    next if -d;
    if (m/txt$/) {
      my $file = path( $dir, $_ );

      my $guts = $file->slurp_utf8;
      my $temp = text2html(
        $guts,
        lines => 1,
        paras => 1,
      );

      # surround by divs

      my $oitop    = $vars{"oitop"};
      my $oben     = $oitop->slurp_utf8;
      my $oibottom = $vars{"oibottom"};
      my $unten    = $oibottom->slurp_utf8;
      my $text     = $oben . $temp . $unten;

      say "text is $text";
      $content{$_} = $text;
    }
  }
  closedir $eh;

  #important to sort
  my @return;
  foreach my $key ( sort keys %content ) {

    #print $content{$key} . "\n";
    push @return, $content{$key};
  }
  return \@return;
}
[download]

I think I want to get away from HTML::FromText for this input, as I will have a reference to the array of array of at hand. I am not, however, certain that I'm not getting the exact representation I need, but that my .css is off.

Here is what the body looks like, both on STDOUT and when I view the page source:

<div class="outer">
<div class="hft-lines">&#x43B; &#x43B;&#x435;&#x441;&#x43E;&#x43F;&#x4
+30;&#x440;&#x43A;<br />
&#x43E; &#x438; &#x43E; &#x43E; &#x435; <br />
&#x43A;&#x43E;&#x43C;&#x430;&#x440; &#x440; &#x439; <br />
&#x43B; &#x431; &#x442;&#x440;&#x430;&#x441;&#x441;&#x430;<br />
&#x451;  &#x43A;   &#x442; &#x431;<br />
&#x43F;&#x430;&#x441;&#x441;   &#x443;&#x445;&#x43E;<br />
  &#x43C;&#x435;&#x43D;&#x435;&#x434;&#x436;&#x435;&#x440;<br />
&#x444;&#x430;&#x443;&#x43D;&#x430; &#x440;&#x430;&#x43A;&#x438;<br />
  &#x442;&#x43E;&#x441;&#x43A;&#x430;  &#x433;<br />
&#x448;&#x43A;&#x430;&#x43D;&#x442; &#x43C;  &#x435;<br />
    &#x430;&#x442;&#x430;&#x43C;&#x430;&#x43D;<br />
    &#x432; &#x442; &#x442; <br />
    &#x43D; &#x443;&#x445;&#x430;&#x431;<br />
    &#x438;&#x433;&#x440;&#x43E;&#x43A;&#x438;<br />
    &#x43A; &#x433;&#x440;&#x430;&#x447;<br /></div></div>  <!-- end #
+outer-->
[download]

The spaces aren't represented as any special html entity. Do they need to be?

Another thing I want to rewrite about this routine is:

      # surround by divs

      my $oitop    = $vars{"oitop"};
      my $oben     = $oitop->slurp_utf8;
      my $oibottom = $vars{"oibottom"};
      my $unten    = $oibottom->slurp_utf8;
      my $text     = $oben . $temp . $unten;
[download]

All this does is wrap a string with two other strings I keep in template files:

 
$ cat oi*.txt
<div class="outer">

</div>  <!-- end #outer-->
$
[download]

Isn't there an xml way to do this?

I won't want to dwell on it forever, but I will show the relevant .css in the original post:

.outer {
background-color:white;
margin-left : auto;
margin-right : auto;
border-radius : 1em;
clear: left;
margin-top: .7em;
margin-bottom: .7em;
max-width:25%;
display:block;

}

.hft-lines {
background-color:white;
margin-left : auto;
margin-right : auto;
border-radius : 1em;
clear: left;
margin-top: .7em;
margin-bottom: .7em;
max-width:85%;
display:block;
text-align:center;
font-size: 1.5em;

}
[download]

I am by no means a .css guru, so there might be low-hanging fruit for improvements. The page does register as without .css error.

So let me review and try to ask a cohesive question. As the script runs, I have a perfectly rectangular representation of these data as indicated by Data::Dump. The question is how to get this row and column nature to show up properly. I would imagine that there's more than one way to do it.