LadybirdBrowser/ladybird
1
1
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-09-19 01:08:18 +03:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Position the ListItemMarkers according to their width

Browse Source 
Previously they were positioned with a fixed offset. However this lead
to wider markers with more than one character to collide with the
element itself.
Now the ListItemMarkerBox generates and stores the appropriate String
in its constructor and sets its own width according to that.
The ListItemBox then lays out the Marker taking this width into
account.
This also made the painting a lot easier since we don't generate the
needed Strings every time we repaint, just once.
This commit is contained in:
Tobias Christiansen 2021-05-11 22:32:54 +02:00 committed by Linus Groh
parent a51cee748f
commit e7498bb918
Notes: sideshowbarker 2024-07-18 18:18:50 +09:00 
Author: https://github.com/TobyAsE
Commit: https://github.com/SerenityOS/serenity/commit/e7498bb918a
Pull-request: https://github.com/SerenityOS/serenity/pull/7046
Issue: https://github.com/SerenityOS/serenity/issues/6567
3 changed files with 42 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Userland/Libraries/LibWeb/Layout/ListItemBox.cpp
View File

@ -37,8 +37,8 @@ void ListItemBox::layout_marker()
append_child(*m_marker);
}
m_marker->set_offset(-8, 0);
m_marker->set_size(4, line_height());
m_marker->set_offset(-(m_marker->width() + 4), 0);
m_marker->set_height(line_height());
}
}

50
Userland/Libraries/LibWeb/Layout/ListItemMarkerBox.cpp
View File

@ -16,6 +16,40 @@ ListItemMarkerBox::ListItemMarkerBox(DOM::Document& document, CSS::ListStyleType
, m_list_style_type(style_type)
, m_index(index)
{
switch (m_list_style_type) {
case CSS::ListStyleType::Square:
case CSS::ListStyleType::Circle:
case CSS::ListStyleType::Disc:
break;
case CSS::ListStyleType::Decimal:
m_text = String::formatted("{}.", m_index);
break;
case CSS::ListStyleType::DecimalLeadingZero:
// This is weird, but in accordance to spec.
m_text = m_index < 10 ? String::formatted("0{}.", m_index) : String::formatted("{}.", m_index);
break;
case CSS::ListStyleType::LowerAlpha:
case CSS::ListStyleType::LowerLatin:
m_text = String::bijective_base_from(m_index).to_lowercase();
break;
case CSS::ListStyleType::UpperAlpha:
case CSS::ListStyleType::UpperLatin:
m_text = String::bijective_base_from(m_index);
break;
case CSS::ListStyleType::None:
break;
default:
VERIFY_NOT_REACHED();
}
if (m_text.is_null()) {
set_width(4);
return;
}
auto text_width = font().width(m_text);
set_width(text_width);
}
ListItemMarkerBox::~ListItemMarkerBox()
@ -47,26 +81,18 @@ void ListItemMarkerBox::paint(PaintContext& context, PaintPhase phase)
marker_rect.center_within(enclosing);
context.painter().draw_ellipse_intersecting(marker_rect, color);
break;
case CSS::ListStyleType::Decimal:
context.painter().draw_text(enclosing, String::formatted("{}.", m_index), Gfx::TextAlignment::Center);
break;
case CSS::ListStyleType::Disc:
context.painter().fill_ellipse(marker_rect, color);
break;
case CSS::ListStyleType::Decimal:
case CSS::ListStyleType::DecimalLeadingZero:
// This is weird, but in accordance to spec.
context.painter().draw_text(
enclosing,
m_index < 10 ? String::formatted("0{}.", m_index) : String::formatted("{}.", m_index),
Gfx::TextAlignment::Center);
break;
case CSS::ListStyleType::LowerAlpha:
case CSS::ListStyleType::LowerLatin:
context.painter().draw_text(enclosing, String::bijective_base_from(m_index).to_lowercase(), Gfx::TextAlignment::Center);
break;
case CSS::ListStyleType::UpperAlpha:
case CSS::ListStyleType::UpperLatin:
context.painter().draw_text(enclosing, String::bijective_base_from(m_index), Gfx::TextAlignment::Center);
if (m_text.is_null())
break;
context.painter().draw_text(enclosing, m_text, Gfx::TextAlignment::Center);
break;
case CSS::ListStyleType::None:
return;

2
Userland/Libraries/LibWeb/Layout/ListItemMarkerBox.h
View File

@ -21,6 +21,8 @@ public:
private:
CSS::ListStyleType m_list_style_type { CSS::ListStyleType::None };
size_t m_index;
String m_text {};
};
}