Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

info_density: Sanely restore Zulip-style oversize emoji.

This commit is contained in:
Karl Stolley 2024-06-11 11:05:07 -05:00 committed by Tim Abbott
parent cc3202a1be
commit db5f584684
2 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/styles/app_variables.css
View File

@ -85,6 +85,23 @@
precise heights, and in the case of square elements,
a matching precise width as well. */
--length-line-fitted-block: calc(var(--base-line-height-unitless) * 1em);
/* Emoji elements are allowed to exceed the perfectly-fit
line-height. Classic Zulip emoji sizing is a 20px square
emoji at a 14px font-size, for 1.4286em at 14px/1em. */
--length-line-oversize-block: 1.4286em;
/* To avoid disturbing the flow of text around emoji or other
oversize inline blocks, we calculate a negative margin
adjustment for offsetting the emoji, top and bottom. */
--length-line-oversize-block-margin-adjust: calc(
(
(
min(
var(--base-maximum-block-height-em),
var(--length-line-fitted-block)
)
) - var(--length-line-oversize-block)
) / 2
);
/* Legacy values */
--legacy-body-line-height-unitless: calc(20 / 14);

28
web/styles/rendered_markdown.css
View File

@ -138,22 +138,18 @@
/* Emoji; sized to be easily understood while not overwhelming text. */
.emoji {
/* The box for emoji is kept below a certain maximum, regardless
of more open line-heights. This prevents emoji from sizing
excessively larger than the surrounding text's content area. */
height: calc(
min(
var(--base-maximum-block-height-em),
var(--length-line-fitted-block)
)
);
width: calc(
min(
var(--base-maximum-block-height-em),
var(--length-line-fitted-block)
)
);
/* We set the alignment programmatically, as an em value. */
/* The box for emoji is allowed to be larger than the size of the
line-height. */
height: var(--length-line-oversize-block);
width: var(--length-line-oversize-block);
/* A negative top and bottom margin adjustment allows emoji
to size larger than the size of the line, without disturbing
the surrounding lines of text. */
margin: var(--length-line-oversize-block-margin-adjust) auto;
/* We set the alignment programmatically, as an em value.
Because the negative margins above are equal, top and bottom,
this vertical offset value works without adjustment for
oversize emoji blocks. */
vertical-align: var(--line-fitted-vertical-align-offset-em);
}