Display translated pages on the same page so they print correctly -- modifying print.css?

In our database we have original documents in Chinese and for a few of them we also have English translations. Currently, we have this set up relationally such that:

  1. The original item in Chinese has an “item relation” set up to the translated English document.
  2. The translated English document is entered as a separate item and set up as a “translation of” that links to the original Chinese document.
  3. My predecessor added a liquid slider to the original Chinese item, which checks to see if the document is in Chinese and if it has an English translation associated it, then adds the slide to switch between the Chinese and English translations.

This looks visually appealing, but I found a flaw that I need to figure out to fix: if you try to print out the page from the original item (where the slider it is), the print.css splits into an image that shows half the English and half the Chinese document (like split down the middle). Since these documents are very likely to be printed out by professors looking to do translation with graduate students (and researchers wishing to compare translations of specific terms), there needs to be a way to print out both documents. Is there a way I can get the print.css to do that?

It should be possible to do that, but what’s necessary would really depend on how the specific styling is working now and how you want it to look instead. There’s probably no generically helpful advice for this situation; it’d be pretty specific to your site and theme.

1 Like

Thanks for the response. At the moment we have the Seasons theme installed. I have slightly modified the print.css, but only to remove things we don’t want printed out. It currently looks like this:

@media print {
  body {
    font: 12px Georgia, "Palatino Linotype", "Book Antiqua", "Times New Roman", Times, serif;
  }
  #content {
    width: 100%;
    margin: 0;
    float: none;
  }

  h1,
  #site-title {
    font-size: 16pt;
    font-weight: bold;
  }

  h2 {
    font-size: 14pt;
 <!--   font-style: italic;-->
  }

  h3 {
    font-size: 14pt;
  }

  h4 {
    font-weight: bold;
  }

  h5 {
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
  }

  a:link:after {
  <!--  content: " (" attr(href) ") "; -->
    font-size: 80%;
  }

  #search-container,
  #primary-nav,
  #header-image,
  .mobile,
  #edit,
  .navigation,
  .pagination,
  #exhibit-page-navigation,
  .exhibit-section-nav,
  .exhibit-page-nav {
    display: none;
  }

  blockquote {
    margin: 10pt 0 0 0;
    font-style: italic;
  }
}

The show.php currently checks to see if there is indeed a translated document and then, if so, displays original and translation in the liquidslider:

 <div class="liquid-slider" id="slider-id">
            <div>
                <h2 class="title">中文</h2>
                <?php echo metadata('item', array('Item Type Metadata', 'Text')); ?>
            </div>
            <div>
                <h2 class="title">English</h2>
                <?php
                    $objects = get_db()->getTable('ItemRelationsRelation')->findByObjectItemId($item->id);
                       foreach ($objects as $object) {
                            if (!($otherItem = get_record_by_id('item', $object->subject_item_id))) {
                       continue;
                                }
                    $item = $otherItem;            
                    echo metadata($item, array('Item Type Metadata', 'Text'));            
   } 
?>
            </div>
        </div>

So right now here is a sample screenshot of what I see happening when it tries to print both original and translation:

How would I modify the print.css and show.php to account for both - something with div tag additions or mods I’m guessing? Or do I need to change the liquidslider itself (hopefully not!).

Again it’s hard to say without a closer look at the whole thing, but I’d assume that “side by side” rendering is coming from the liquid slider code… perhaps if you added media="screen" to the link tag for the slider CSS, it would simply not apply to the printed page at all.

Otherwise, you’re probably looking at something like overriding the slider’s styles in your print stylesheet, making sure the divs inside .liquid-slider are display: block, and not floating.

So, I mostly figured this out when I first wrote, but am re-visiting this now because there was one thing I could not figure out: I need to call the database a second time (to get the English version again for the print.css divs) and it doesn’t seem to work. So what I mean is, I have a set of divs for normal display (“trans-display”), and a set only for printing (“trans-print”). I call the two versions of the document - Chinese and its English translation - twice: the first time to display, then the second time for print, i.e.:

<div class="liquid-slider" id="slider-id">
            <div><div id="trans-display">
                <h2 class="title">中文</h2>
                <?php echo metadata('item', array('Item Type Metadata', 'Text')); ?>
            </div>
            <div>
                <h2 class="title">English</h2>
                <?php
                    $objects = get_db()->getTable('ItemRelationsRelation')->findByObjectItemId($item->id);
                       foreach ($objects as $object) {
                            if (!($otherItem = get_record_by_id('item', $object->subject_item_id))) {
                       continue;
                                }
                    $item = $otherItem;            
                    echo metadata($item, array('Item Type Metadata', 'Text'));            
   } 
?>
            </div>
        </div>

Then

<div id="trans-print">
		  	<h2 class="title">中文 </h2>
                <?php echo metadata('item', array('Item Type Metadata', 'Text')); ?>
			</div>
			<div id="trans-print">
			<h2 class="title">English</h2>
				English text here
				<?php
                    $objects = get_db()->getTable('ItemRelationsRelation')->findByObjectItemId($item->id);
                       foreach ($objects as $object) {
                            if (!($otherItem = get_record_by_id('item', $object->subject_item_id))) {
                       continue;
                                }
                    $item = $otherItem;            
                    echo metadata($item, array('Item Type Metadata', 'Text'));            
   					} 
?>
</div>

The second time, under “trans-print”, everything displays in the print version except for the English text. I also tried to just print it out to the screen a second time as a test, and that didn’t work. So my guess is that it has to do with the get_db() function. Is there a way around this?

I believe the problem is this:

Your loop (both times) repeatedly finds a record you call $otherItem, then sets that to $item before calling metadata. You also use $item in your call to get the Item Relations: findByObjectItemId($item->id).

This works fine the first time through because $item is the item you’re currently viewing. However, by the second time you try to run this, you’ve reset $item to something else (several times, even) and it now points to some other, related item instead of the one on this page.

You’ve got several options to fix it: you can get rid of the $item = $otherItem line and just use $otherItem directly in your call to metadata. You can also just use the same $objects you found the first time instead of getting them out of the Item Relations table again, as they’ll be the same. Finally, if it’s just the same text, you could save it to a string and just echo the string twice, rather than calling metadata multiple times. Any of those by themselves, or all of them together, should fix this.

Belated thanks! Finally got to this today and fixed it. I don’t know why I’m always overthinking these problems… this was an easy fix!