Ondersteuning voor kleurenlettertype

In dit onderwerp worden kleurlettertypen beschreven, de ondersteuning ervan in DirectWrite en Direct2D (en een aantal andere frameworks) en hoe u deze in uw app kunt gebruiken.

Wat zijn kleurenlettertypen?

Een glyph heeft standaard een vorm, maar geen intrinsieke kleur. Zowel DirectWrite als Direct2D hebben DrawGlyphRun methoden waarmee glyph-uitvoeringen worden weergegeven door de glyphshapes te vullen met een opgegeven tekstkleur. Voor het gemak verwijzen we hiernaar als monochroom glyph rendering. Alle lettertypen hebben monochrome glyphs. Een kleurenlettertype heeft daarentegen ook kleurweergaven van sommige glyphs. Als u glyphs in kleur wilt weergeven, moet uw app verschillende Glyph-rendering-API's gebruiken (zoals we bespreken), in plaats van de monochrome DrawGlyphRun-methoden aan te roepen.

Kleurlettertypen worden ook wel kleurenlettertypen of chromatische lettertypen genoemd. Ze zijn een lettertypetechnologie waarmee lettertypeontwerpers meerdere kleuren binnen elke glyph kunnen gebruiken. Kleurenlettertypen maken scenario's met meerdere kleuren mogelijk in apps en websites met minder code en krachtigere besturingssysteemondersteuning dan ad-hoctechnieken die zijn geïmplementeerd boven het tekstweergavesysteem.

De lettertypen waarmee de meesten van ons bekend zijn, zijn niet kleurenlettertypen. Dergelijke lettertypen definiëren alleen de vorm van de glyphs die ze bevatten; hetzij met vectorcontouren of monochromatische bitmaps. Tijdens het tekenen vult een tekstweergave de vorm met één kleur (de tekstkleur) die is opgegeven door de app of het document dat wordt weergegeven. Kleurlettertypen bevatten daarentegen kleurinformatie naast shapegegevens. Op sommige manieren kunnen lettertypeontwerpers meerdere kleurenpalletten aanbieden, waardoor het lettertype artistiek kan worden aangepast.

Hier volgt een glyph van het lettertype voor de emojikleur van de Segoe UI. Het symbool wordt aan de linkerkant weergegeven in monochroom en in kleur aan de rechterkant.

Kleurenlettertypen bevatten doorgaans terugvalgegevens voor platforms die deze niet ondersteunen, of voor scenario's waarin de kleurfunctionaliteit is uitgeschakeld. Op deze platforms worden kleurlettertypen weergegeven als gewone monochromatische lettertypen.

Omdat ondersteuning voor kleurenlettertype wordt geïmplementeerd op het niveau van glyph-rendering, heeft dit geen invloed op de tekstindeling. En dat is waar of u de IDWriteTextLayout interface gebruikt of dat u uw eigen algoritme voor tekstindeling implementeert. De toewijzing van tekens aan glyphs en de plaatsing van deze glyphs gebruiken allemaal monochrome glyph-id's en de bijbehorende metrische gegevens. De uitvoer van het tekstindelingsproces is een reeks monochrome glyph-uitvoeringen. En vervolgens kan ondersteuning voor kleurenlettertype worden ingeschakeld door deze monochrome basis te vertalen glyph-uitvoeringen naar kleurglyph-uitvoeringen tijdens de rendering.

Waarom kleurenlettertypen gebruiken?

Ontwerpers en ontwikkelaars hebben in het verleden verschillende technieken gebruikt om tekst met meerdere kleuren te bereiken. Websites gebruiken bijvoorbeeld vaak rasterafbeeldingen in plaats van tekst om rich headers weer te geven. Deze benadering maakt artistieke flexibiliteit mogelijk, maar rasterafbeeldingen kunnen niet goed worden geschaald naar alle weergavegrootten en bieden evenmin dezelfde toegankelijkheidsfuncties als echte tekst. Een andere veelgebruikte techniek is om meerdere monochromatische lettertypen in verschillende lettertypekleuren te overlayen; maar dat vereist doorgaans extra indelingscode om te beheren.

