mirror of
https://github.com/emilk/egui.git
synced 2026-08-31 05:40:03 -04:00
Add control of line height and letter spacing (#3302)
* Add `TextFormat::extra_letter_spacing` * Add control of line height * Add to text layout demo * Move the text layout demo to its own window in the demo app * Fix doclink * Better document points vs pixels * Better documentation and code cleanup
This commit is contained in:
@@ -49,11 +49,6 @@ pub struct GlyphInfo {
|
||||
/// Unit: points.
|
||||
pub ascent: f32,
|
||||
|
||||
/// row height computed from the font metrics.
|
||||
///
|
||||
/// Unit: points.
|
||||
pub row_height: f32,
|
||||
|
||||
/// Texture coordinates.
|
||||
pub uv_rect: UvRect,
|
||||
}
|
||||
@@ -65,7 +60,6 @@ impl Default for GlyphInfo {
|
||||
id: ab_glyph::GlyphId(0),
|
||||
advance_width: 0.0,
|
||||
ascent: 0.0,
|
||||
row_height: 0.0,
|
||||
uv_rect: Default::default(),
|
||||
}
|
||||
}
|
||||
@@ -250,7 +244,7 @@ impl FontImpl {
|
||||
/ self.pixels_per_point
|
||||
}
|
||||
|
||||
/// Height of one row of text. In points
|
||||
/// Height of one row of text in points.
|
||||
#[inline(always)]
|
||||
pub fn row_height(&self) -> f32 {
|
||||
self.height_in_points
|
||||
@@ -312,7 +306,6 @@ impl FontImpl {
|
||||
id: glyph_id,
|
||||
advance_width: advance_width_in_points,
|
||||
ascent: self.ascent,
|
||||
row_height: self.row_height(),
|
||||
uv_rect,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -653,7 +653,7 @@ impl FontsImpl {
|
||||
self.font(font_id).has_glyphs(s)
|
||||
}
|
||||
|
||||
/// Height of one row of text. In points
|
||||
/// Height of one row of text in points.
|
||||
fn row_height(&mut self, font_id: &FontId) -> f32 {
|
||||
self.font(font_id).row_height()
|
||||
}
|
||||
|
||||
@@ -113,11 +113,15 @@ fn layout_section(
|
||||
format,
|
||||
} = section;
|
||||
let font = fonts.font(&format.font_id);
|
||||
let font_height = font.row_height();
|
||||
let line_height = section
|
||||
.format
|
||||
.line_height
|
||||
.unwrap_or_else(|| font.row_height());
|
||||
let extra_letter_spacing = section.format.extra_letter_spacing;
|
||||
|
||||
let mut paragraph = out_paragraphs.last_mut().unwrap();
|
||||
if paragraph.glyphs.is_empty() {
|
||||
paragraph.empty_paragraph_height = font_height; // TODO(emilk): replace this hack with actually including `\n` in the glyphs?
|
||||
paragraph.empty_paragraph_height = line_height; // TODO(emilk): replace this hack with actually including `\n` in the glyphs?
|
||||
}
|
||||
|
||||
paragraph.cursor_x += leading_space;
|
||||
@@ -128,19 +132,20 @@ fn layout_section(
|
||||
if job.break_on_newline && chr == '\n' {
|
||||
out_paragraphs.push(Paragraph::default());
|
||||
paragraph = out_paragraphs.last_mut().unwrap();
|
||||
paragraph.empty_paragraph_height = font_height; // TODO(emilk): replace this hack with actually including `\n` in the glyphs?
|
||||
paragraph.empty_paragraph_height = line_height; // TODO(emilk): replace this hack with actually including `\n` in the glyphs?
|
||||
} else {
|
||||
let (font_impl, glyph_info) = font.glyph_info_and_font_impl(chr);
|
||||
if let Some(font_impl) = font_impl {
|
||||
if let Some(last_glyph_id) = last_glyph_id {
|
||||
paragraph.cursor_x += font_impl.pair_kerning(last_glyph_id, glyph_info.id);
|
||||
paragraph.cursor_x += extra_letter_spacing;
|
||||
}
|
||||
}
|
||||
|
||||
paragraph.glyphs.push(Glyph {
|
||||
chr,
|
||||
pos: pos2(paragraph.cursor_x, f32::NAN),
|
||||
size: vec2(glyph_info.advance_width, glyph_info.row_height),
|
||||
size: vec2(glyph_info.advance_width, line_height),
|
||||
ascent: glyph_info.ascent,
|
||||
uv_rect: glyph_info.uv_rect,
|
||||
section_index,
|
||||
@@ -328,8 +333,12 @@ fn replace_last_glyph_with_overflow_character(
|
||||
};
|
||||
|
||||
let section = &job.sections[last_glyph.section_index as usize];
|
||||
let extra_letter_spacing = section.format.extra_letter_spacing;
|
||||
let font = fonts.font(§ion.format.font_id);
|
||||
let font_height = font.row_height();
|
||||
let line_height = section
|
||||
.format
|
||||
.line_height
|
||||
.unwrap_or_else(|| font.row_height());
|
||||
|
||||
let prev_glyph_id = prev_glyph.map(|prev_glyph| {
|
||||
let (_, prev_glyph_info) = font.glyph_info_and_font_impl(prev_glyph.chr);
|
||||
@@ -338,23 +347,29 @@ fn replace_last_glyph_with_overflow_character(
|
||||
|
||||
// undo kerning with previous glyph
|
||||
let (font_impl, glyph_info) = font.glyph_info_and_font_impl(last_glyph.chr);
|
||||
last_glyph.pos.x -= font_impl
|
||||
.zip(prev_glyph_id)
|
||||
.map(|(font_impl, prev_glyph_id)| font_impl.pair_kerning(prev_glyph_id, glyph_info.id))
|
||||
.unwrap_or_default();
|
||||
last_glyph.pos.x -= extra_letter_spacing
|
||||
+ font_impl
|
||||
.zip(prev_glyph_id)
|
||||
.map(|(font_impl, prev_glyph_id)| {
|
||||
font_impl.pair_kerning(prev_glyph_id, glyph_info.id)
|
||||
})
|
||||
.unwrap_or_default();
|
||||
|
||||
// replace the glyph
|
||||
last_glyph.chr = overflow_character;
|
||||
let (font_impl, glyph_info) = font.glyph_info_and_font_impl(last_glyph.chr);
|
||||
last_glyph.size = vec2(glyph_info.advance_width, font_height);
|
||||
last_glyph.size = vec2(glyph_info.advance_width, line_height);
|
||||
last_glyph.uv_rect = glyph_info.uv_rect;
|
||||
last_glyph.ascent = glyph_info.ascent;
|
||||
|
||||
// reapply kerning
|
||||
last_glyph.pos.x += font_impl
|
||||
.zip(prev_glyph_id)
|
||||
.map(|(font_impl, prev_glyph_id)| font_impl.pair_kerning(prev_glyph_id, glyph_info.id))
|
||||
.unwrap_or_default();
|
||||
last_glyph.pos.x += extra_letter_spacing
|
||||
+ font_impl
|
||||
.zip(prev_glyph_id)
|
||||
.map(|(font_impl, prev_glyph_id)| {
|
||||
font_impl.pair_kerning(prev_glyph_id, glyph_info.id)
|
||||
})
|
||||
.unwrap_or_default();
|
||||
|
||||
row.rect.max.x = last_glyph.max_x();
|
||||
|
||||
@@ -474,7 +489,7 @@ fn galley_from_rows(
|
||||
let mut min_x: f32 = 0.0;
|
||||
let mut max_x: f32 = 0.0;
|
||||
for row in &mut rows {
|
||||
let mut row_height = first_row_min_height.max(row.rect.height());
|
||||
let mut line_height = first_row_min_height.max(row.rect.height());
|
||||
let mut row_ascent = 0.0f32;
|
||||
first_row_min_height = 0.0;
|
||||
|
||||
@@ -484,10 +499,10 @@ fn galley_from_rows(
|
||||
.iter()
|
||||
.max_by(|a, b| a.size.y.partial_cmp(&b.size.y).unwrap())
|
||||
{
|
||||
row_height = glyph.size.y;
|
||||
line_height = glyph.size.y;
|
||||
row_ascent = glyph.ascent;
|
||||
}
|
||||
row_height = point_scale.round_to_pixel(row_height);
|
||||
line_height = point_scale.round_to_pixel(line_height);
|
||||
|
||||
// Now positions each glyph:
|
||||
for glyph in &mut row.glyphs {
|
||||
@@ -503,11 +518,11 @@ fn galley_from_rows(
|
||||
}
|
||||
|
||||
row.rect.min.y = cursor_y;
|
||||
row.rect.max.y = cursor_y + row_height;
|
||||
row.rect.max.y = cursor_y + line_height;
|
||||
|
||||
min_x = min_x.min(row.rect.min.x);
|
||||
max_x = max_x.max(row.rect.max.x);
|
||||
cursor_y += row_height;
|
||||
cursor_y += line_height;
|
||||
cursor_y = point_scale.round_to_pixel(cursor_y);
|
||||
}
|
||||
|
||||
|
||||
@@ -221,11 +221,28 @@ impl std::hash::Hash for LayoutSection {
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
#[derive(Clone, Debug, Hash, PartialEq)]
|
||||
/// Formatting option for a section of text.
|
||||
#[derive(Clone, Debug, PartialEq)]
|
||||
#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
|
||||
pub struct TextFormat {
|
||||
pub font_id: FontId,
|
||||
|
||||
/// Extra spacing between letters, in points.
|
||||
///
|
||||
/// Default: 0.0.
|
||||
///
|
||||
/// For even text it is recommended you round this to an even number of _pixels_.
|
||||
pub extra_letter_spacing: f32,
|
||||
|
||||
/// Explicit line height of the text in points.
|
||||
///
|
||||
/// This is the distance between the bottom row of two subsequent lines of text.
|
||||
///
|
||||
/// If `None` (the default), the line height is determined by the font.
|
||||
///
|
||||
/// For even text it is recommended you round this to an even number of _pixels_.
|
||||
pub line_height: Option<f32>,
|
||||
|
||||
/// Text color
|
||||
pub color: Color32,
|
||||
|
||||
@@ -248,6 +265,8 @@ impl Default for TextFormat {
|
||||
fn default() -> Self {
|
||||
Self {
|
||||
font_id: FontId::default(),
|
||||
extra_letter_spacing: 0.0,
|
||||
line_height: None,
|
||||
color: Color32::GRAY,
|
||||
background: Color32::TRANSPARENT,
|
||||
italics: false,
|
||||
@@ -258,6 +277,34 @@ impl Default for TextFormat {
|
||||
}
|
||||
}
|
||||
|
||||
impl std::hash::Hash for TextFormat {
|
||||
#[inline]
|
||||
fn hash<H: std::hash::Hasher>(&self, state: &mut H) {
|
||||
let Self {
|
||||
font_id,
|
||||
extra_letter_spacing,
|
||||
line_height,
|
||||
color,
|
||||
background,
|
||||
italics,
|
||||
underline,
|
||||
strikethrough,
|
||||
valign,
|
||||
} = self;
|
||||
font_id.hash(state);
|
||||
crate::f32_hash(state, *extra_letter_spacing);
|
||||
if let Some(line_height) = *line_height {
|
||||
crate::f32_hash(state, line_height);
|
||||
}
|
||||
color.hash(state);
|
||||
background.hash(state);
|
||||
italics.hash(state);
|
||||
underline.hash(state);
|
||||
strikethrough.hash(state);
|
||||
valign.hash(state);
|
||||
}
|
||||
}
|
||||
|
||||
impl TextFormat {
|
||||
#[inline]
|
||||
pub fn simple(font_id: FontId, color: Color32) -> Self {
|
||||
@@ -486,10 +533,12 @@ pub struct Glyph {
|
||||
/// `ascent` value from the font
|
||||
pub ascent: f32,
|
||||
|
||||
/// Advance width and font row height.
|
||||
/// Advance width and line height.
|
||||
///
|
||||
/// Does not control the visual size of the glyph (see [`Self::uv_rect`] for that).
|
||||
pub size: Vec2,
|
||||
|
||||
/// Position of the glyph in the font texture, in texels.
|
||||
/// Position and size of the glyph in the font texture, in texels.
|
||||
pub uv_rect: UvRect,
|
||||
|
||||
/// Index into [`LayoutJob::sections`]. Decides color etc.
|
||||
|
||||
Reference in New Issue
Block a user