Skip to content

fix(frontend): tweak text rendering#15860

Draft
syuilo wants to merge 3 commits intodevelopfrom
tweak-text-rendering
Draft

fix(frontend): tweak text rendering#15860
syuilo wants to merge 3 commits intodevelopfrom
tweak-text-rendering

Conversation

@syuilo
Copy link
Copy Markdown
Member

@syuilo syuilo commented Apr 17, 2025

What

  • 一行で表示されることが意図されている箇所はline-heightを1にし、フォントサイズとレンダリングされる高さを一致させる
    • 当該箇所が多いためデフォルトでこの設定と見做す
      • Webデザイン業界ではたまにある
  • 複数行で表示されることが意図されている箇所は従来のline-heightを使用

今まで複数行のテキストをレンダリングしていた個所を洗い出し専用のクラス_mtを付与する作業が若干面倒(まあ抜けがあったとして大きな問題があるというわけではないけども)

※とはいえそこが一行表示なのか複数行表示なのか明示するように改修することは、このPRに関わらずいつかはやらなければならないこと

Why

要素の高さに小数点が含まれると、要素が隣り合ったときに1px分の隙間がレンダリングされてしまうなどのグリッチを引き起こすので、それを防止

高さが小数だとレンダリングパフォーマンスに悪影響を及ぼす可能性もある(未検証)

また、フォントサイズ = 高さという前提があればデザインがしやすくなるほか、環境によってデザインが崩れることを防止できる

Additional info (optional)

Checklist

  • Read the contribution guide
  • Test working in a local environment
  • (If needed) Add story of storybook
  • (If needed) Update CHANGELOG.md
  • (If possible) Add tests

@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 17, 2025

Codecov Report

❌ Patch coverage is 51.21951% with 20 lines in your changes missing coverage. Please review.
✅ Project coverage is 16.11%. Comparing base (96de18b) to head (07bc5d7).
⚠️ Report is 1320 commits behind head on develop.

Files with missing lines Patch % Lines
...ges/frontend/src/components/MkVisibilityPicker.vue 0.00% 4 Missing ⚠️
packages/frontend/src/components/MkSuperMenu.vue 0.00% 3 Missing ⚠️
packages/frontend/src/components/MkFolder.vue 0.00% 2 Missing ⚠️
...ackages/frontend/src/components/MkNoteDetailed.vue 0.00% 2 Missing ⚠️
packages/frontend/src/pages/announcement.vue 0.00% 2 Missing ⚠️
packages/frontend/src/components/MkCodeEditor.vue 0.00% 1 Missing ⚠️
packages/frontend/src/components/MkColorInput.vue 0.00% 1 Missing ⚠️
...ckages/frontend/src/components/MkFeatureBanner.vue 0.00% 1 Missing ⚠️
...ackages/frontend/src/components/MkNotification.vue 0.00% 1 Missing ⚠️
packages/frontend/src/components/form/slot.vue 0.00% 1 Missing ⚠️
... and 2 more
Additional details and impacted files
@@             Coverage Diff              @@
##           develop   #15860       +/-   ##
============================================
- Coverage    42.54%   16.11%   -26.44%     
============================================
  Files         1685      812      -873     
  Lines       170752    72913    -97839     
  Branches      4222     1341     -2881     
============================================
- Hits         72654    11749    -60905     
+ Misses       97604    60722    -36882     
+ Partials       494      442       -52     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@syuilo
Copy link
Copy Markdown
Member Author

syuilo commented Apr 17, 2025

労力に見合うメリットが無いからやめるかも

@syuilo
Copy link
Copy Markdown
Member Author

syuilo commented Apr 17, 2025

text-box-trimという素晴らしいプロパティがあった

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

packages/frontend Client side specific issue/PR

Projects

Development

Successfully merging this pull request may close these issues.

1 participant