Kleurenlettertypen bieden een manier om deze visuele effecten te bereiken met alle eenvoud en functionaliteit van reguliere lettertypen. Tekst die in een kleurenlettertype wordt weergegeven, is hetzelfde als andere tekst: deze kan worden gekopieerd en geplakt, kan worden geparseerd met toegankelijkheidsprogramma's, enzovoort.

Welke soorten kleurenlettertypen worden door Windows ondersteund?

De OpenType-specificatie definieert verschillende manieren om kleurinformatie in te sluiten in een lettertype. Vanaf Windows 10, versie 1607 (Jubileumupdate), DirectWrite en Direct2D (en de Windows-frameworks die erop zijn gebouwd) ondersteunen al deze benaderingen:

Techniek	Beschrijving
COLR-/CPAL- tabellen	Maakt gebruik van lagen van gekleurde vectoren, waarvan vormen op dezelfde manier worden gedefinieerd als glyph-kaders met één kleur. Ondersteuning is gestart in Windows 8.1.
SVG-tabel	Maakt gebruik van vectorafbeeldingen die zijn geschreven in de SVG-indeling (Scalable Vector Graphics). Vanaf Windows 10 versie 1607 (Jubileumupdate) ondersteunt DirectWrite een subset van de volledige SVG-specificatie. Niet alle SVG-inhoud wordt gegarandeerd weergegeven in een OpenType SVG-lettertype. Zie SVG-ondersteuningvoor meer informatie.
CBDT/CBLC tabellen	Maakt gebruik van ingesloten kleuren bitmapafbeeldingen.
tabel	Maakt gebruik van ingesloten kleuren bitmapafbeeldingen.

Kleurenlettertypen gebruiken

Vanuit het perspectief van de gebruiker zijn kleurlettertypen alleen lettertypen. Ze kunnen bijvoorbeeld meestal worden geïnstalleerd en verwijderd van het systeem op dezelfde manier als monochromatische lettertypen kunnen; en ze worden weergegeven als normale, selecteerbare tekst.

Ook vanuit het perspectief van de ontwikkelaar worden kleurlettertypen meestal op dezelfde manier gebruikt als monochromatische lettertypen. In de XAML- en Microsoft Edge-frameworks kunt u uw tekst op dezelfde manier voorzien van kleurlettertypen als met gewone lettertypen. Standaard wordt uw tekst in kleur weergegeven. Als uw app echter direct Direct2D-API's (of Win2D-API's) aanroept om tekst weer te geven, moet deze expliciet lettertypeweergave aanvragen.

Kleurenlettertypen gebruiken met DirectWrite en Direct2D

Uw app kan de tekenmethoden op een hoger niveau van Direct2D gebruiken (DrawText en DrawTextLayout), of er kunnen technieken op lager niveau worden gebruikt om glyph-uitvoeringen rechtstreeks te tekenen. In beide gevallen vereist uw app specifieke code om kleur-glyphs correct te verwerken. De DrawText van Direct2D en DrawTextLayout API's geven standaard geen kleurtekens weer. Dit is om onverwachte gedragswijzigingen in tekstrenderings-apps te voorkomen die zijn ontworpen vóór ondersteuning voor kleurenlettertype.

Als u wilt kiezen voor kleuren-glyph-rendering, geeft u de vlag D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT opties door aan de tekenmethode. In het volgende codevoorbeeld ziet u hoe u de methode DrawText van Direct2D aanroept om een tekenreeks in een kleurenlettertype weer te geven:

// If m_textFormat points to a font with color glyphs, then the following
// call will render m_string using the color glyphs available in that font.
// Any monochromatic glyphs will be rendered with m_defaultFillBrush.
m_deviceContext->DrawText(
    m_string->Data(),
    m_string->Length(),
    m_textFormat.Get(),
    m_layoutRect,
    m_defaultFillBrush.Get(),
    D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT
    );

