Posted under General
issue #2985 would allow <ruby> tags to be used in notes. Here's a few more examples of them in action: https://jsfiddle.net/3L4zszzs/2/.
There are a lot of intricacies with these tags described in https://www.w3.org/TR/css-ruby-1/ that I haven't looked into too deeply. Basic usage seems to work okay though.
<ruby> tags are now available for marking up furigana. Again, a simple example:
<ruby><rb>漢</rb><rt>Kan</rt><rb>字</rb><rt>ji</rt></ruby>
Make sure you do it on one line. If you insert linebreaks between the tags then things will get thrown off.
Not sure how often this is needed, but there you go. Pinging some translators for general awareness: @Laethiel, @NWSiaCB, @kittey, @Moonspeaker, @Paracite.
evazion said:
<ruby>tags are now available for marking up furigana. Again, a simple example:
<ruby><rb>漢</rb><rt>Kan</rt><rb>字</rb><rt>ji</rt></ruby>Make sure you do it on one line. If you insert linebreaks between the tags then things will get thrown off.
Not sure how often this is needed, but there you go. Pinging some translators for general awareness: @Laethiel, @NWSiaCB, @kittey, @Moonspeaker, @Paracite.
Oooh, swanky, thanky. Have to remember that one.
Oh boy, a lot of complex stuff...
evazion said:
These look like a few of the most common things:
- background: black;
- white-space: nowrap;
- font-variant: small-caps;
- text-align: center;
- margin: -4px; padding: 4px;
I notice some things frequently used in combination too, like making a 4koma title that's centered, nowrapped, and large text. It could make sense to have classes for these things as well, so instead of something like `<span class="center nowrap big">Chibi Miku-san</span>`, you could say `<h1 class="title">Chibi Miku-san</h1>` to apply a common set of styles for comic titles.
I think it's worth noting that I generally don't make up CSS code on the fly. I don't even really know CSS code, I generally just crib it wholesale from where I see others, like Moonspeaker, use their own, and I just keep a few tabs with samples of frequently-used code I can copy-paste. Therefore, seeing particular things in combination is not at all surprising. For example, I just keep this image open because it has three different text effects I frequently use that lets me copy-paste effects I can give some minor edits to (like color or background) to give the effect I want. (This would be a good example of really going to town with the CSS.)
I would, actually, like to ask if there is a way to make it so there isn't a line break after closing particular styles? That last example I listed is a good example, since changing colors basically forces a linebreak, regardless of what it does to the formatting.
NWSiaCB said:
I would, actually, like to ask if there is a way to make it so there isn't a line break after closing particular styles? That last example I listed is a good example, since changing colors basically forces a linebreak, regardless of what it does to the formatting.
It's because you were using "p" elements. "p" elements force a carriage return. Besides that, you can use "span" or "font" inside a "p" or "div" element to change colors or styles.
I fixed that last example for you.
Updated
BrokenEagle98 said:
It's because you were using "p" elements. "p" elements force a carriage return. Besides that, you can use "span" or "font" inside a "p" or "div" element to change colors.
Edit:
I fixed that last example for you.
That's funny, I used div style before, and still had the same problem.
BrokenEagle98 said:
You should use <div> for overall styles of a note, and then use <span> elements to set the style you want for individual elements.
No, I mean, there's a linebreak even after changing to <div> as a style, just the same as <p>, so it doesn't seem to make a difference. (Two linebreaks if I don't keep the next line on the same line as the </div>.)
NWSiaCB said:
No, I mean, there's a linebreak even after changing to <div> as a style, just the same as <p>, so it doesn't seem to make a difference. (Two linebreaks if I don't keep the next line on the same line as the </div>.)
Both <p> and <div> are block elements that result in a linebreak being added after them. If you don’t want the linebreak, you should instead use the <span> tag, which is an inline element.
NWSiaCB said:
I don't even really know CSS code, I generally just crib it wholesale from where I see others […] use their own[…].
I guess that’s why you and others keep using deprecated tags like , , and <font> instead of doing that with CSS. :-/
evazion said:
I guess that’s why you and others keep using deprecated tags like , , and <font> instead of doing that with CSS. :-/
and are a lot shorter and easier to use than something like <span style="font-weight:bold">. I've basically gotten them down to reflexive memory, at this point, while I have to go back and reference something to make sure I'm doing <span style> right.
NWSiaCB said:
and are a lot shorter and easier to use than something like <span style="font-weight:bold">. I've basically gotten them down to reflexive memory, at this point, while I have to go back and reference something to make sure I'm doing <span style> right.
Agree... and match with [b] and [i] from DText, and since I use both frequently, it's just easier to use them as is instead of using the CSS styling.
I've been trying to apply <ruby> tags to post #862945, but making the main text larger causes the ruby text to overlap it. The line-height tags (div or span) don't appear to affect the ruby's vertical position. What am I doing wrong?
evazion said:
It renders correctly in Chrome but not in Firefox. I don't know why they render it differently. It's fixable with
<rt style="padding-bottom: 1em;">...</rt>, except Danbooru's HTML/CSS filters currently disallow usingstyleattributes on<rt>tags.
Well, darn it. Okay, thanks for clarifying that it's just a Firefox thing, at least.
hazknight said:
From what I could understand, you're not supposed to change the font size of only the
<rb>, since the<rt>will float above it based on the height of<ruby>I've played around with it and added the
<rt>above an empty<rt/>, it shows up fine in Firefox and Chrome.
Thanks for that. Does it make a difference that you added <rt/> instead of </rt>?
Thought I'd throw this problem out there, as it's been bothering me for a while but I haven't been able to figure it out.
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.
Examples:
post #2662628, post #2552248, other examples
Is there a way to fix the above, and if so, what does it require?
