DEV/flutter_flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2026-02-20 02:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

[web] Implement font features in the html renderer (flutter/engine#25088)

Browse Source
This commit is contained in:
Mouad Debbar 2021-03-23 12:15:26 -07:00 committed by GitHub
parent 82bdfffbd7
commit 586df25fe1
3 changed files with 69 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
engine/src/flutter/lib/web_ui/dev/goldens_lock.yaml
View File

@ -1,2 +1,2 @@
repository: https://github.com/flutter/goldens.git
revision: b86dc52ac1c8725ea17c50d9a7704687b5252833
revision: c5f999871e83142afb82a636e97bd67a62789c6e

21
engine/src/flutter/lib/web_ui/lib/src/engine/text/paragraph.dart
View File

@ -1825,6 +1825,11 @@ void _applyTextStyleToElement({
}
}
}
final List<ui.FontFeature>? fontFeatures = style._fontFeatures;
if (fontFeatures != null && fontFeatures.isNotEmpty) {
cssStyle.fontFeatureSettings = _fontFeatureListToCss(fontFeatures);
}
}
html.Element _createPlaceholderElement({
@ -1894,6 +1899,22 @@ String _shadowListToCss(List<ui.Shadow> shadows) {
return sb.toString();
}
String _fontFeatureListToCss(List<ui.FontFeature> fontFeatures) {
assert(fontFeatures.isNotEmpty);
// For more details, see:
// * https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
StringBuffer sb = new StringBuffer();
for (int i = 0, len = fontFeatures.length; i < len; i++) {
if (i != 0) {
sb.write(',');
}
ui.FontFeature fontFeature = fontFeatures[i];
sb.write('"${fontFeature.feature}" ${fontFeature.value}');
}
return sb.toString();
}
/// Applies background color properties in text style to paragraph or span
/// elements.
void _applyTextBackgroundToElement({

47
engine/src/flutter/lib/web_ui/test/golden_tests/engine/canvas_paragraph/general_test.dart
View File

@ -312,4 +312,51 @@ void testMain() async {
canvas.drawParagraph(paragraph, Offset.zero);
return takeScreenshot(canvas, bounds, 'canvas_paragraph_decoration');
});
void testFontFeatures(EngineCanvas canvas) {
final String text = 'Aa Bb Dd Ee Ff';
final FontFeature enableSmallCaps = FontFeature('smcp');
final FontFeature disableSmallCaps = FontFeature('smcp', 0);
final CanvasParagraph paragraph = rich(
ParagraphStyle(fontFamily: 'Roboto'),
(CanvasParagraphBuilder builder) {
builder.pushStyle(EngineTextStyle.only(
height: 2,
color: black,
fontSize: 32.0,
));
builder.addText('Small Caps: ');
builder.pushStyle(EngineTextStyle.only(
color: blue,
fontFeatures: <FontFeature>[enableSmallCaps],
));
builder.addText('$text\n');
// Make sure disabling a font feature also works.
builder.pushStyle(EngineTextStyle.only(
color: black,
fontFeatures: <FontFeature>[disableSmallCaps],
));
builder.addText('Normal Caps: ');
builder.pushStyle(EngineTextStyle.only(
color: blue,
));
builder.addText(text);
},
)..layout(constrain(double.infinity));
canvas.drawParagraph(paragraph, Offset.zero);
}
test('font features', () {
const Rect bounds = Rect.fromLTWH(0, 0, 500, 300);
final canvas = BitmapCanvas(bounds, RenderStrategy());
testFontFeatures(canvas);
return takeScreenshot(canvas, bounds, 'canvas_paragraph_font_features');
});
test('font features (DOM)', () {
const Rect bounds = Rect.fromLTWH(0, 0, 500, 300);
final canvas = DomCanvas(domRenderer.createElement('flt-picture'));
testFontFeatures(canvas);
return takeScreenshot(canvas, bounds, 'canvas_paragraph_font_features_dom');
});
}