LAPLACE Chat 弹幕姬设置表情大小

B站直播间的表情分为两类，一类是长条状的通用表情，一类是正方形的房间/装扮表情。

通用表情就是一行带图标的文字，高度为60px，B站的处理是显示为一行文字的高度。房间表情一般是一个包含细节的图案，部分带有文字，高度为162px，B站的处理是显示为两行文字的高度（聊天栏和播放器上飘过的表情均为两倍高度）。

LAPLACE Chat 弹幕姬设置表情大小

弹幕姬默认将所有表情都显示为一行文字的高度。这对通用表情没问题，但是房间/装扮表情会变的超级小，以至于难以看清。

LAPLACE Chat 弹幕姬设置表情大小

解决方式就是对方形表情设置两倍行高。LAPLACE Chat默认的样式设置了最大宽高，方形表情的wrapper自带一个额外的emote–bulge类，可让CSS选择器只修改方形表情的大小，避免对长条的通用表情也进行放大。

/* 表情包消息垂直居中对齐 */
.event-type--message.has-emotes {
  /* 使用flex实现居中 */
  display: flex;
  /* 确保长用户名可以正常换行显示表情 */
  flex-wrap: wrap;
  /* 为长用户名换行添加间隙 */
  gap: 5px 0px;
}

/* 设置表情包大小 */
.event-type--message.has-emotes .emote-wrap.emote--bulge .emote {
  /* 为方形表情设置2倍行高的高度 */
  max-height: calc(var(--event-line-height)*2);
}

LAPLACE Chat 弹幕姬设置表情大小

但这一配置仅适用于直接连接（浏览器同步登录），开放平台（幻星）的接口阉割（缺失）了大量数据，用后者进行连接的情况下，所以表情都不带emote–bulge类。

对此我们能做的最多是在保证方形表情显示效果的基础上，对长条的通用表情尽可能地不过分放大。长条的通用表情的比例从1:2到1:4不定，取中间值1:3则相当于宽度为3倍行高。使用阉割后的开放平台接口连接时，最外部的wrapper会带有connection-mode–open-platform类（直连时则变为connection-mode–direct）。我们可以以此补充仅在使用开放平台接口连接时的CSS规则。

/* 表情包消息垂直居中对齐 */
.event-type--message.has-emotes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 0px;
}
.event-type--message.has-emotes .emote-wrap {
  /* 对比例大于1:3而缩小的表情进行垂直居中 */
  vertical-align: middle;
}


/* 设置表情包大小 */
.connection-mode--open-platform .event-type--message.has-emotes .emote-wrap .emote {
  /* 开放平台fallback（数据阉割，通用表情大小不统一） */
  max-height: calc(var(--event-line-height)*2);
  /* 改用3倍宽度来尽可能减少通用表情被放大的程度 */
  max-width: calc(var(--event-line-height)*3);
}
.event-type--message.has-emotes .emote-wrap.emote--bulge .emote {
  /* 浏览器同步登陆模式（尺寸一致） */
  max-height: calc(var(--event-line-height)*2);
}

LAPLACE Chat 弹幕姬设置表情大小