I am trying to get the font size of my svg file to match the font size of my regular text. I have managed to get the fonts themselves to match, both are using Open Sans by Steve Matteson however the sizing is different. My svg file consistently renders slight larger font than my regular text.
When I created the svg file (in Inkscape) I set the font size to 22.4px; I have also set the font size of my regular text to 22.4px. I have done some research on this and realize that svgs are quite complicated to render and that browsers have many default stylings, but I have not been able to hone in on what exactly causes this discrepancy in font size. (I have tried a browser reset code, this did not help; the problem remained exactly as it did without the reset).
Here is a screen shot comparing the regular text on top with the svg underneath. You can see the svg is slightly larger in font size (this is most visible when comparing the number "1" in the text vs the svg.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Font Comparison Test</title>
<!-- Open Sans font by Steve Matteson -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<p>
Einige suchen dieselbe in der fortlaufenden Zahlenreihe
von 1 bis 16 und legen den Gliedern dieser Reihe die Töne
auf folgende Weise unter :
</p>
<!-- First graph, series 1 - 16 -->
<img src="svg/1.1 English series 1 - 16.svg" style="width: auto; height: auto;">
</body>
</html>
CSS:
body{
font-family: 'Open Sans Condensed', sans-serif;
background-color: #162e2e;
color: #dfddfe; /* Font colour */
font-size: 22.4px; /* 1.4 = 22.4 px? */
font-weight: 400; /* important for font styling */
}
SVG:
<svg
width="167mm"
height="17mm"
viewBox="0 0 167 17"
version="1.1"
id="svg127"
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-17.407795,-14.122843)">
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.90222216px;line-height:1.25;font-family:'Open Sans Condensed';-inkscape-font-specification:'Open Sans Condensed, ';letter-spacing:0px;word-spacing:0px;fill:#dfddfe;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="18.06776"
y="21.276409"
id="text4998-2-0"><tspan
sodipodi:role="line"
x="18.06776"
y="21.276409"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Open Sans Condensed';-inkscape-font-specification:'Times New Roman, ';stroke-width:0.26458332"
id="tspan5000-5-1">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16</tspan></text>
I had the same problem. solved by setting the svg width and height to "1em"
Related
I'm using XSL-FO with Antennahouse FO formatter.
How do I make the fo:caption in a fo:table-and-caption element run only as wide as the fo:table does?
Essentially, I am looking for the FO equivalent of this HTML:
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image with Caption – CENTERED</title>
</head>
<body>
<div style="border:2px solid blue;">
<table style="border:1px solid green; margin-left:auto; margin-right:auto;">
<caption style="caption-side:bottom; text-align:left; border:1px solid red;"><p style="font-size:9pt;">Sourceline (left edge should match up with table's left edge, and line breaking should occur at right edge of table)</p></caption>
<tr>
<td><p><- The table runs only this wide. -></p></td>
</tr>
</table>
</div>
<p>BLUE = wrapper-DIV</p>
<p>GREEN = table</p>
<p>RED = caption</p>
</body>
</html>
which looks like this:
The XSL-FO code I have is this:
<?xml version="1.0" encoding="UTF-8"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
<fo:layout-master-set>
<fo:simple-page-master margin-bottom="58px" margin-left="120px" margin-right="120px" margin-top="50px" master-name="content-page" page-height="11in" page-width="8.5in">
<fo:region-body margin-bottom="44px" margin-top="50px" region-name="xsl-region-body" />
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="content-page">
<fo:flow flow-name="xsl-region-body">
<fo:block>
<fo:table-and-caption border="2px solid blue" text-align="center">
<fo:table-caption border="1px solid red" caption-side="bottom">
<fo:block font-size="8pt" text-align="left">Sourceline (left edge should match up with table's left edge, and line breaking should occur at right edge of table)</fo:block>
</fo:table-caption>
<fo:table border="1px solid green">
<fo:table-column/>
<fo:table-body>
<fo:table-row>
<fo:table-cell>
<fo:block><- The table runs only this wide. -></fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
</fo:table-and-caption>
</fo:block>
<fo:block>BLUE = fo:table-and-caption</fo:block>
<fo:block>GREEN = fo:table</fo:block>
<fo:block>RED = fo:caption</fo:block>
</fo:flow>
</fo:page-sequence>
</fo:root>
which renders like this:
How do I force (in XSL-FO) the table caption to only run as wide as the table (which might be arbitrarily complex, including e.g. fo:table-footer and table borders on table or cells), and start at the left edge of its associated table (like in the HTML rendering)?
I have a Gatsby project, where where I would like to use an svg as my main heading.
import Header from "../images/header.svg"
return (
<h1>
<Header/>
</h1>
)
Thers is no text in the svg (the text is made purely using rects and paths), so what do I do in terms of accessibility and SEO optimization?
Two ways to address this, visually hidden text or by adding a <title> to your SVG.
Do not use aria-label as support is not great (you will see people recommending that for SVGs, aria-label does not tend to work well on static / non-interactive elements).
Visually Hidden text (screen reader only text)
Visually hidden text is not visible on the screen but will still be read by a screen reader.
Please use the CSS class below to visually hide text, it has better compatibility and is future proofed compared to most current "screen reader only" classes as explained in this answer I gave
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<h1>
<span class="visually-hidden">Welcome To Our Site</span>
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="#666" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z">
</path>
</svg>
</h1>
important: notice how I add focusable="false" as well as aria-hidden="true" to the SVG, this is to fix a bug with Internet Explorer where SVGs are focusable and to hide the SVG from screen readers. I used a youtube icon to represent your text as that was the closest SVG I had to hand!
Add a <title> element to your SVG.
The <title> element is effectively the same as alt on a normal image. Using this gives the screen reader something to announce.
Obviously you would then remove the aria-hidden="true" from it so it can be read by a screen reader!
Update after comments to include best practices for <title> and or <desc>
Thanks to the comments I realised this answer was lacking some key information on how to correctly use a <title>.
In this answer I gave I referenced a series of tests by deque which show that the most reliable method for labelling an SVG for screen readers using WAI-ARIA was to use aria-labelledby and point that to the <title> (and <desc> if you have both).
So a rough idea of how to do this is as follows:
<h1>
<svg aria-labelledby="welcome-title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<title id="welcome-title">Welcome To Our Site</title>
<path fill="#666" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z">
</path>
</svg>
</h1>
Which is better?
Go for visually hidden text.
It works all the way back to IE6 which predates SVG!
It also works in a text only browser (one that does not understand CSS) as it will still be displayed. It is an edge case but still a win for visually hidden text!
In addition to the strange disappearing markup issue as noted in another StackOverflow question, I'm also noticing weird encoding problems where some characters are replaced with random letters. This seem to happen when there are very long lines in the markup. Here are examples:
Normal behavior
Before processing of Gmail API
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Email Title</title>
</head>
<body>
<p style="font-size: 16px; line-height: 24px; margin-top: 0; margin-bottom: 0; font-family: 'ff-tisa-web-pro, Georgia, serif;">Pinterest mumblecore authentic stumptown, deep v slowcarb skateboard Intelligentsia food truck VHS. Asymmetrical swag raw denim put a bird on it Echo Park. Pinterest four loko lofi forage gentrify cray.</p>
</body>
</html>
After processing of Gmail API (via opening message in Gmail, and selecting Show original).
--001a1133f016eff52804ff2a2885
Content-Type: text/html; charset=ISO-8859-1
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Title</title>
</head>
<body>
<p style>Pinterest mumblecore authentic stumptown, deep v slowcarb skateboard Intelligentsia food truck VHS. Asymmetrical swag raw denim put a bird on it Echo Park. Pinterest four loko lofi forage gentrify cray.</p>
</body>
</html>
--001a1133f016eff52804ff2a2885--
In the above example, what happens is what we expected. Once the line-length of the p element is longer however, we get unusual behavior.
Weird behavior
Before processing of Gmail API
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Email Title</title>
</head>
<body>
<p style="font-size: 16px; line-height: 24px; margin-top: 0; margin-bottom: 0; font-family: 'ff-tisa-web-pro, Georgia, serif;">Pinterest mumblecore authentic stumptown, deep v slowcarb skateboard Intelligentsia food truck VHS. Asymmetrical swag raw denim put a bird on it Echo Park. Pinterest four loko lofi forage gentrify cray. Pinterest mumblecore authentic stumptown, deep v slowcarb skateboard Intelligentsia food truck VHS. Asymmetrical swag raw denim put a bird on it Echo Park. Pinterest four loko lofi forage gentrify cray.</p>
</body>
</html>
After processing of Gmail API (via opening message in Gmail, and selecting Show original).
--001a1133547278e12e04ff2a28d8
Content-Type: text/html; charset=ISO-8859-1
Content-Transfer-Encoding: quoted-printable
<html>
<head>
<meta name=3D"viewport" content=3D"width=3Ddevice-width, initial-scale=
=3D1.0">
<title>Email Title</title>
</head>
<body>
<p style>Pinterest mumblecore authentic stumptown, deep v slowcarb skat=
eboard Intelligentsia food truck VHS. Asymmetrical swag raw denim put a bir=
d on it Echo Park. Pinterest four loko lofi forage gentrify cray. Pinterest=
mumblecore authentic stumptown, deep v slowcarb skateboard Intelligentsia =
food truck VHS. Asymmetrical swag raw denim put a bird on it Echo Park. Pin=
terest four loko lofi forage gentrify cray.</p>
</body>
</html>
--001a1133547278e12e04ff2a28d8--
In the above example, the number of characters inside the p element has doubled. Somehow this triggers all sorts of weird encoding issues. Notice that Content-Transfer-Encoding: quoted-printable is added about the markup. Also notice that 3D appears after every =. Also, hard line breaks have been added to the p element. At the end of each line there is an = sign.
How do I prevent this from happening?
Google storage the email using the standard RFC822, and in this specific case as you can see on the headers beside the Content-Type text/html you can find the header Content-Transfer-Encoding: quoted-printable, (https://en.wikipedia.org/wiki/Quoted-printable).
So you need to parse the RFC822 message to get the actual html.
Find the correct chunk (the format of the message is like a multipart using the boundary that you will find in the first headers
Parse the headers of the Chunk and to get the encode-type (not always its a quote-printable so be careful)
Using the encode of the previous step decode the body of the chunk
I hope this answer you question
I would like to render two numbers on a web page like this:
123
+ 456
______
I've found this example:
<mstack>
<mn>496</mn>
<msrow> <mo>+</mo> <none/> <mn>28</mn> </msrow>
<msline/>
</mstack>
but MathJax doesn't support mstack, msrow and msline elements.I've attempted to use a mtable
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mtable id="test" columnalign="right">
<mtr><mtd></mtd><mtd><mn>12321</mn></mtd></mtr>
<mtr><mtd><mo>+</mo></mtd><mtd><mn>45665445</mn></mtd></mtr>
</mtable>
</math>
</body>
with this CSS:
<style type="text/css">
#test
{
border-bottom:1px solid black;
}
</style>
but the bottom border is overlapping the lower number. Is there a way to achieve this layout with MathJax/MathML?
You can see examples of this kind of layout in the MathML spec at
http://www.w3.org/Math/draft-spec/mathml.html#chapter3_presm.elemmath.examples
If, once the document has loaded, you select the button "convert and display with MathJax" then the MathML3 mstack markup will be transformed to some MathML2 that MathJax understands. The relevant javascript is all available linked from that page.
Also relevant is the discussion between myself and the MathJax developer at
https://groups.google.com/forum/#!msg/mathjax-users/wa85p5TAIe4/hgUoLEXrweoJ
I want to use Paul Irish's Conditional comments from the Boilerplate HTML template:
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
in a SharePoint 2010 masterpage. I have read 'conditional comments don’t always work so well in SP2010'. (not sure what that means!) The advice is to use:
<SharePoint:CSSRegistration Name="foo.css" ConditionalExpression="gte IE 7" runat="server" />
This allows me to use a conditional to load a specific stylesheet but not to use the Conditional html tag in the way Paul Irish suggests. Is there a way to do this or can I just simply paste the code from Biolerplate into the Sharepoint masterpage?
I assume that the SharePoint masterpages equal the ones in ASP.NET (MVC). Therefore this shouln't be a problem at all.
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
All the preceding code does is setting the HTML tag with a different CSS class on the HTML tag depending which browser is accessing the site. So that you are able to override some style sheets for any given browser (IE).
site.css
.coloredBackground
{
background-color: #FF0000; //red
}
.ie6 .coloredBackground
{
background-color: #00FF00; //green
}
.ie8 .coloredBackground
{
background-color: #0000FF; //blue
}
In this example users browsing with Firefox, Opera, Safari, IE7,9,10 will see a red background. For IE6 the background color gets overridden with green and in IE8 with blue.
Your CSS registration would look like the following:
<SharePoint:CSSRegistration Name="site.css" runat="server" />
As you can see there is no need to set the ConditionalExpression anymore in the CSS registration, because you are already switching the used style sheet by setting a specific class on the HTML element.
Update:
Another possibility would be to include another style sheet file depending on the browser version using the ConditionalExpression property on the SharePoint aspx control.
<SharePoint:CSSRegistration Name="ie6.css" ConditionalExpression="lt IE 7" runat="server" />
<SharePoint:CSSRegistration Name="ie7.css" ConditionalExpression="IE 7" runat="server" />
<SharePoint:CSSRegistration Name="ie8.css" ConditionalExpression="IE 8" runat="server" />
<SharePoint:CSSRegistration Name="ie9.css" ConditionalExpression="IE 9" runat="server" />
The downside is that you may get css priority issues because the .ie* class is missing on the html element and therefore doesn't overrule the .class-to-override-if-specific-ie-version. You could solve this by using the !important rule in the ie specific style sheet files.
I am very new to SharePoint branding and was coming across the same problem. I am not a ASP developer so understanding some of the solutions were a little tough.
What I did was take Paul's conditional statements with the HTML tag and moved them to the BODY tag and it seemed to work just perfect with out having to mess with and SP code.
<!--[if lt IE 7]> <body class="no-js lt-ie9 lt-ie8 lt-ie7" scroll="no" onload="javascript:_spBodyOnLoadWrapper();"> <![endif]-->
<!--[if IE 7]> <body class="no-js lt-ie9 lt-ie8" scroll="no" onload="javascript:_spBodyOnLoadWrapper();"> <![endif]-->
<!--[if IE 8]> <body class="no-js lt-ie9" scroll="no" onload="javascript:_spBodyOnLoadWrapper();"> <![endif]-->
<!--[if gt IE 8]><!--> <body class="no-js" scroll="no" onload="javascript:_spBodyOnLoadWrapper();"> <!--<![endif]-->
Hope that helps.
Posting again as my first reply was deleted. This has been edited to better meet StackOverflow's posting guidelines.
I used this (from the bottom of Paul's post, dated 2012/1/17) and it worked fine in a SharePoint master page. Please note this is different than what you posted, which was an earlier version of the code.
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
My concern is the other things that had to get stripped out that may be needed by SharePoint pages. Here is the original SharePoint HTML tag:
<html lang="<%$Resources:wss,language_value%>" dir="<%$Resources:wss,multipages_direction_dir_value%>" runat="server" xmlns:o="urn:schemas-microsoft-com:office:office" __expr-val-dir="ltr">
Once you start adding that stuff in the HTML tags with the conditional comments the page breaks.
I urge you to also review your HTML/CSS to see if some of the conditional CSS can be removed to help streamline your solution.
I used ASP literal strings to pass the conditional IE comments in my SP2010 masterpage.
That way, I could still pass in the language value used in the original <html> tag, <%$Resources:wss,language_value%>.
<asp:literal ID="html1a" runat="server" Text="<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""/><asp:Literal ID="html1b" runat="server" Text="<%$Resources:wss,language_value%>" /><asp:literal ID="html1c" runat="server" Text=""><![endif]-->"/><br />
<asp:literal ID="html2a" runat="server" Text="<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang=""/><asp:Literal ID="html2b" runat="server" Text="<%$Resources:wss,language_value%>" /><asp:literal ID="html2c" runat="server" Text=""><![endif]-->"/><br />
<asp:literal ID="html3a" runat="server" Text="<!--[if IE 8]><html class="no-js lt-ie9" lang=""/><asp:Literal ID="html3b" runat="server" Text="<%$Resources:wss,language_value%>" /><asp:literal ID="html3c" runat="server" Text=""><![endif]-->"/><br />
<asp:literal ID="html4a" runat="server" Text="<!--[if gt IE 8]><!--> <html class="no-js" lang=""/><asp:Literal ID="html4b" runat="server" Text="<%$Resources:wss,language_value%>" /><asp:literal ID="html4c" runat="server" Text=""><!--<![endif]-->"/>
But if someone could further improve this method, it would be appreciated!
With Sharepoint 2010 it is best to avoid putting conditionals around the <html> tag. That being said, you can add in your conditionals within the <head> tag and add classes to your html tag using Javascript. This is not ideal for a regular website but for Sharepoint, this is an unubtrusive method that works in a large enterprise Sharepoint 2010 site that I help maintain:
...
<html id="Html1" class="no-js" lang="<%$Resources:wss,language_value %>" dir="<%$Resources:wss,multipages_direction_dir_value %>" runat="server" __expr-val-dir="ltr">
<head id="Head1" runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Expires" content="0"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- IE version conditionals will apply classes to html element if old IE -->
<!--[if lt IE 7 ]><script type="text/javascript">var element = document.getElementById("ctl00_Html1"); element.className += " " + "lt-ie7";</script><![endif]-->
<!--[if lt IE 8 ]><script type="text/javascript">var element = document.getElementById("ctl00_Html1"); element.className += " " + "lt-ie8";</script><![endif]-->
<!--[if lt IE 9 ]><script type="text/javascript">var element = document.getElementById("ctl00_Html1"); element.className += " " + "lt-ie9";</script><![endif]-->
<!--[if lt IE 10 ]><script type="text/javascript">var element = document.getElementById("ctl00_Html1"); element.className += " " + "lt-ie10";</script><![endif]-->
...