Als uw app API's op lager niveau gebruikt om glyph-uitvoeringen rechtstreeks te verwerken, blijft deze werken in de aanwezigheid van kleurenlettertypen, maar kan deze geen kleur-glyphs zonder extra logica tekenen.

Als u kleurglyphs correct wilt afhandelen, moet uw app het volgende doen:

1. Geef de uitvoeringsinformatie van het type glyph door aan TranslateColorGlyphRun, samen met een DWRITE_GLYPH_IMAGE_FORMATS parameter die aangeeft welke type(s) van kleurglyph de app moet verwerken. Als er kleur-glyphs aanwezig zijn (op basis van het lettertype en de aangevraagde DWRITE_GLYPH_IMAGE_FORMATS), splitst DirectWrite de primaire glyph die in afzonderlijke kleur-glyph-uitvoeringen wordt uitgevoerd, die kan worden geopend via de geretourneerde IDWriteColorGlyphRunEnumerator1 object in stap 4.
2. Controleer de HRESULT- geretourneerd door TranslateColorGlyphRun- om te bepalen of er kleuren-glyph-uitvoeringen zijn gedetecteerd. Een HRESULT- van DWRITE_E_NOCOLOR geeft aan dat er geen toepasselijke kleur-glyph-uitvoering is.
3. Als TranslateColorGlyphRun rapporteert dat er geen kleur-glyph-uitvoeringen worden uitgevoerd (door DWRITE_E_NOCOLORte retourneren), wordt de hele uitvoering behandeld als monochromatisch en moet uw app deze naar wens tekenen (bijvoorbeeld met ID2D1DeviceContext::D rawGlyphRun).
4. Als TranslateColorGlyphRun- de aanwezigheid van kleur-glyph-uitvoeringen rapporteert, moet uw app de primaire uitvoering van het symbool negeren en in plaats daarvan de kleur-glyph-run(s) gebruiken die worden geretourneerd door TranslateColorGlyphRun. U doet dit door het geretourneerde IDWriteColorGlyphRunEnumerator1-object te doorlopen, Wanneer u elke uitvoering met kleurglyph opzoekt en deze tekent voor de indeling van de glyph-afbeelding (u kunt bijvoorbeeld DrawColorBitmapGlyphRun- en DrawSvgGlyphRun gebruiken om respectievelijk kleur bitmapglyphs en SVG-glyphs te tekenen).

In dit codevoorbeeld ziet u de algemene structuur van deze procedure:

// An example code snippet demonstrating how to use TranslateColorGlyphRun 
// to handle different kinds of color glyphs. This code does not make any 
// actual drawing calls. 
HRESULT DrawGlyphRun( 
    FLOAT baselineOriginX, 
    FLOAT baselineOriginY, 
    DWRITE_MEASURING_MODE measuringMode, 
    _In_ DWRITE_GLYPH_RUN const* glyphRun, 
    _In_ DWRITE_GLYPH_RUN_DESCRIPTION const* glyphRunDescription, 
) 
{ 
    // Specify the color glyph formats your app supports. In this example, 
    // the app requests only glyphs defined with PNG or SVG. 
    DWRITE_GLYPH_IMAGE_FORMATS requestedFormats = 
        DWRITE_GLYPH_IMAGE_FORMATS_PNG | DWRITE_GLYPH_IMAGE_FORMATS_SVG; 

    ComPtr<IDWriteColorGlyphRunEnumerator1> glyphRunEnumerator; 
    HRESULT hr = m_dwriteFactory->TranslateColorGlyphRun( 
        D2D1::Point2F(baselineOriginX, baselineOriginY), 
        glyphRun, 
        glyphRunDescription, 
        requestedFormats, // The glyph formats supported by this renderer.
        measuringMode, 
        nullptr, 
        0, 
        &glyphRunEnumerator // On return, may contain color glyph runs.
        ); 

    if (hr == DWRITE_E_NOCOLOR) 
    { 
        // The glyph run has no color glyphs. Draw it as a monochrome glyph 
        // run, for example using the DrawGlyphRun method on a Direct2D 
        // device context. 
    } 
    else 
    { 
        // The glyph run has one or more color glyphs. 
        DX::ThrowIfFailed(hr); 

        // Iterate through the color glyph runs, and draw them. 
        for (;;) 
        { 
            BOOL haveRun; 
            DX::ThrowIfFailed(glyphRunEnumerator->MoveNext(&haveRun)); 
            if (!haveRun) 
            { 
                break; 
            } 

            // Retrieve the color glyph run. 
            DWRITE_COLOR_GLYPH_RUN1 const* colorRun; 
            DX::ThrowIfFailed(glyphRunEnumerator->GetCurrentRun(&colorRun)); 

            // Draw the color glyph run depending on its format. 
            switch (colorRun->glyphImageFormat) 
            { 
            case DWRITE_GLYPH_IMAGE_FORMATS_PNG: 
                // Draw the PNG glyph, for example with 
                // ID2D1DeviceContext4::DrawColorBitmapGlyphRun. 
                break; 

            case DWRITE_GLYPH_IMAGE_FORMATS_SVG: 
                // Draw the SVG glyph, for example with 
                // ID2D1DeviceContext4::DrawSvgGlyphRun. 
                break; 

                // ...etc. 
            } 
        } 
    } 

    return hr; 
} 

