justify = left/right leads to two column layout

januz commented 6 years ago

Using left or right as value for justify leads to a two column layout in the resulting html? I thought it should only affect the justification of the table itself, but not affect following text.

When I looked into the documentation, the examples are also rendered that way (http://www.suchanutter.net/pixiedust/dusting-objects.html#justify), so now I'm wondering whether it's by design?

nutterb commented 6 years ago

This isn't my desired behavior, and wasn't what I expected when I first tried it either. However, it is consistent with the HTML standard.

I haven't yet come across a solution that I'm happy with. Surprisingly, it isn't as straight forward as I would have thought.

januz commented 6 years ago

Thanks for the info! Did you come across a non-optimal solution that you could share? Thanks

nutterb commented 6 years ago

Here's the raw HTML table that demonstrates the existing problem. We use the HTML style attribute float:left to push the table to the left side. (copy the code over to here to play with it)

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

  <table style="float:left">
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </table>

<p>The align attribute allows text to be wrapped around the table.</p>
<p>The align attribute is not supported in HTML5. Use CSS instead.</p>

</body>
</html>

To resolve the issue, we need to use the clear attribute. Unfortunately, the clear attribute needs to be applied to the tag following the table, which makes it hard to control from pixiedust. Notice that I set the clear attribute in the first <p> tag below.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

  <table style="float:left">
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </table>

<p style = "clear:both">The align attribute allows text to be wrapped around the table.</p>
<p>The align attribute is not supported in HTML5. Use CSS instead.</p>

</body>
</html>

If you are using this from within a .Rmd, you write start the next paragraph after your table with an explicit paragraph tag. It's tedious, and isn't transferrable to LaTeX output, but it should work for HTML output.

<p style = "clear:both"> supercalifragulisticexpialidocious </p>

The actual .Rmd code would look something like this

---
title: "Untitled"
output: html_document
---

```{r setup, include=FALSE}
library(pixiedust)
```

```{r}
dust(head(mtcars),
     justify = "left") %>% 
  medley_bw()
```

<p style = 'clear:both'> Here is my explanatory paragraph </p>

januz commented 6 years ago

Thank you very much for the detailed explanations and examples. Works as suggested!

nutterb commented 6 years ago

Having addressed the question, it occurred to me how to handle this without much trouble. This will be fixed in the next update. Which will hopefully occur in February.

nutterb / pixiedust

justify = left/right leads to two column layout #107