skyler
/
egui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve text rendering in light mode (#7290) 

This changes how we convert glyph coverage to alpha (and ultimately a
color), but only in light mode.

This is a bit of a hack, because it doesn't fix dark-on-light text in
_dark mode_ (if you have any), but for the common case this PR is a huge
improvement.

You can also tweak this yourself now using
`Visuals::text_alpha_from_coverage` or from the UI (bottom of the
image):


![image](https://github.com/user-attachments/assets/350210d4-c0bb-44b6-84cc-47c2e9d4b9f0)



## Before / After

![widget_gallery_light_x1](https://github.com/user-attachments/assets/21f5a2a0-6b4e-4985-b17f-cd1c7cc01b46)
![widget_gallery_light_x1](https://github.com/user-attachments/assets/5dfec04a-c81c-43ef-8d86-fc48ef7958f1)


## Black text Before/after
If you think the text above looks too weak, it's only because of the
default text color. Here's how it looks like with perfectly `#000000`
black text:


![image](https://github.com/user-attachments/assets/56a4a4f3-c431-4991-b941-a566a4ae94ed)
![Screenshot 2025-07-02 at 13 59
30](https://github.com/user-attachments/assets/df5a91ad-0bb8-4a0f-81a2-50852e7556c1)
This commit is contained in:
Emil Ernerfeldt 2025-07-02 14:58:37 +02:00 committed by GitHub
parent 8bedaf6e5b
commit dc79998044
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 177 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
crates/egui-wgpu/src/renderer.rs
View File

@ -571,7 +571,11 @@ impl Renderer {
"Mismatch between texture size and texel count"
);
profiling::scope!("font -> sRGBA");
Cow::Owned(image.srgba_pixels(None).collect::<Vec<epaint::Color32>>())
Cow::Owned(
image
.srgba_pixels(Default::default())
.collect::<Vec<epaint::Color32>>(),
)
}
};
let data_bytes: &[u8] = bytemuck::cast_slice(data_color32.as_slice());

56
crates/egui/src/context.rs
View File

@ -1876,6 +1876,16 @@ impl Context {
}
}
pub(crate) fn reset_font_atlas(&self) {
let pixels_per_point = self.pixels_per_point();
let fonts = self.read(|ctx| {
ctx.fonts
.get(&pixels_per_point.into())
.map(|current_fonts| current_fonts.lock().fonts.definitions().clone())
});
self.memory_mut(|mem| mem.new_font_definitions = fonts);
}
/// Tell `egui` which fonts to use.
///
/// The default `egui` fonts only support latin and cyrillic alphabets,
@ -2011,10 +2021,19 @@ impl Context {
/// You can use [`Ui::style_mut`] to change the style of a single [`Ui`].
pub fn set_style_of(&self, theme: Theme, style: impl Into<Arc<Style>>) {
let style = style.into();
self.options_mut(|opt| match theme {
Theme::Dark => opt.dark_style = style,
Theme::Light => opt.light_style = style,
let mut recreate_font_atlas = false;
self.options_mut(|opt| {
let dest = match theme {
Theme::Dark => &mut opt.dark_style,
Theme::Light => &mut opt.light_style,
};
recreate_font_atlas =
dest.visuals.text_alpha_from_coverage != style.visuals.text_alpha_from_coverage;
*dest = style;
});
if recreate_font_atlas {
self.reset_font_atlas();
}
}
/// The [`crate::Visuals`] used by all subsequent windows, panels etc.
@ -2411,7 +2430,28 @@ impl ContextImpl {
}
// Inform the backend of all textures that have been updated (including font atlas).
let textures_delta = self.tex_manager.0.write().take_delta();
let textures_delta = {
// HACK to get much nicer looking text in light mode.
// This assumes all text is black-on-white in light mode,
// and white-on-black in dark mode, which is not necessarily true,
// but often close enough.
// Of course this fails for cases when there is black-on-white text in dark mode,
// and white-on-black text in light mode.
let text_alpha_from_coverage =
self.memory.options.style().visuals.text_alpha_from_coverage;
let mut textures_delta = self.tex_manager.0.write().take_delta();
for (_, delta) in &mut textures_delta.set {
if let ImageData::Font(font) = &mut delta.image {
delta.image =
ImageData::Color(font.to_color_image(text_alpha_from_coverage).into());
}
}
textures_delta
};
let mut platform_output: PlatformOutput = std::mem::take(&mut viewport.output);
@ -3009,9 +3049,17 @@ impl Context {
options.ui(ui);
let text_alpha_from_coverage_changed =
prev_options.style().visuals.text_alpha_from_coverage
!= options.style().visuals.text_alpha_from_coverage;
if options != prev_options {
self.options_mut(move |o| *o = options);
}
if text_alpha_from_coverage_changed {
ui.ctx().reset_font_atlas();
}
}
fn fonts_tweak_ui(&self, ui: &mut Ui) {

6
crates/egui/src/memory/mod.rs
View File

@ -408,11 +408,11 @@ impl Options {
.show(ui, |ui| {
theme_preference.radio_buttons(ui);
std::sync::Arc::make_mut(match theme {
let style = std::sync::Arc::make_mut(match theme {
Theme::Dark => dark_style,
Theme::Light => light_style,
})
.ui(ui);
});
style.ui(ui);
});
CollapsingHeader::new("✒ Painting")

46
crates/egui/src/style.rs
View File

@ -3,7 +3,7 @@
#![allow(clippy::if_same_then_else)]
use emath::Align;
use epaint::{CornerRadius, Shadow, Stroke, text::FontTweak};
use epaint::{AlphaFromCoverage, CornerRadius, Shadow, Stroke, text::FontTweak};
use std::{collections::BTreeMap, ops::RangeInclusive, sync::Arc};
use crate::{
@ -921,6 +921,9 @@ pub struct Visuals {
/// this is more to provide a convenient summary of the rest of the settings.
pub dark_mode: bool,
/// ADVANCED: Controls how we render text.
pub text_alpha_from_coverage: AlphaFromCoverage,
/// Override default text color for all text.
///
/// This is great for setting the color of text for any widget.
@ -1374,6 +1377,7 @@ impl Visuals {
pub fn dark() -> Self {
Self {
dark_mode: true,
text_alpha_from_coverage: AlphaFromCoverage::DARK_MODE_DEFAULT,
override_text_color: None,
weak_text_alpha: 0.6,
weak_text_color: None,
@ -1436,6 +1440,7 @@ impl Visuals {
pub fn light() -> Self {
Self {
dark_mode: false,
text_alpha_from_coverage: AlphaFromCoverage::LIGHT_MODE_DEFAULT,
widgets: Widgets::light(),
selection: Selection::light(),
hyperlink_color: Color32::from_rgb(0, 155, 255),
@ -2068,6 +2073,7 @@ impl Visuals {
pub fn ui(&mut self, ui: &mut crate::Ui) {
let Self {
dark_mode,
text_alpha_from_coverage,
override_text_color: _,
weak_text_alpha,
weak_text_color,
@ -2216,6 +2222,10 @@ impl Visuals {
"Weak text color",
);
});
ui.add_space(4.0);
text_alpha_from_coverage_ui(ui, text_alpha_from_coverage);
});
ui.collapsing("Text cursor", |ui| {
@ -2326,6 +2336,40 @@ impl Visuals {
}
}
fn text_alpha_from_coverage_ui(ui: &mut Ui, text_alpha_from_coverage: &mut AlphaFromCoverage) {
let mut dark_mode_special =
*text_alpha_from_coverage == AlphaFromCoverage::TwoCoverageMinusCoverageSq;
ui.horizontal(|ui| {
ui.label("Text rendering:");
ui.checkbox(&mut dark_mode_special, "Dark-mode special");
if dark_mode_special {
*text_alpha_from_coverage = AlphaFromCoverage::TwoCoverageMinusCoverageSq;
} else {
let mut gamma = match text_alpha_from_coverage {
AlphaFromCoverage::Linear => 1.0,
AlphaFromCoverage::Gamma(gamma) => *gamma,
AlphaFromCoverage::TwoCoverageMinusCoverageSq => 0.5, // approximately the same
};
ui.add(
DragValue::new(&mut gamma)
.speed(0.01)
.range(0.1..=4.0)
.prefix("Gamma: "),
);
if gamma == 1.0 {
*text_alpha_from_coverage = AlphaFromCoverage::Linear;
} else {
*text_alpha_from_coverage = AlphaFromCoverage::Gamma(gamma);
}
}
});
}
impl TextCursorStyle {
fn ui(&mut self, ui: &mut Ui) {
let Self {

4
crates/egui_demo_lib/tests/snapshots/widget_gallery_light_x1.png
View File

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:2198a523fb986e90fa3a42f047499f5b1c791075e7c3822b45509d9880073966
size 60272
oid sha256:34d85b6015112ea2733f7246f8daabfb9d983523e187339e4d26bfc1f3a3bba3
size 59460

4
crates/egui_demo_lib/tests/snapshots/widget_gallery_light_x2.png
View File

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:7bb371a477f58c90ac72aed45a081f3177ea968f090e3739bdb5044ade29f4be
size 144295
oid sha256:4f51d75010cd1213daa6a1282d352655e64b69da7bca478011ea055a2e5349bc
size 146500

2
crates/egui_glow/src/painter.rs
View File

@ -544,7 +544,7 @@ impl Painter {
let data: Vec<u8> = {
profiling::scope!("font -> sRGBA");
image
.srgba_pixels(None)
.srgba_pixels(Default::default())
.flat_map(|a| a.to_array())
.collect()
};

88
crates/epaint/src/image.rs
View File

@ -318,6 +318,59 @@ impl std::fmt::Debug for ColorImage {
// ----------------------------------------------------------------------------
/// How to convert font coverage values into alpha and color values.
//
// This whole thing is less than rigorous.
// Ideally we should do this in a shader instead, and use different computations
// for different text colors.
// See https://hikogui.org/2022/10/24/the-trouble-with-anti-aliasing.html for an in-depth analysis.
#[derive(Clone, Copy, Debug, Default, PartialEq)]
#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
pub enum AlphaFromCoverage {
/// `alpha = coverage`.
///
/// Looks good for black-on-white text, i.e. light mode.
///
/// Same as [`Self::Gamma`]`(1.0)`, but more efficient.
Linear,
/// `alpha = coverage^gamma`.
Gamma(f32),
/// `alpha = 2 * coverage - coverage^2`
///
/// This looks good for white-on-black text, i.e. dark mode.
///
/// Very similar to a gamma of 0.5, but produces sharper text.
/// See <https://www.desmos.com/calculator/w0ndf5blmn> for a comparison to gamma=0.5.
#[default]
TwoCoverageMinusCoverageSq,
}
impl AlphaFromCoverage {
/// A good-looking default for light mode (black-on-white text).
pub const LIGHT_MODE_DEFAULT: Self = Self::Linear;
/// A good-looking default for dark mode (white-on-black text).
pub const DARK_MODE_DEFAULT: Self = Self::TwoCoverageMinusCoverageSq;
/// Convert coverage to alpha.
#[inline(always)]
pub fn alpha_from_coverage(&self, coverage: f32) -> f32 {
match self {
Self::Linear => coverage,
Self::Gamma(gamma) => coverage.powf(*gamma),
Self::TwoCoverageMinusCoverageSq => 2.0 * coverage - coverage * coverage,
}
}
#[inline(always)]
pub fn color_from_coverage(&self, coverage: f32) -> Color32 {
let alpha = self.alpha_from_coverage(coverage);
Color32::from_white_alpha(ecolor::linear_u8_from_linear_f32(alpha))
}
}
/// A single-channel image designed for the font texture.
///
/// Each value represents "coverage", i.e. how much a texel is covered by a character.
@ -354,30 +407,21 @@ impl FontImage {
}
/// Returns the textures as `sRGBA` premultiplied pixels, row by row, top to bottom.
///
/// `gamma` should normally be set to `None`.
///
/// If you are having problems with text looking skinny and pixelated, try using a low gamma, e.g. `0.4`.
#[inline]
pub fn srgba_pixels(&self, gamma: Option<f32>) -> impl ExactSizeIterator<Item = Color32> + '_ {
// This whole function is less than rigorous.
// Ideally we should do this in a shader instead, and use different computations
// for different text colors.
// See https://hikogui.org/2022/10/24/the-trouble-with-anti-aliasing.html for an in-depth analysis.
self.pixels.iter().map(move |coverage| {
let alpha = if let Some(gamma) = gamma {
coverage.powf(gamma)
} else {
// alpha = coverage * coverage; // recommended by the article for WHITE text (using linear blending)
pub fn srgba_pixels(
&self,
alpha_from_coverage: AlphaFromCoverage,
) -> impl ExactSizeIterator<Item = Color32> + '_ {
self.pixels
.iter()
.map(move |&coverage| alpha_from_coverage.color_from_coverage(coverage))
}
// The following is recommended by the article for BLACK text (using linear blending).
// Very similar to a gamma of 0.5, but produces sharper text.
// In practice it works well for all text colors (better than a gamma of 0.5, for instance).
// See https://www.desmos.com/calculator/w0ndf5blmn for a visual comparison.
2.0 * coverage - coverage * coverage
};
Color32::from_white_alpha(ecolor::linear_u8_from_linear_f32(alpha))
})
/// Convert this coverage image to a [`ColorImage`].
pub fn to_color_image(&self, alpha_from_coverage: AlphaFromCoverage) -> ColorImage {
profiling::function_scope!();
let pixels = self.srgba_pixels(alpha_from_coverage).collect();
ColorImage::new(self.size, pixels)
}
/// Clone a sub-region as a new image.

2
crates/epaint/src/lib.rs
View File

@ -50,7 +50,7 @@ pub use self::{
color::ColorMode,
corner_radius::CornerRadius,
corner_radius_f32::CornerRadiusF32,
image::{ColorImage, FontImage, ImageData, ImageDelta},
image::{AlphaFromCoverage, ColorImage, FontImage, ImageData, ImageDelta},
margin::Margin,
margin_f32::*,
mesh::{Mesh, Mesh16, Vertex},