Anything I tried failed so far to get Firefox to underline some text.
According to Google-results this issue is known and documented for more than five years ... that just can't be true ... what is going on?
Someone knows any consitently working workaround or maybe even a reason as to why they didn't fix it yet!? ... I am very curious about that
Underlines on text in SVG, as well as other text decoration, is not supported in Firefox yet, that is true. (Bug 317196 attests to that.) There is a plan to rework the SVG text layout code over the next few months, the result of which should be (among other things) underlines working.
In the meantime, if you really need them (and cannot draw them manually with a <line>, because for example you don't know the text metrics), you could use a <foreignObject> to include some HTML content with underlines.
In my Firefox, a ForeignObject text within an SVG gets perfectly underlined if I include it in the right tags:
<html:u>blub</html:u>
... having declared html as a namespace in the svg, sample code looks like this:
<div style="border:solid black 2px;">
<svg:svg xmlns="http://www.w3.org/2000/svg"
xmlns:html="http://www.w3.org/1999/xhtml"
width="300" height="50" >
<foreignObject width="80" height="50">
<html:u>blub</html:u>
</foreignObject>
</svg:svg>
</div>
Would that be a solution for you?
Related
I have this vuetify code:
<div class="mb-6">
<h1 class="text-h4">
{{title}}
</h1>
<p class="subtitle-1 font-weight-thin" v-if="subtitle">{{subtitle}}</p>
</div>
Which produces a title and subtitle that are not aligned vertically, as visible there:
The left-space between the title M is wider that the subtitle one.
Any idea why? I reckon this is the first time I have such an issue, hence I believe this is a Vuetify typography issue.
I tried playing with the letter-spacing CSS property without success: it changes the space between the letters but not in front.
I also tried playing with margin-block-start CSS property, but it doesn't change anything.
Thanks for the help
It's not a vuetify or letter-spacing issue. This comes from font you are using. Vuetify uses Google’s Roboto font by default.
There's a playground at Google fonts with Roboto font. You may notice that the problem you mentioned is present here as well. By example, there's some space in Regular 400 #64px:
Let's test your code using a different font. By example, I'll use CSS font-family: serif !important; that fallbacks to Times New Roman at Windows platforms:
Looks fine, no spacings.
So one solution to fix your problem is to change the font. I believe that there are fonts that are more suitable for websites than Times and that do not have such a problem.
According to Vuetify docs, you can change a font for the whole project with one line in src/sass/variables.scss file. Keep in mind that this cause project to build much longer:
$body-font-family: 'Work Sans', serif;
Possibly you don't want to change a font. So you can change the whole string's position this way:
.text-h4::first-letter {
margin-left: -0.04em;
}
In this case, the unselected lines will align a little, but there will be problems with selection:
Maybe this SO question will also help you. And there's a playground at CodePen where you can test some solutions.
Long ago I searched on Internet for a SVG image plugin and found that one, which is almost broken, outdated and thus unusable. Is there any other plugin that I might miss that allows to show SVG images and works fine with recent Nativescript version?
For anyone still struggling with this, there is another route you could take. What ended up doing was converting my svg files into a font file (.tff). My svg files were simple, so I'm not sure if this will work for every case, but at least it works for using icons. It's really easy to convert svg files to a .ttf file. I used this online tool converter, then I added the file into my nativescript app/fonts folder. Now I can use a label like this to display the svg files:
<label
style="font-family: yourFontFileName;"
text="A" //This will show the icon mapping to the letter 'A'
></label>
It's also worth noting that since it's a font, you can change stroke color, and size.
Note: Android uses the file name as the font name, while IOS has its own font name. To find the font name you can just open your .ttf file, and it should open a window showing the letters (icons) and the font name as the title
There is an updated fork from teammaestro
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:svg="#teammaestro/nativescript-svg" loaded="pageLoaded">
<StackLayout>
<svg:SVGImage src="~/image/nativescript.svg" height="100" />
<svg:SVGImage src="https://media4.giphy.com/media/3uyIgVxP1qAjS/200.svg" height="200" />
<svg:SVGImage src="res://somesvg" height="200" />
</StackLayout>
</Page>
I am using fonts in an embedded SVG file rendered in Firefox (v26, "Nightly" and future versions). Other than the two fonts serif and sans-serif, what else is available?
My SVG is generated in Adobe Illustrator. Any font-family names I specify only render correctly in Safari and Chrome and I cannot use outlines as a workaround, as I will be annotating the SVG with dynamically-generated label text.
Other than using outlines, what is the process for annotating SVG documents with custom text elements, such that they will render correctly in Firefox?
On making your SVG render pretty fonts
It is entirely possible for Firefox to present SVG text in a custom font. For example, it can be done as follows:
<svg>
<style>
#import url(http://fonts.googleapis.com/css?family=Varela+Round);
text { font-family:Varela Round, sans-serif; }
</style>
<text y="20">I will appear in a custom font</text>
</svg>
This fiddle demonstrates the usage to some extent. Note that in jsfiddle the CSS is included as an HTML style sheet, not directly in the CSS.
The following can be used as a data URL, i.e. you may copy an paste it directly into the address bar. It demonstrates using #import from the SVG directly.)
data:text/html, <svg><style>#import url(http://fonts.googleapis.com/css?family=Varela+Round);text { font-family:Varela Round, sans-serif; }</style><text y="20">I will appear in a custom font</text></svg>)
(Of the current popular browsers, only Firefox supports data URLs in the address bar. Also if you change the data's MIME to image/svg+xml it won't work in Firefox.
In a comment on the previous answer to this question, Robert Longson also shared a link demonstrating an imported font using <link rel=stylesheet. Note that some of the fonts on that page are rejected by Firefox for technical reasons which I don't understand. However, almost all of them work.
Regarding the politics around SVG Fonts
SVG Fonts is a branch of the SVG spec which deals with defining your font in an SVG file. This is totally different to using a font in an SVG file, which I have outlined above.
Mozilla's position on the SVG Font spec, as I understand it, is that the only benefit to SVG fonts is that you can define your font by hand in a text editor. Others have expressed similar opinions. This is why Mozilla have concentrated on WOFF.
The current state of importing web fonts is such that, to achieve cross-browser/device compatibility, you have to provide multiple different font formats. This is unfortunate, but hardly the end of the world in my opinion.
Unfortunately for you, Mozilla has indefinitely postponed SVG font implementation to focus on WOFF. In fact this bug was even labeled on Bugzilla as "RESOVLVEDWONTFIX". Here is the link for MDN and the link on Bugzilla.
Admittedly I do not know enough about SVG Font to know if the CSS #font-face element will work and I also saw reference to Openfont.
I want to embed some SVG into SVG.
Therefor I want to use the <image> element since I want to keep my SVG separated.
But when I include my SVG like that:
<image xlink:href="svgs/munitionsmangel.svg" width="20" height="20" x="120" y="70" />
It works, but does not scale the SVG up when I zoom with my browser, it just stays small.
But when I embed just the same SVG file as a symbol and include it like that:
<use xlink:href="#munitionsmangel" width="20" height="20" x="80" y="70" />
it just scales up like a charm.
What is the problem here?
Edit: Seems like this is a bug with Firefox, in the current version 21
Chrome scales up the image as well...
Even more strange, if I include a raster image with image, both Firefox and Chrome scale it...
Edit 2: Even IE 9 has the desired behaviour, although its rendering of background colors is a bit strange, so its only Firefox which sucks
Since this really seems like a bug in Firefox, I will use the <use />-tag instead, maybe in combination with XMLHttpRequest to insert the <symbol /> dynamically.
Or even only XMLHttpRequest with inserting the node directly.
I cannot think of a better solution, so if there is really a better answer, just post it!
So I'm trying to give my air application a custom style, I've set the showFlexChrome to false and that's ok it works. now I would like to use an image window I designed in photoshop as the background (because now there is no background in the application).
I did the following but it doesn't work
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:views="be.KHM.ProjectManager.models.views.*"
width="850" height="500" currentState="index" creationComplete="init()"
showFlexChrome="false"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
backgroundColor="white"
>
< mx:Style>
WindowedApplication
{
backgroundColor: white;
backgroundImage: "be/KHM/ProjectManager/assets/mysimpleproject_interface.jpg";
}
</ mx: Style>
The path is correct and I don't receive any errors but the background of my air app is still transparent. I tried to put a canvas around everything between my windowedapplication and give that a background image, but because I work with states it will give me the error that the states cannot be initiated within a canvas or something like that.
Try putting a ClassReference("be/....") for the backgroundImage style setter.
Edit:
Oh, wait... that's not a class.
The problem could be that you have the wrong combo of showFlexChrome and the FlexChrome property in your xml compiler file.
My suggestion would be to take a look at the source of the SalesForce app that someone built when 1.0 came out. It has some decent css and window styling examples.