Typography testing

This article is for testing some typography. I want to do some funky text wrapping thing and offset the paragraph.

This text should float nicely around the image. Then when it succeeds going past the image in height, it should not start at the base position of the image, rather it should align to the left with the rest of the body text on this page. The current solution uses the shape-outside property to clip the bounding box of the image, and then relatively position it by as much as I clip it. I think the result is looking pretty neat! It is very hacky though, and I run into a lot of limitations of MDX trying all this. But this will do for now. For future work, I would like to extend the width of just this paragraph by a small amount. Not sure if that neccesary though.

This also makes the image clip on small sizes (except on mobile where it just becomes a non-floating layout). This clipping however I consider a plus. The images I want floated this way will be more decorational, I will have other image layouts for more essential images.

Here it is again but I just added an option to offset how far into the text body it will push. Will probably do a float right variant as well when I need it. I really like stuff like this that breaks out of the grid.

For reference here is the full css for my float hack:

@media(min-width: 800px) {
  .float-left-img {
    float: left;
    shape-outside: polygon(calc(var(--width) + var(--offset)) 0, calc(var(--width) + var(--offset)) 100%);
    width: calc(var(--width) * 2);
    position: relative;
    right: calc(var(--width) + 1rem - var(--offset));
  }

  .float-left-img img {
    max-width: calc(var(--width) * 2);
    width: calc(var(--width) * 2)
  }

  .float-left-wrapper p {
    float: left;
    width: calc(100% + 2rem + 200px);
  }
}

The --width and --offset is set via a prop passed in so I have full control of the image position. And no matter the value the text will wrap nicely!

Footnotes

I know I want to do something similiar to Tufte style sidenoteshttps://edwardtufte.github.io/tufte-css/. These are placed right next to the body text so that they're easily available. However they can be a little tricky, especially when having multiple ones in the same paragraphLike this. Okay, it actually worked out pretty good first try. Wasn't that complicated! Uses some clever relative positioning. They can clip though, so will have to do some mobile thingy.

Math and Notation I also want to be able to render latex math formulas. Unsure if this will work server side. Trying now with remark-math and rehype-katex. Here is inline formula: $x = 2$. Seems reasonableActually maybe $x = 3$. And then a display formula below.

Another thing I want to be able to do is render music notation with LilyPond. Seems I have to do some custom plumbing for this as the only library I found is lilynode, which only seems to support renedering from a file and not just from a string. It basically just wraps the lilypond executable. I think I will solve this just writing to a tmp file and then passing the path to that temporary file to lilynode. This also illustrates a very nice thing about server components! Instead of having to extend the next build system, or using a webpack loader or anything of the sort, I can simply write a server component to prepare the markup.

This seems to be working good! However not sure how it will scale with different notations. Right now it renders to svg which seems reasonable for this but I'm not sure how to dynamically set the viewbox so that it captures the image properly. Lets try to add a longer score.

Okay, so I still have it as SVG but I do not put the svg inline directly into the html. Instead I put it as a data uri to an <img> element. Also this might be a little hacky but since I am using an executable (lilypond) and I do not want to go through the hassle of making that executable available on the machine that will deploy this, I have done it so that the files are rendered to the public dir during development and not actually renedered during build time.