Kleurenlettertypen gebruiken in een XAML-app

Kleurenlettertypen worden standaard ondersteund door de tekstelementen van het XAML-platform, zoals TextBlock, Tekstvak, RichEditBox, Glyphsen FontIcon. U kunt uw tekst gewoon stylen met een kleurenlettertype en eventuele kleur-glyphs worden weergegeven in kleur.

In de volgende syntaxis ziet u een manier om een TextBlock- te stylen met een kleurenlettertype dat is verpakt in uw app. Dezelfde techniek is van toepassing op reguliere lettertypen.

<TextBlock FontFamily="Assets/TMyColorFont.otf#MyFontFamilyName">Here's some text.</TextBlock>

Als u wilt dat het XAML-tekstelement nooit tekst met meerdere kleuren weergeeft, stelt u de eigenschap IsColorFontEnabledProperty in op false.

Fooi

De bovenstaande koppelingen zijn naar de WinUI 3-versies van deze XAML-besturingselementen. U vindt de UWP-equivalenten (Universal Windows Platform) in de Windows.UI.Xaml.Controls naamruimte.

Kleurenlettertypen gebruiken in Microsoft Edge

Kleurenlettertypen worden standaard weergegeven in websites en web-apps die worden uitgevoerd op Microsoft Edge, waaronder het besturingselement XAML WebView2. Gebruik HTML en CSS om uw tekst te stylen met een kleurenlettertype en eventuele kleurtekens worden in kleur weergegeven.

Kleurenlettertypen gebruiken met Win2D

Net als bij Direct2D worden de teksttekening-API's van Win2D standaard niet weergegeven. Als u wilt kiezen voor kleuren-glyph-rendering, stelt u de vlag EnableColorFont opties in het tekstopmaakobject in dat uw app doorgeeft aan de methode voor teksttekening. In het volgende codevoorbeeld ziet u hoe u een tekenreeks in een kleurenlettertype weergeeft met behulp van Win2D:

// The text format that will be used to draw the text. (Declared elsewhere 
// and initialized elsewhere by the app to point to a color font.) 
CanvasTextFormat m_textFormat; 

// Set the EnableColorFont option. 
m_textFormat.Options = CanvasDrawTextOptions.EnableColorFont; 

// If m_textFormat points to a font with color glyphs, then the following
// call will render m_string using the color glyphs available in that font.
// Any monochromatic glyphs will be rendered with m_color.
args.DrawingSession.DrawText(
    m_string,
    m_point,
    m_color,
    m_textFormat
    );

Verwante onderwerpen

• methode ID2D1DeviceContext4::D rawText
• methode IDWriteFactory4::TranslateColorGlyphRun-methode
• idWriteFontFace4-interface
• DirectWrite gekleurde glyph-voorbeeld-app