Spectacular Text Sprite designs

Is there a way to customize a text sprite beyond just changing its size and font, as demonstrated in the example?

{
    type: "text",
    text: "Hello, Sprite!",
    fill: "green",
    font: "18px monospace"
}

In particular, I'm looking to make it bold or underlined.

I attempted using a style config like this:

style: {
    'text-decoration': 'underline'
}

Another approach was trying to set it within the font config like so:

font: "underline 18px monospace"

Unfortunately, neither of these methods yielded the desired result.

This statement from the Ext.draw.Sprite#font configuration in the documentation seemed promising but proved somewhat confusing:

Uses the same syntax as the CSS font parameter

I've searched online for information on the CSS font parameter with limited success. If anyone can clarify what this means, it would be greatly appreciated.

Answer №1

When using CSS, the font attribute can be used to specify bold and italics, but for underline we need to use the text-decoration attribute. To achieve this, a style configuration like the following is required:

{
    type: "text",
    text: "Hello, Sprite!",
    fill: "green",
    font: "bold 18px monospace",
    style: {
        textDecoration: "underline"
    }
}

Check out this working demo: http://jsfiddle.net/gilly3/WSQv9/. I have tested this in Chrome and IE9. However, it's worth noting that Firefox does not yet support underline in SVG.

If you need more information on the font parameter definition, refer to the following links:
MSDN
MDN

Answer №2

Although I'm not familiar with extjs, it reminds me of SVG. One issue to be aware of is that Firefox does not support the text-decoration attribute on svg elements. Therefore, if you're testing in Firefox, you may encounter display problems that are not present in Chrome where the style attribute works fine.

To get around this limitation, you could manually create an underline using a line element. While this can be done with javascript, implementing it within extjs may require a different approach that I am unfamiliar with.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display HTML content in a modal dialog box without parsing it

I'm currently working on a website showcasing various HTML and CSS spinners and loaders. Each example opens a modal window upon click, where I aim to display the corresponding code for that spinner so users can easily copy and implement it in their ow ...

Words fail to display

.sport { content: url("../img/sport.png"); background-color: rgba(0,0,0,1.0); top: 61px; height: 310px; width: 300px; position: absolute; margin: 0; left: 0; border-radius: 4px; overflow: hidden; } .sportsandactivis { background-colo ...

Struggling with getting Bootstrap Affix-bottom to scroll back up?

Despite reading various answers, I am still struggling to configure the settings correctly. The columns header is not resuming scrolling upwards as expected. Below is my PHP code snippet: <div id="columnsHeader" class="affix" data-offset-top="800" da ...

How can I ensure that the height of my dropdown menu covers the entire screen without being limited by the page height

I'm trying to adjust a dropdown menu so that it fits perfectly within the screen size, covering the entire height without showing any content beneath or below it. Currently, the menu covers the screen on some pages but scrolls and appears too large du ...

display:table causing issues in Internet Explorer

I am trying to achieve a layout where table cells are aligned horizontally similar to the ones demonstrated on this page. Despite following the provided instructions and even copying the css and markup exactly, I am facing an issue with IE 8 rendering my ...

Why isn't my CSS float behaving as I anticipated?

I'm currently working on a website and facing an issue. The CSS Float property is not behaving as expected. Here is my HTML Code: <div class="slider-menu"> <div class="slider-box"> <img src="agac.jpg"> & ...

Show a visual representation once a user submits a search query

I'm a beginner in Angular and web development, and I'm trying to figure out how to display an image (check sign) when the user presses enter to submit their search. My idea was to use collapse, but I'm not sure how to do it since I don' ...

Issue with carousel functionality being disrupted by resizing of the window

I have lined up a series of 3 divs floating to the left in a straight line, each spanning the width of the page. Here is an example of the HTML structure: <div class="Horizontal-Wrapper"> <div class="Horizontal-Section"> <div ...

Covering the heading of a collection of Bootstrap 4 card components

I currently have a bootstrap card group set up with a title that is contained within each individual card. However, I would like the title to span across the entire card group. Is there a way to achieve this? <div class="card-group"> ...

The Google Docs viewer is displaying an empty screen

I have been utilizing the Google Docs viewer on my website: <div class="embed-r embed-responsive-a"> <iframe class="embed-responsive-it" src="https://docs.google.com/viewer?embedded=true&amp;url=http://LINK.PDF"></iframe> </div& ...

Tips for customizing the CSS of a child component that has been imported from a different module in Angular 2

I have been using agm-snazzy-window from amg-snazzy-window There is a mention that I can modify the css class, but when I try to do so, it doesn't seem to work. Here is an example: map-component.html <agm-snazzy-info-window [closeWhenOthersOp ...

When applying a gradient on top of an image with background-image, the gradient appears larger in size compared to

Struggling with HTML <div class="outer"> <div class="bgimagegradient"></div> <img src="foo.jpg"> <div> .backgroundimage { position: absolute; right: 25px; z-index: -100; ...

Ensure that columns are neatly arranged horizontally when they do not all fit in one row

I currently have a row with 6 columns, but when they can't fit next to each other on the screen, 2 of them get pushed below, resulting in a messy layout. I could use a media query to solve this issue, however, I am curious if there is a better way to ...

Mastering the nth-child selector in css

How can I apply the :nth-child() selector to all elements in an HTML document except for the last one? Is this code snippet valid? = td:nth-child:not(last-child){ //Some css// } I am using the text-overflow:ellipsis property to hide overflow ...

The button must stay deactivated even if the page is refreshed

When I click on the submit button, it disables for 15 seconds before getting enabled again. However, if I refresh the page, the button becomes immediately enabled without waiting the disable time. Can someone please assist me with this issue? $(window). ...

My sub menu bar is not working properly, I need to fix it so that it can dropdown correctly

I'm struggling with my sub menu layout and need some assistance in fixing it. I've tried numerous times to adjust it using CSS, but without success. Here is the link to my menu. I'm still learning CSS and could really use some guidance: # ...

Looking for assistance in determining a solution for progress bar implementation

Currently, I am developing a simple application using web technologies like HTML, CSS, and jQuery Mobile. This app enables me to create goals and save them to a listview using the <li> element. Every <li> representing a goal will have an assoc ...

How to activate a media query in response to user interaction using JavaScript

My responsive web page has various designs for different screen sizes, implemented using @media queries. I am interested in allowing users to manually adjust the design for smaller or larger screens without actually changing the screen size. Is there a wa ...

Creating a responsive design using HTML and CSS to ensure that all elements fit perfectly on any window size or resolution

Currently, my friend and I are collaborating on a mod for the popular game known as Minecraft. My responsibility is to create a website where we can showcase this mod and provide information about its features. The main issue I am encountering is the inab ...

The alignment for Bootstrap's NAV element within a display:table-cell element seems to be off when viewed on Firefox浪

Here is an example of HTML markup with Bootstrap library included: <div class="container"> <div class="card"> <ul class="nav list"> <li class="element"> <a href="#">Element</a> </li> ...