Thursday, July 15, 2021

A Small Experiment (*Updated*)

I'm not much of a coder, but I know how to look stuff up and bang my head on the wall until I find what I want, and just now I managed to do something I think is pretty cool. I've always felt that one of the problems with reading fiction online is the way it's displayed. It's not the same when you scroll through instead of leafing through pages, either in a physical book or on an e-reader. 

I've put together what I hope is a step toward solving that. Just go over to my Thresholds of the Grand Dream page to take a look.

Here's how I did it. In the HTML for this web site,* I put in:

/* Convert text to multiple columns within a scrollable box */

.storycolumns {
  column-count: 1;
  column-fill: auto;
  column-gap: 25px;
  height: 725px;
  max-height: calc(100vh - 50px );
  width: 85%;
  border: 5px double;
  text-align: justify;
  font: 16px Georgia;
  padding-top: 20px;
  padding-bottom: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: auto;
}
.storycolumns div {
  scroll-snap-align: start;
  padding: 20px;
}

And on the page itself, right above where I wanted the story to begin:

<div class="storycolumns">
  <div>

With of course some closing tags at the end. I couldn't figure out how to do a column break when a chapter started, but this will do for now. The next time I post fiction on here, I'll definitely be doing it this way.

Now I just need to figure out how to get Reader Mode in Firefox to do this. And how to add page numbers.

* I use Blogger, so I went to Theme, clicked the arrow next to Customize, and selected "Edit HTML." I inserted it right before where it says "#header-inner." Of course you can name it anything you want instead of "storycolumns." I just wanted something unique. 

 *UPDATE*: I've tweaked the code to make it friendlier to phones and laptops. And if anybody knows how to put page numbers on this thing, let me know.

No comments:

Post a Comment