LibWeb: Improvements to font lookup

Parse out the font-family, font-size and font-weight values from CSS
and use them to perform a kinda-best-effort lookup against the system
font library.

We also now handle standard font names like "sans-serif", "monospace"
and others.
This commit is contained in:
Andreas Kling 2020-12-14 15:56:01 +01:00
parent 861d22838d
commit 08517daa5a
Notes: sideshowbarker 2024-07-19 00:52:41 +09:00
5 changed files with 216 additions and 129 deletions

View File

@ -1,5 +1,5 @@
html {
font-family: Katica;
font-family: sans-serif;
}
head,
@ -18,6 +18,7 @@ body {
h1,
h2 {
font-family: Pebbleton;
font-size: 14px;
font-weight: bold;
}
@ -29,14 +30,14 @@ h6 {
}
pre {
font-family: Csilla;
font-family: monospace;
margin-bottom: 8px;
margin-top: 8px;
white-space: pre;
}
code {
font-family: Csilla;
font-family: monospace;
}
u,

View File

@ -71,118 +71,117 @@ bool ParsingContext::in_quirks_mode() const
}
static CSS::ValueID value_id_for_palette_string(const StringView& string)
static Optional<CSS::ValueID> value_id_for_palette_string(const StringView& string)
{
if (string == "desktop-background")
if (string.equals_ignoring_case("desktop-background"))
return CSS::ValueID::VendorSpecificPaletteDesktopBackground;
else if (string == "active-window-border1")
if (string.equals_ignoring_case("active-window-border1"))
return CSS::ValueID::VendorSpecificPaletteActiveWindowBorder1;
else if (string == "active-window-border2")
if (string.equals_ignoring_case("active-window-border2"))
return CSS::ValueID::VendorSpecificPaletteActiveWindowBorder2;
else if (string == "active-window-title")
if (string.equals_ignoring_case("active-window-title"))
return CSS::ValueID::VendorSpecificPaletteActiveWindowTitle;
else if (string == "inactive-window-border1")
if (string.equals_ignoring_case("inactive-window-border1"))
return CSS::ValueID::VendorSpecificPaletteInactiveWindowBorder1;
else if (string == "inactive-window-border2")
if (string.equals_ignoring_case("inactive-window-border2"))
return CSS::ValueID::VendorSpecificPaletteInactiveWindowBorder2;
else if (string == "inactive-window-title")
if (string.equals_ignoring_case("inactive-window-title"))
return CSS::ValueID::VendorSpecificPaletteInactiveWindowTitle;
else if (string == "moving-window-border1")
if (string.equals_ignoring_case("moving-window-border1"))
return CSS::ValueID::VendorSpecificPaletteMovingWindowBorder1;
else if (string == "moving-window-border2")
if (string.equals_ignoring_case("moving-window-border2"))
return CSS::ValueID::VendorSpecificPaletteMovingWindowBorder2;
else if (string == "moving-window-title")
if (string.equals_ignoring_case("moving-window-title"))
return CSS::ValueID::VendorSpecificPaletteMovingWindowTitle;
else if (string == "highlight-window-border1")
if (string.equals_ignoring_case("highlight-window-border1"))
return CSS::ValueID::VendorSpecificPaletteHighlightWindowBorder1;
else if (string == "highlight-window-border2")
if (string.equals_ignoring_case("highlight-window-border2"))
return CSS::ValueID::VendorSpecificPaletteHighlightWindowBorder2;
else if (string == "highlight-window-title")
if (string.equals_ignoring_case("highlight-window-title"))
return CSS::ValueID::VendorSpecificPaletteHighlightWindowTitle;
else if (string == "menu-stripe")
if (string.equals_ignoring_case("menu-stripe"))
return CSS::ValueID::VendorSpecificPaletteMenuStripe;
else if (string == "menu-base")
if (string.equals_ignoring_case("menu-base"))
return CSS::ValueID::VendorSpecificPaletteMenuBase;
else if (string == "menu-base-text")
if (string.equals_ignoring_case("menu-base-text"))
return CSS::ValueID::VendorSpecificPaletteMenuBaseText;
else if (string == "menu-selection")
if (string.equals_ignoring_case("menu-selection"))
return CSS::ValueID::VendorSpecificPaletteMenuSelection;
else if (string == "menu-selection-text")
if (string.equals_ignoring_case("menu-selection-text"))
return CSS::ValueID::VendorSpecificPaletteMenuSelectionText;
else if (string == "window")
if (string.equals_ignoring_case("window"))
return CSS::ValueID::VendorSpecificPaletteWindow;
else if (string == "window-text")
if (string.equals_ignoring_case("window-text"))
return CSS::ValueID::VendorSpecificPaletteWindowText;
else if (string == "button")
if (string.equals_ignoring_case("button"))
return CSS::ValueID::VendorSpecificPaletteButton;
else if (string == "button-text")
if (string.equals_ignoring_case("button-text"))
return CSS::ValueID::VendorSpecificPaletteButtonText;
else if (string == "base")
if (string.equals_ignoring_case("base"))
return CSS::ValueID::VendorSpecificPaletteBase;
else if (string == "base-text")
if (string.equals_ignoring_case("base-text"))
return CSS::ValueID::VendorSpecificPaletteBaseText;
else if (string == "threed-highlight")
if (string.equals_ignoring_case("threed-highlight"))
return CSS::ValueID::VendorSpecificPaletteThreedHighlight;
else if (string == "threed-shadow1")
if (string.equals_ignoring_case("threed-shadow1"))
return CSS::ValueID::VendorSpecificPaletteThreedShadow1;
else if (string == "threed-shadow2")
if (string.equals_ignoring_case("threed-shadow2"))
return CSS::ValueID::VendorSpecificPaletteThreedShadow2;
else if (string == "hover-highlight")
if (string.equals_ignoring_case("hover-highlight"))
return CSS::ValueID::VendorSpecificPaletteHoverHighlight;
else if (string == "selection")
if (string.equals_ignoring_case("selection"))
return CSS::ValueID::VendorSpecificPaletteSelection;
else if (string == "selection-text")
if (string.equals_ignoring_case("selection-text"))
return CSS::ValueID::VendorSpecificPaletteSelectionText;
else if (string == "inactive-selection")
if (string.equals_ignoring_case("inactive-selection"))
return CSS::ValueID::VendorSpecificPaletteInactiveSelection;
else if (string == "inactive-selection-text")
if (string.equals_ignoring_case("inactive-selection-text"))
return CSS::ValueID::VendorSpecificPaletteInactiveSelectionText;
else if (string == "rubber-band-fill")
if (string.equals_ignoring_case("rubber-band-fill"))
return CSS::ValueID::VendorSpecificPaletteRubberBandFill;
else if (string == "rubber-band-border")
if (string.equals_ignoring_case("rubber-band-border"))
return CSS::ValueID::VendorSpecificPaletteRubberBandBorder;
else if (string == "link")
if (string.equals_ignoring_case("link"))
return CSS::ValueID::VendorSpecificPaletteLink;
else if (string == "active-link")
if (string.equals_ignoring_case("active-link"))
return CSS::ValueID::VendorSpecificPaletteActiveLink;
else if (string == "visited-link")
if (string.equals_ignoring_case("visited-link"))
return CSS::ValueID::VendorSpecificPaletteVisitedLink;
else if (string == "ruler")
if (string.equals_ignoring_case("ruler"))
return CSS::ValueID::VendorSpecificPaletteRuler;
else if (string == "ruler-border")
if (string.equals_ignoring_case("ruler-border"))
return CSS::ValueID::VendorSpecificPaletteRulerBorder;
else if (string == "ruler-active-text")
if (string.equals_ignoring_case("ruler-active-text"))
return CSS::ValueID::VendorSpecificPaletteRulerActiveText;
else if (string == "ruler-inactive-text")
if (string.equals_ignoring_case("ruler-inactive-text"))
return CSS::ValueID::VendorSpecificPaletteRulerInactiveText;
else if (string == "text-cursor")
if (string.equals_ignoring_case("text-cursor"))
return CSS::ValueID::VendorSpecificPaletteTextCursor;
else if (string == "focus-outline")
if (string.equals_ignoring_case("focus-outline"))
return CSS::ValueID::VendorSpecificPaletteFocusOutline;
else if (string == "syntax-comment")
if (string.equals_ignoring_case("syntax-comment"))
return CSS::ValueID::VendorSpecificPaletteSyntaxComment;
else if (string == "syntax-number")
if (string.equals_ignoring_case("syntax-number"))
return CSS::ValueID::VendorSpecificPaletteSyntaxNumber;
else if (string == "syntax-string")
if (string.equals_ignoring_case("syntax-string"))
return CSS::ValueID::VendorSpecificPaletteSyntaxString;
else if (string == "syntax-type")
if (string.equals_ignoring_case("syntax-type"))
return CSS::ValueID::VendorSpecificPaletteSyntaxType;
else if (string == "syntax-punctuation")
if (string.equals_ignoring_case("syntax-punctuation"))
return CSS::ValueID::VendorSpecificPaletteSyntaxPunctuation;
else if (string == "syntax-operator")
if (string.equals_ignoring_case("syntax-operator"))
return CSS::ValueID::VendorSpecificPaletteSyntaxOperator;
else if (string == "syntax-keyword")
if (string.equals_ignoring_case("syntax-keyword"))
return CSS::ValueID::VendorSpecificPaletteSyntaxKeyword;
else if (string == "syntax-control-keyword")
if (string.equals_ignoring_case("syntax-control-keyword"))
return CSS::ValueID::VendorSpecificPaletteSyntaxControlKeyword;
else if (string == "syntax-identifier")
if (string.equals_ignoring_case("syntax-identifier"))
return CSS::ValueID::VendorSpecificPaletteSyntaxIdentifier;
else if (string == "syntax-preprocessor-statement")
if (string.equals_ignoring_case("syntax-preprocessor-statement"))
return CSS::ValueID::VendorSpecificPaletteSyntaxPreprocessorStatement;
else if (string == "syntax-preprocessor-value")
if (string.equals_ignoring_case("syntax-preprocessor-value"))
return CSS::ValueID::VendorSpecificPaletteSyntaxPreprocessorValue;
else
return CSS::ValueID::Invalid;
return {};
}
static Optional<Color> parse_css_color(const CSS::ParsingContext&, const StringView& view)
@ -340,7 +339,46 @@ static CSS::Length parse_length(const CSS::ParsingContext& context, const String
static bool takes_integer_value(CSS::PropertyID property_id)
{
return property_id == CSS::PropertyID::ZIndex;
return property_id == CSS::PropertyID::ZIndex || property_id == CSS::PropertyID::FontWeight;
}
static Optional<CSS::ValueID> value_id_from_string(const String& string)
{
// FIXME: Handle all identifiers
// FIXME: Generate this code
if (string.equals_ignoring_case("bold"))
return CSS::ValueID::Bold;
if (string.equals_ignoring_case("bolder"))
return CSS::ValueID::Bolder;
if (string.equals_ignoring_case("large"))
return CSS::ValueID::Large;
if (string.equals_ignoring_case("larger"))
return CSS::ValueID::Larger;
if (string.equals_ignoring_case("lighter"))
return CSS::ValueID::Lighter;
if (string.equals_ignoring_case("medium"))
return CSS::ValueID::Medium;
if (string.equals_ignoring_case("normal"))
return CSS::ValueID::Normal;
if (string.equals_ignoring_case("small"))
return CSS::ValueID::Small;
if (string.equals_ignoring_case("smaller"))
return CSS::ValueID::Smaller;
if (string.equals_ignoring_case("x-large"))
return CSS::ValueID::XLarge;
if (string.equals_ignoring_case("x-small"))
return CSS::ValueID::XSmall;
if (string.equals_ignoring_case("xx-large"))
return CSS::ValueID::XxLarge;
if (string.equals_ignoring_case("xx-small"))
return CSS::ValueID::XxSmall;
if (string.equals_ignoring_case("xxx-large"))
return CSS::ValueID::XxxLarge;
if (string.equals_ignoring_case("-libweb-link"))
return CSS::ValueID::VendorSpecificLink;
if (string.starts_with("-libweb-palette-", CaseSensitivity::CaseInsensitive))
return value_id_for_palette_string(string.substring_view(16, string.length() - 16));
return {};
}
RefPtr<CSS::StyleValue> parse_css_value(const CSS::ParsingContext& context, const StringView& string, CSS::PropertyID property_id)
@ -366,17 +404,14 @@ RefPtr<CSS::StyleValue> parse_css_value(const CSS::ParsingContext& context, cons
if (string.equals_ignoring_case("auto"))
return CSS::LengthStyleValue::create(CSS::Length::make_auto());
auto value_id = value_id_from_string(string);
if (value_id.has_value())
return CSS::IdentifierStyleValue::create(value_id.value());
auto color = parse_css_color(context, string);
if (color.has_value())
return CSS::ColorStyleValue::create(color.value());
if (string == "-libweb-link")
return CSS::IdentifierStyleValue::create(CSS::ValueID::VendorSpecificLink);
else if (string.starts_with("-libweb-palette-")) {
auto value_id = value_id_for_palette_string(string.substring_view(16, string.length() - 16));
return CSS::IdentifierStyleValue::create(value_id);
}
return CSS::StringStyleValue::create(string);
}

View File

@ -25,6 +25,7 @@
*/
#include <LibCore/DirIterator.h>
#include <LibGfx/FontDatabase.h>
#include <LibWeb/CSS/StyleProperties.h>
#include <LibWeb/FontCache.h>
#include <ctype.h>
@ -104,73 +105,108 @@ Color StyleProperties::color_or_fallback(CSS::PropertyID id, const DOM::Document
void StyleProperties::load_font() const
{
auto font_family = string_or_fallback(CSS::PropertyID::FontFamily, "Katica");
auto font_weight = string_or_fallback(CSS::PropertyID::FontWeight, "normal");
auto family_value = string_or_fallback(CSS::PropertyID::FontFamily, "Katica");
auto font_size = property(CSS::PropertyID::FontSize).value_or(IdentifierStyleValue::create(CSS::ValueID::Medium));
auto font_weight = property(CSS::PropertyID::FontWeight).value_or(IdentifierStyleValue::create(CSS::ValueID::Normal));
if (auto cached_font = FontCache::the().get({ font_family, font_weight })) {
m_font = cached_font;
return;
}
auto family_parts = family_value.split(',');
auto family = family_parts[0];
String weight;
if (font_weight == "lighter")
weight = "Thin";
else if (font_weight == "normal")
weight = "Regular";
else if (font_weight == "bold")
weight = "Bold";
else {
dbg() << "Unknown font-weight: " << font_weight;
weight = "";
}
if (family.is_one_of("monospace", "ui-monospace"))
family = "Csilla";
else if (family.is_one_of("serif", "sans-serif", "cursive", "fantasy", "ui-serif", "ui-sans-serif", "ui-rounded"))
family = "Katica";
auto look_for_file = [](const StringView& expected_name) -> String {
// TODO: handle font sizes properly?
Core::DirIterator it { "/res/fonts/", Core::DirIterator::Flags::SkipDots };
while (it.has_next()) {
String name = it.next_path();
if (!name.ends_with(".font"))
continue;
if (!name.starts_with(expected_name))
continue;
// Check that a numeric size immediately
// follows the font name. This prevents,
// for example, matching KaticaBold when
// the regular Katica is requested.
if (!isdigit(name[expected_name.length()]))
continue;
return name;
int weight = 400;
if (font_weight->is_identifier()) {
switch (static_cast<const IdentifierStyleValue&>(*font_weight).id()) {
case CSS::ValueID::Normal:
weight = 400;
break;
case CSS::ValueID::Bold:
weight = 700;
break;
case CSS::ValueID::Lighter:
// FIXME: This should be relative to the parent.
weight = 400;
break;
case CSS::ValueID::Bolder:
// FIXME: This should be relative to the parent.
weight = 700;
break;
default:
break;
}
return {};
};
} else if (font_weight->is_length()) {
// FIXME: This isn't really a length, it's a numeric value..
int font_weight_integer = font_weight->to_length().raw_value();
if (font_weight_integer <= 400)
weight = 400;
if (font_weight_integer <= 700)
weight = 700;
weight = 900;
}
// FIXME: Do this properly, with quote handling etc.
for (auto& font_name : font_family.split(',')) {
font_name = font_name.trim_whitespace();
if (font_name == "monospace")
font_name = "Csilla";
int size = 10;
if (font_size->is_identifier()) {
switch (static_cast<const IdentifierStyleValue&>(*font_size).id()) {
case CSS::ValueID::XxSmall:
case CSS::ValueID::XSmall:
case CSS::ValueID::Small:
case CSS::ValueID::Medium:
// FIXME: Should be based on "user's default font size"
size = 10;
break;
case CSS::ValueID::Large:
case CSS::ValueID::XLarge:
case CSS::ValueID::XxLarge:
case CSS::ValueID::XxxLarge:
// FIXME: Should be based on "user's default font size"
size = 12;
break;
case CSS::ValueID::Smaller:
// FIXME: This should be relative to the parent.
size = 10;
break;
case CSS::ValueID::Larger:
// FIXME: This should be relative to the parent.
size = 12;
break;
auto file_name = look_for_file(String::format("%s%s", font_name.characters(), weight.characters()));
if (file_name.is_null() && weight == "")
file_name = look_for_file(String::format("%sRegular", font_name.characters()));
if (file_name.is_null())
continue;
default:
break;
}
} else if (font_size->is_length()) {
// FIXME: This isn't really a length, it's a numeric value..
int font_size_integer = font_size->to_length().raw_value();
if (font_size_integer <= 10)
size = 10;
else if (font_size_integer <= 12)
size = 12;
else
size = 14;
}
m_font = Gfx::Font::load_from_file(String::format("/res/fonts/%s", file_name.characters()));
FontCache::the().set({ font_name, font_weight }, *m_font);
FontSelector font_selector { family, size, weight };
auto found_font = FontCache::the().get(font_selector);
if (found_font) {
m_font = found_font;
return;
}
if (font_weight == "bold")
m_font = Gfx::Font::default_bold_font();
else
m_font = Gfx::Font::default_font();
// FIXME: This is a hack to stop chewing CPU on sites that use a font we don't have and have a lot of text
// or changes text often. Examples are the Serenity 2nd birthday page and the JS specification.
FontCache::the().set({ font_family, font_weight }, *m_font);
Gfx::FontDatabase::the().for_each_font([&](auto& font) {
if (font.family() == family && font.weight() == weight && font.presentation_size() == size)
found_font = font;
});
if (!found_font) {
dbgln("Font not found: '{}' {} {}", family, size, weight);
found_font = Gfx::Font::default_font();
}
m_font = found_font;
FontCache::the().set(font_selector, *m_font);
}
float StyleProperties::line_height(const Layout::Node& layout_node) const
@ -218,7 +254,7 @@ bool StyleProperties::operator==(const StyleProperties& other) const
auto& other_value = *jt->value;
if (my_value.type() != other_value.type())
return false;
if (my_value.to_string() != other_value.to_string())
if (my_value != other_value)
return false;
}

View File

@ -103,6 +103,20 @@ enum class ValueID {
Right,
Justify,
VendorSpecificCenter,
Bold,
Bolder,
Large,
Larger,
Lighter,
Medium,
Normal,
Small,
Smaller,
XLarge,
XSmall,
XxLarge,
XxSmall,
XxxLarge,
};
enum class Position {

View File

@ -33,18 +33,19 @@
struct FontSelector {
FlyString family;
FlyString weight;
int size { 0 };
int weight { 0 };
bool operator==(const FontSelector& other) const
{
return family == other.family && weight == other.weight;
return family == other.family && size == other.size && weight == other.weight;
}
};
namespace AK {
template<>
struct Traits<FontSelector> : public GenericTraits<FontSelector> {
static unsigned hash(const FontSelector& key) { return pair_int_hash(key.family.hash(), key.weight.hash()); }
static unsigned hash(const FontSelector& key) { return pair_int_hash(pair_int_hash(key.family.hash(), key.weight), key.size); }
};
}