Danbooru

Advanced HTML/CSS Notes

Posted under General

BrokenEagle98 said:

The issue is that line-height only fully works for embedded notes (".note-box"), but not the pop-up notes (".note-body"). The line-height can be increased for both, but decreasing it past a certain point on pop-up notes only decreases the height of the pop-up box and not the space between lines.
[...]
Is there a way to fix the above, and if so, what does it require?

I’m not sure if I got your intention right, but have a look at the top right note in post #2662628.

Using style="..." in font tags can be problematic. I changed it to a div tag and converted the font size specification and it seems to be working better. Please have a look and revert it if that’s not what you wanted.

I recommend never using the font tag and using span tags if possible or div tags where needed.

BrokenEagle98 said:

The issue is that line-height only fully works for embedded notes (".note-box"), but not the pop-up notes (".note-body"). The line-height can be increased for both, but decreasing it past a certain point on pop-up notes only decreases the height of the pop-up box and not the space between lines.

There are several things happening here.

  • line-height behaves differently depending on whether the element is display: inline or display: block. For block elements, lines will overlap when the line-height is small. For inline elements, lines won't overlap once line-height decreases past a certain point. Therefore using <font> versus <div> can change the behavior.
  • Danbooru converts newlines to <br> elements. These hidden <br> elements affect the line height.
  • Specifically, <br> elements have different CSS inside embedded notes versus regular notes. In regular notes, there is a .note-body br { line-height: normal; } rule that actually overrides whatever line-height you set on the containing element. If you set line-height: 50% on the parent, then the <br> elements will still be line-height: normal and blow out the spacing.

The last point I would consider a bug, but I'm not sure whether changing it now would mess up existing notes. The workaround is to insert <br style="line-height: 50%"> elements manually so that you can control the line-height. That's a terrible workaround, of course.

A perhaps better way to achieve this vertical text effect is with <p style="writing-mode: vertical-lr; text-orientation: upright; letter-spacing: -0.5em;">Plop</p>. The only problem is that Danbooru doesn't allow text-orientation, so this doesn't work at the moment.

Also there have been some updates to notes that I should list here too:

  • <rtc>, <sub>, <sup>, <hr>, and <wbr> tags are now allowed.
  • All tags can use the style attribute now (previously it was only allowed on a few tags).
  • The list of allowed CSS properties has been updated. See here for the current list.

<sub> and <sup> are used for subscript and superscripts. Formerly this was achieved with vertical-align hacks; these tags should be preferred instead.

<wbr> is used to mark where words should break. This can be useful for marking linebreaks in embedded notes, similar to the soft hyphens previously discussed.

Some other tricks:

  • writing-mode: vertical-rl lets you layout text vertically.
  • word-spacing lets you space out the words in a sentence.
  • letter-spacing lets you space out the letters in a word.
  • perspective lets you achieve a "Star Wars" type skewed text effect (post #2235811, "Yamaxanadu").
  • -webkit-transform, -moz-transform etc prefixes aren't really necessary these days. Plain transform is enough.
  • <span style="white-space: nowrap"> is often used to force text to stay on one line. Two points: 1) <pre> is an easier way to do the same thing, 2) disabling wrapping can and will make your notes too wide for the screen on phones. nowrap should be avoided whenever possible.

Ah, I guess a better example would be a post that doesn't have embedded notes...

post #2764459

The note in the upper right looks very awkward because....

  • The
    issue that evazion mentioned (disabled this in CSS and line-height works as normal)
  • The golden ratio rule employed by the note resizer (just look at all of that wasted white space!!!)

The golden ratio rule is made all the worse by the extra line-height that can't be removed due to the
's...

Edit:

Was able to a adjust the line-height by adding style attributes to the
's in addition to the <div> in post #2764459 (not saved), however, no matter the combination of line-heights chosen, it would always add a scroll bar at the right.

Also, that trick doesn't seem to work on post #2751440, even when manually adding
's to it...?

Updated

The calc() function can be used to perform simple arithmetic operations using any of the units offered in CSS, which can be useful when a desired value is non-static (for whatever reason) but you know the logic to determine its value.

A great example of this is a hack to get embedded notes with backgrounds to vertically fit the note box it's contained in. Now that the content inside of embedded notes scales with image size, you can tell from a preview how many lines of text the content will be in total. As long as the font stays consistent, this number shouldn't change when viewing the same note in a different environment. By using the relative unit em, you can express the distance from the top of your body of text to its vertical center. When doing so, you must consider the value of line-height across this body of text. The default value of line-height on danbooru is currently 125%, so if you haven't overwritten its value then the distance from the top of a body of text to its center is (0.625 * [line-count])em.
For example, half the height of a body of text four lines long would be 2.5em at the default line-height.

You can use a div that contains everything in your note, is the same height as its parent, and has the background you want. Then, align the center of that div with the center of the div containing your content using the calc() function. This will look something like this:

<div style="height:100%; background-color: Chartreuse"><div style="line-height:200%; position: relative; top: calc(50% - 3em)">The rest of your content here. The values used in this example assume 3 lines of text.</div></div>
1 2 3