[FEATURE]: Special Text Boxes

[coaltw]

Description

I think it would be nice to have the ability to create side quotes/passages, as found on volo's page 6 and 7 or MM page 250, 253, and 257

[ericscheid]

Could you attach an image of what you mean -- probably very possible with some CSS

[coaltw]

[ericscheid]

Inserting just an image with the text works, but I can imagine it would be handy to have a small collection of images of blank scraps and a snippet with the necessary CSS style to get the text to appear there, rotated as needed.

Adding a snippet would be a small tweak. Help-wanted to figure out the css code

[G-Ambatte]

Gazook already did some work on this; I dug out the Reddit post and his share link, we should just need to extract the relevant parts to a snippet.

https://www.reddit.com/r/homebrewery/comments/k4u1e5/how_to_flavor_text
https://homebrewery.naturalcrit.com/share/naG4A49kIttv

[G-Ambatte]

From the brew, the CSS should be as follows:

@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&family=Nanum+Pen+Script&display=swap');

  :root {
      --base-text-color:maroon;
      --greeting-color:inherit;
      --note-color:inherit;
      --signature-color:inherit;

      --base-text-font:'rock salt';
      --greeting-font:inherit;
      --note-font:inherit;
      --signature-font:inherit;

    --base-text-size:12px;
  }

  .flavor {
      font-family:var(--base-text-font);
      color:var(--base-text-color);
      margin-bottom:10px;
    font-size:var(--base-text-size);
  }

  .flavor p {
      text-align:center;
      font-family:var(--note-font);
      transform:rotate(0deg);
      color:var(--note-color);
      font-size:inherit;
  }

  .flavor.greeting p:first-child {
      font-family:var(--greeting-font);
      text-align:left;
      transform:rotate(0deg);
      font-size:inherit;
      padding-top:0;
      height:auto;
      color:var(--greeting-color);
      font-weight:unset;
  }

  .flavor.sig p:last-child {
      font-family:var(--signature-font);
      text-align:right;
      transform:rotate(-4deg);
      font-size:inherit;
      padding-top:0;
      height:auto;
      font-weight:unset;
      border:none;
      color:var(--signature-color);
  }

  .flavor.sig.wide p:last-child {
      margin-top:8px
  }

[ericscheid]

We can put the css into 5e.Phb.Style.css, and the snippet would be something like:

{{note,flavor,greeting,sig
Dear Reader -

Zoinks! Here is a handwritten note that brings FLAVOR to the page!

The first paragraph is left-justified because of the _greeting_ in the curly-stuff line. Remove that if you want.

The last paragraph is right-justified because of the _sig_ in the curly-stuff line. Remove that if you want.

See https://homebrewery.naturalcrit.com/share/naG4A49kIttv for more options.

-Gazook
}}

(only, point to an official homebrewery managed brew)
(with credits)

[Gazook89]

I'm working on this now, but need some input. First, relevant Share Link.

Which is better?
a. Snippet only has text, which includes a link to an imgur album containing parchment scraps if user wants to insert a background image themselves
b. Snippet has text + a background <img> immediately following it with parchment scrap
c. Snippet has text but also utilizes something like border-image or :after to attach the text to a parchment scrap?

I'm leaning towards (b) because it keeps things simple yet demonstrates the addition of a parchment scrap.

[calculuschild]

a) I don't want any built-in functionality of the site to rely on imgur. The images for this should be hosted on the HB servers. The snippet should also "just work" without a user needing to visit a whole separate site and dig through a album.

b) I also prefer not using an img tag, since it means the image and the text are two separate elements. It could work, but to the user the snippet would look messier.

c) I prefer this, but in particular using the method settled on in #1549 . That is, using variations on the class name (flavor1, flavor2...) to determine the background image:

{{watercolor1,top:0px,left:0px,height:300px,background-color:#b0720b,opacity:100%}}

[class*="watercolor"] {
	position:absolute;
	width:800px;     /* dimensions need to be real big so the user can set */
	height:800px;    /* height or width and the image will maintain aspect ratio */
	-webkit-mask-image:var(--wc);
	-webkit-mask-size:contain;
	-webkit-mask-repeat:no-repeat;
	mask-image:var(--wc);
	mask-size:contain;
	mask-repeat:no-repeat;
	background-color:red;
	--wc : url(https://i.imgur.com/ogGTcCh.png); /*default image*/
	z-index:-2;
}

.watercolor1 {
	--wc : url(https://i.imgur.com/ogGTcCh.png);
}

.watercolor2 {
	--wc : url(https://i.imgur.com/UPUX4zG.png);
}

.watercolor3 {
	--wc : url(https://i.imgur.com/Q6Uquv9.png);
}

.watercolor4 {
	--wc : url(https://i.imgur.com/UOtaJpJ.png);
}

This way the user doesn't have to deal with any urls when selecting their image. They just use one of the different numbers and it "just works".

This also gives us the option to individually style each image on a per-theme basis if we need to since each image will have a separate class name. I.e., the images maybe appear with a bluish tint in the DMG theme, or the image changes entirely to a "sci-fi console" in the StarFinder theme.

[Gazook89]

So when I first started this today I started with the watercolor splatter as a base to work from. I actually wanted to allow for changing the color as well, but for some reason couldn't get it working. I think the issue is that the watercolor stains are to some degree transparent throughout, thus when used as a mask over a background color the color is able to show through. But these note images have no transparency (besides around the edges), so when used as a mask it is opaque, and shows ALL of the background color.

Ideally, I think this could work the same as the spatters, using only "red" notes that just have colors applied in the css. Just have to take a harder look at it.

Just fyi, all of the images in the imgur gallery are mine, free to use, and I'm happy to make more if needed.

[calculuschild]

I actually wanted to allow for changing the color as well...

I think we could manage something with background-blend-mode together with background-color. Not sure what the blend mode could be, (perhaps just "screen"?, nice page for visualizing here: https://www.sarasoueidan.com/demos/css-blender/). But if we do that, the images should probably be recolored to a neutral greyscale (or at least mostly greyscale, maybe a tinge of yellow or brown in the shadows or something) so they all have the same basis color for blending.

Then in the snippet we could randomly generate a parchment-colored tone over a range of "brown - yellow - whitish", or picked from an array of colors we pre-determine.