Grading My 2015 Goals — I Passed Thanks To The Curve - Vanseo Design

---

Grading My 2015 Goals — I Passed Thanks To The Curve Posted: 29 Dec 2015 05:30 AM PST Happy Holidays. It's become tradition for my last post of the year to review the goals I set at the start of the year and I see no reason to break tradition today. I want remind you of the goals I set back in January and share my progress or lack of progress with each. I'll also grade myself on my success or lack thereof, all in preparation for setting new goals for the next year. You may or may not be familiar with these year end reviews or the setting goals posts that follow. If you're interested, here are my review posts from past years. My 2014 Goals—Always Keep Your Hands Busy My 2013 Goals — An Unexpectedly Successful Year 2012 Was A Reasonably Successful Year Why 2011 Was A Complete Failure (And A Complete Success) The Year That Was: Looking Back At 2010 Do You Have Goals For Your Business? Part I (2009) Looking Back At 2008 And Ahead To 2009 – Part I Looking Ahead In 2008 And Back At 2007 Next week I'll share my goals for 2016 and in that post I'll link to the goal setting posts from previous years. I've mentioned a few times throughout the years why I find it beneficial to set goals each year. I'm not sure I've ever mentioned why I like the reviews. They keep me honest. It's easy to set goals, but much harder to accomplish them. Being up front about my successes and failures makes me want to succeed more. The reviews also help me to see how much I get done so I have a better idea how much to plan for another year. Over time I've noticed goals I set and never worked on and it helped me understand that I really wanted to do other things. With that said, let's see how I did this year. My Goals for 2015 At the start of the year I set myself eight goals over four different themes for lack of a better word. When I set the goals I said I was more interested in making progress with each theme than I was in completing each goal. Here are the themes and the specific goals I listed under each. Create more products Write more books Market new and existing products Develop a content marketing strategy Learn email marketing Widen distribution Design/Plan for the future Improve this site Prepare for a new site Improve my productivity system Include more tools Try a new set of tools As it often does, the year brought some unexpected changes. Midway through I decided to start a new website about writing, creativity, and productivity and I also moved my existing sites to a new hosting company. For a variety of reasons, the latter took more time than expected. On the bright side, moving helped with some of my goals for the year and I'll get to the details in a bit. I decided to grade myself in two ways, once looking only at the themes, and once looking only at the goals. Surprisingly or unsurprisingly I scored the same 62.5% each way. As you read through the details I'll present my theme grade and at the very end I'll show you how I came up with the grades for the specific goals. Create More Products I only listed one goal under this theme, which was to write more books and I started the year on schedule. I spent the first few weeks looking over the flexbox book I had started the previous year and I made notes for how to finish it. I needed to see what was left to do and I needed to update some of the information. Then I began working and revising. When I was about a month away from finishing, I put the book on hold while I made my mid-year changes. I never got back to the book or the ones I planned on writing after it. Technically I didn't complete the lone goal, however I do think I complied with the spirit of this theme, which was to make progress in creating products to sell instead of custom services. I stopped taking on clients at the start of the year. I'm still working with existing clients, but even there I've allowed the work to grow fewer and further between. I've started work on a new site geared toward writing, creativity, and productivity, and have been talking with a couple of fiends about building a larger site and business model around my small business forum. Finally I started a rethink of the content on this site and how I might use it toward the goal of having more products to sell. I'm going to be generous and give myself credit for what I worked on. I'll give myself 0.5 out of 1.0 for having worked on the flexbox book as much as I did as well as making progress in the spirit of this theme. Market New and Existing Products I offered three specific goals under this theme. Develop a content marketing strategy Learn email marketing Widen distribution I don't think I made much progress with the general idea of this theme, especially the existing products part, but oddly enough I did make progress with each of the specific goals. Develop a content marketing strategy I have spent considerable time rethinking the content on this site as well as planning content for two other sites and I've come up with a content marketing strategy for all three. I still need to implement the strategy and I suspect it'll need more than a little fine tuning and practice on my part to execute well. However, I do have a strategy in mind for each of the sites, which was the goal. Learn email marketing I've started to use Mailchimp with the new writing site. I've been sending out a regular newsletter with new content every three weeks. I'm learning my way around Mailchimp and what I can do with it and email marketing in general. Of course, there are still plenty of features I've yet to actually try and I'm hardly close to being an email marketing expert, but my goal last year was more about starting the learning process. I learned what I wanted to learn and even started to build a list. Widen distribution I didn't widen distribution of my book Design Fundamentals, which is still only available here on the site. I want to rewrite the first section of the book and make a few other presentational changes before selling it elsewhere. Unfortunately I didn't get to those changes and so I didn't start selling elsewhere. The other part of this goal was to write more for other sites and I wrote seven guest articles the first half of the year. I don't think I stated an amount I wanted to write, though in my mind, the goal was 10. I didn't keep up the momentum the second half of the year. I'm giving myself 0.5 for this theme, because I made progress with two and a half of the three specific goals, even if I don't think I made the progress I wanted in the overall theme or truly completed any of the goals as I intended. Design/Plan for the Future The idea behind this theme was to make changes reflecting the changes I'm making to the business model. Overall I think I met this goal. When I took a break from blogging last summer, it was in part to make plans and complete projects relating to my then two existing sites and one new site to come. I moved my sites to a new host, which as I mentioned earlier, took more time than expected. In addition to adjusting to a new host, the sites had grown considerably larger since the last time I moved them. Prepare for a New Site There's no live site yet, but I have the design generally worked out. I have a prototype for the site on my laptop that I'm still working on. Some of what I'm still fine tuning is the content organization and the navigation. I've also planned some content for the site, though I've yet to write it. I have been sending out an email newsletter and I placed an ad to the new site here in the hopes that you might sign up. Improve this Site The hosting move fixed some of what I wanted to do on this site, such as the problem with the archives page not loading properly and the site constantly going down for a few minutes here and there. Many of the performance issues I wanted to address were corrected by the move. That's not to say the performance of this can't be better, but many of the issues I planned on tackling in 2015 are fixed. On the other hand I didn't rework the book(s) section on the site and while the archives page loads, it's still not organized well. I did remove a lot of the content that was here, but wasn't worth reading or had outlived its purpose, which hopefully makes it easier to find the better content. The page still needs work. I'm giving myself 0.875 points because other than the specific goal to work on the book(s) section of the site and not reworking the archives page like I wanted, I did complete my goals and I did meet the general goal of the theme. Improve My Productivity System I list productivity as a goal in some form every year. I didn't start out the year making improvements, but I have over the second half of the year. The last few months I've rethought my entire system and reworked all the tasks and projects that were in it. Include More Tools I never did use my task management app, Things, on my phone or tablet. I did on occasion add a task through my phone and I did sometimes look over my tasks on my phone, but I can't say there was any purpose behind either. I was killing time more than I was trying to be productive. I found I didn't really need to incorporate phone or tablets to keep my system organized and actually do the things listed in the system. Then again had I tried to use them more maybe I would have found ways they could help. I did integrate Fantastical into my workflow and I used it to improve the set up and tracking of my editorial calendar. Try a New Set of Tools I am trying a new set of tools or rather the first new tool of a set. Midway through the year I didn't feel like I was getting a lot done. I had let my system slip. I wasn't reviewing it regularly and I'd let some bad habits creep in. To shake myself up and also because this was a listed goal, I purchased OmniFocus and switched over from Things. I downloaded the two week trial and kept both apps open for two weeks. At the end of the trial, I decided to purchase OmniFocus. I've been waiting to see if there are holiday sales for the iOS version, though I plan to purchase them sale or not. This isn't a knock on Things by the way. Both are great apps. I needed the change. New software forced me to go through all my tasks and projects as I moved them to the new app and because both OmniFocus and Things each have limitations the other doesn't, I had to think differently about my work. I'm giving myself 0.625 for meeting the overall goal of the theme and for making the switch to OmniFocus during the year. I took points off for not really incorporating devices beyond my Macbook into my workflow even though I didn't find it necessary. Closing Thoughts Overall I gave myself 2.5 out of 4.0 for the year's themes. I met the spirit behind the first theme (half a point), met nothing for the second theme, and made the progress I wanted with the last two themes (a point each). On the specific goals I'm giving myself 5.0 out of 8.0. If I made enough progress with the goal I called it a success even if I didn't quite complete some like I intended. It's a bit of a curve, but I think it's fair to grade on a curve this year, because of the change in focus midway through. I gave myself a point for creating a content marketing strategy, starting to learn email marketing, guest posting, improving this site, preparing for new sites, and switching over to using OmniFocus. The non-point goals were writing more books, additional distribution of existing books, and no use of productivity tools on other devices. That works out pretty well since both grades equate to a 62.5% success rate. When I was in school that was usually a failing grade, but I'm grading on a curve and calling the year a success, albeit a mild one. 2015 was mainly about making progress as I transition my business and I think I succeeded overall in making progress. It wasn't always the progress I planned, but I see myself closer to where I want to be than I was a year ago this time. Happy Holidays. I hope you have a Happy New Year later this week. Next week it will be a new year and keeping with my tradition my first post of the year will share the goals I have for 2016. See you then. Download a free sample from my book Design Fundamentals. The post Grading My 2015 Goals — I Passed Thanks To The Curve appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design. To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States

SVG Text On Path—Part 2 - Vanseo Design

---

SVG Text On Path—Part 2 Posted: 22 Dec 2015 05:30 AM PST Creating SVG text along a path opens up some interesting and creative possibilities. Last week I showed you the <textPath> element and how to add a reference to a path you define. I also showed you the startOffset attribute so you can position the text somewhere along the path other than the start. Today I want to talk about two remaining attributes of the <textPath> element and then because last week's examples all involved straight line paths, I thought I'd show you text on a curved path with a tspan styled differently from the rest of the text. First the two remaining attributes. If you'd like a reminder about how to create paths in SVG you can read either or both of my posts from a previous SVG series SVG Basics—Creating Paths With Line Commands SVG Basics—Creating Paths With Curve Commands The method and spacing Attributes You're probably not going to use either the method or spacing attributes all that often. They both refine how the text (or spacing) will render on a path and my guess is the defaults will be fine nearly all the time. Glyphs of certain fonts may not look quite right when displayed on a curved path. The method attribute allows you specify either of two ways that the glyphs should be rendered along a path. It takes either of two values, align or stretch, with align being the default. A value of align renders glyphs using simple 2×3 transformations in a way that the glyphs neither stretch nor warp. A value of stretch will stretch and possibly warp the glyphs, but depending on the path, might look better. Unfortunately there doesn't seem to be much support for the method attribute. I've only been able to get examples to work in Opera, which is one reason I suspect you won't use it much. I also had to experiment to come up with an example where you could see a small difference. In this example I set the text "SVG Text" on two different curved paths and set the method of the first to stretch and the second to align. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <svg width="660" height="1000"> <defs> <path id="myTextPath" d="M0,0 a1,1 0 0,0 700,0" /> </defs> <defs> <path id="myTextPath2" d="M0,70 a1,1 0 0,0 700,0" /> </defs> <text x="60%" y="0" style="stroke: #000;font-size: 5em;"> <textPath xlink:href="#myTextPath" method="stretch">SVG Text</textPath> </text> <text x="60%" y="0" style="stroke: #000;font-size: 5em;"> <textPath xlink:href="#myTextPath2" method="align">SVG Text</textPath> </text> </svg> Unless you're using Opera you won't notice any difference so instead of a live example, I'll show you a screenshot captured in Opera. It's hard to notice with a quick glance, but if you look closely, you can see the letters along the first path are a little further apart from each other. If you look closer still, you'll see the letters along the first path are also a little deformed when compared to their counterparts along the second path. Here are a couple of additional example from Tavmjong Bah's web site that shows more pronounced changes in the glyphs. You'll probably want to leave the default value, align, most of the time, but I'm guessing there are cases where a value of stretch will look better. The spacing attribute similarly adjusts the text or rather the spacing in the text when rendered along a path. It takes two values, exact and auto, with exact being the default. The value exact tells browsers to render glyphs exactly as specified by the text on a path layout rules, which you can read about if you're inclined. I tried hard, but wasn't able to come up with an example that showed any difference and I was unable to find any searching online. It's possible that no browsers are currently supporting the spacing attribute at the moment. Again, I don't expect you'll be using either of these any time soon, but I thought they were worth mentioning. Hopefully the example I presented gives you an idea why these two attributes exist, even if they don't appear to have the support necessary to use them right now. SVG 2.0 textPath Attributes SVG 2.0 adds a couple more attributes, d and side. Neither is supported as far as I can tell, but I think both will be easy enough to understand without any examples. The d attribute is the same d attribute you use to set a path. SVG 2.0 will allow you to set it directly on the <textPath> element if you prefer that to referencing the path. Here's one of the textPaths from the previous example that includes the d attribute and removes the xlink:href to reference the path (Again with SVG 2.0 you would use href and not the full xlink:href). 1 2 3 <text x="60%" y="0" style="stroke: #000;font-size: 5em;"> <textPath d="M0,0 a1,1 0 0,0 700,0">SVG Text</textPath> </text> If a textPath includes both the d attribute and an href attribute, the latter will be ignored and the path set on d will be the path the text renders along. The second additional attribute is the side attribute. It will take a value of either left or right and it effectively reverses the path, which you can see in the following screenshot I grabbed from the spec. The text on the left uses the value left (the default) and the text on the right uses the value right. You can do the same thing now by altering the paths, but side will be easier to use. Since I'd rather not wrap up this series with something that doesn't work, lets look at one more example that does work. tspans in textPaths Just as you can with text elements, you can use tspans inside textPaths to position and style a part of the text differently. Here's an example of text along a curved path that uses a tspan to style one word differently than the rest. Here's another reminder about the curve path commands if you need a refresher. In the example I use both M and C commands. M works the same way as it does for linear paths. C stands for cubic bézier. It takes three coordinates, the first being the control point at the beginning of the curve, the second being the control point at the end of the curve and the third being the ending point for the curve (and the starting point for the next curve). 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;"> <defs> <path id="text-path" d="M10,165 C50,65 150,-65 250,65 C350,165 450,265 550,165 C650,65 650,65 650,65" /> </defs> <path id="MyPath" d="M10,165 C 50,65 150,-65 250,65 C 350,165 450,265 550,165 C 650,65 650,65 650,65" fill="none" stroke="#000" stroke-width="2px" /> <text style="stroke: #000;"> <textPath xlink:href="#text-path" startOffset="35%">SVG <tspan fill="red" stroke="red" stroke-width="2px" dy="8">Text</tspan> <tspan dy="-8">on a curved path</tspan></textPath> </text> </svg> The main thing to note here is that I used tspans on the text. I wrapped the word Text in a tspan and styled it to be filled and stroked with red. I then set a dy value of 8 to move the text down a little. Because this would also move everything after the word "Text" down as well, I wrapped the remaining text in another tspan and set it's dy to –8 to align its baseline with the path again. I want to call your attention to how the text moved. In last week's post when talking about startOffset, I mentioned that setting the value of x on the textPath effectively does the same thing as startOffset. It moves the text parallel to the path. Here when setting a value for dy, the text moved perpendicular to the path. I called this out, because it wasn't what I initially expected. My expectation was that changes in x or dx would move the text horizontally and y or dy would move it vertically. I was thinking of the movement occurring in the coordinate space of the viewport. What's actually happening is the movement occurs in the design space of the EM box around the glyphs, which is aligned parallel and perpendicular to the path. The following image from the spec shows this. The baseline of the EM box is parallel to the tangent of the curve of the path. I think it helps to think in terms of parallel and perpendicular as opposed to horizontal and vertical when dealing with paths. Fallback for IE8 and Lower One last thing I should mention before wrapping up this series is that the textPath element isn't supported in IE8 and lower. I don't think that will be a big issue for most of us, but if you have to support older versions of Internet Explorer you can use vector markup language (VML). The link in the last paragraph will walk you through the details. VML path syntax is similar to SVG path syntax, though you'll notice the rest of the markup used in the examples is quite different. Again I don't expect you'll need to support IE8 and down, but in case you do there's a solution for getting text to render along a path. Closing Thoughts I hope you agree that using the textPath element allows for some interesting and creative possibilities when displaying SVG text. Working with textPaths is relatively simple I think. The hardest part is understanding how to create the paths and that just requires a little practice and some experimentation with the values. Referencing the path in the textPath element should be easy enough if you've been following along with this series. That brings us to the end of this series on SVG text. There's more to talk about in regards to SVG and I'll return to it again with another series about clipping, masking, and filter effects sometime in the next few months. It also comes close to bringing us to the end of 2015. Next week I'll present my "year that was" post for 2015. I'll remind you of the goals I set for the year and fill you in on how well I did or didn't do in accomplishing them. The week after will be the first post in 2016 and I'll talk about the goals I have for the coming year. Merry Christmas and Happy Holidays. Download a free sample from my book Design Fundamentals. The post SVG Text On Path—Part 2 appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design. To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States

SVG Text On A Path — Part 1 - Vanseo Design

---

SVG Text On A Path — Part 1 Posted: 15 Dec 2015 05:30 AM PST In addition to laying out text in a straight line SVG includes the ability to have text laid out along any path you create. This opens up many possibilities for displaying text. It's easy to set up. And the results are fun. We've covered a lot so far in this series on SVG text. One thing we haven't changed so far is the path on which the text is laid out. Until now the text has always been located along a default straight line. Today I'll show you how to work with SVG text along straight line paths that change direction and next week I'll show you how to create SVG text along any curved path you can imagine. The textPath Element To create SVG text that follows a path you use a <textPath> element in combination with a path you define inside <defs> tags. To refer to the path you'll use an xlink:href attribute on the <textPath>. Note: SVG 2.0 is dropping the xlink: and will simply use href to refer to the path. If you need a reminder for how to work with paths, I'll refer you to a couple of posts from one of my previous SVG series. SVG Basics—Creating Paths With Line Commands SVG Basics—Creating Paths With Curve Commands As we've done throughout this series, let's work our way through an example and then build on it. In this first example I created an SVG element, defined the width and height of the viewport and then styled it. Next I created a linear path and gave the path an id of text-path. I'll explain the values in the path momentarily. The path id is referenced inside the textPath element through the xlink:href attribute. 1 2 3 4 5 6 7 8 9 10 11 <svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;"> <defs> <path id="text-path" d="M225,150 v-80 h240 v80 Z" /> </defs> <text> <textPath xlink:href="#text-path" >SVG text on a linear path</textPath> </text> </svg> The path is created inside <defs> elements and is defined by the values set on the path definition (d). M225,150 — move to point 225,150 v–80 — move up vertically (–80) h240 — move to the right horizontally (240) v80 — move down vertically (80) Z — closes the path Here's the result. As you can see, the text followed the path. It moved up, to the right, and then down again. The most complicated part was the path itself. Again if you need a path reminder I'll point you to the two posts I mentioned previously. The textPath Attributes There are three attributes specific to the <textPath> element in SVG 1.1. The fourth, xlink:href, isn't specific to textPaths Of the three attributes, startOffset is the one you'll use most often. The startOffset attribute does just what it sounds like it does. It allows you to offset the start of the path for the initial text position. It takes a length as a value, either a percent or a number. If the latter is used, the number represents a distance along the path measured in the current coordinate system. Let's revisit the previous example adding the startOffset attribute so you can see how it works. I've also added another path. It's the exact same path the text sits on. I outlined it in blue and I added it so we could see the path itself. 1 2 3 4 5 6 7 8 9 10 11 12 13 <svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;"> <defs> <path id="text-path" d="M225,150 v-80 h200 v80 Z" /> </defs> <path id="text-path" d="M225,150 v-80 h240 v80 Z" stroke="#00f" stroke-width="1px" fill="none" /> <text style="stroke: #000;"> <textPath xlink:href="#text-path" startOffset="20%">SVG Text on a linear path </textPath> </text> </svg> I set startOffset to 20% and you can see that the text now starts some distance from the initial point (225,150). I won't claim to have measured the distance, but it looks about 20% of the whole path. You can actually do the same thing and offset the path without using startOffset. Here's another version of this example. I removed the startOffset on the text path and instead added a x-coordinate of 20% to the text element around the textPath. Note: While I used x here, you could set the dx attribute instead and achieve the same result. 1 2 3 4 5 6 7 8 9 10 11 12 13 <svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;"> <defs> <path id="text-path" d="M225,150 v-80 h200 v80 Z" /> </defs> <path id="text-path" d="M225,150 v-80 h240 v80 Z" stroke="#00f" stroke-width="1px" fill="none" /> <text x="20%" style="stroke: #000;"> <textPath xlink:href="#text-path">SVG Text on a linear path </textPath> </text> </svg> If you compare the result of this example with the previous one, you can see they look the same and the text starts in the same place. Notice that I set a value for x, but the text moved along the path in both the x and y directions. A value of x moves the text parallel to the path. Don't think of it in terms of horizontal and vertical, but rather parallel and perpendicular to the path. That's the very basics of working with SVG text along a path. There's still more to cover with creating text along a path, but let's pick things up again next week. Closing Thoughts Being able to display SVG text along any path you want opens up a lot of creative possibilities and it's also a lot of fun. Hopefully you'll agree it's not too difficult. The most difficult part is creating the path itself. Adding the text is the easy part. If SVG paths are new to you or if you need a review for what all those letters and numbers mean, I'll refer you again to a couple of posts from my first round of this SVG series. You might want to look over both, particularly the curve commands before next week's post. SVG Basics—Creating Paths With Line Commands SVG Basics—Creating Paths With Curve Commands If you feel comfortable working with SVG paths, have some fun. Next week I'll continue with the remaining attributes and then I'll show you text along a curved path complete with tspans and different styles. Download a free sample from my book Design Fundamentals. The post SVG Text On A Path — Part 1 appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design. To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States

How To Work With The SVG Text Spacing Properties - Vanseo Design

---

How To Work With The SVG Text Spacing Properties Posted: 08 Dec 2015 05:30 AM PST Most of the time the default spacing between characters and words is perfectly fine, but when working with display type in headlines and subheads you may want to adjust the spacing in your text. SVG provides a way to do just that. Last week I walked you through the different font selection properties available for use as attributes on SVG text elements. This week I want to talk about some other typographic related properties, specifically the SVG spacing properties. Spacing Within Lines of Text SVG 1.1 provides three different spacing properties, kerning, letter-spacing, and word-spacing. Kerning is being removed in SVG 2.0, though I'll include it in the discussion here in case you run across it. Here are definitions for each. I'll offer a couple of examples showing the properties in use momentarily. kerning—adjusts the space between specific letter pairs such as AV. letter-spacing —adjusts the space between all letters. It's equivalent to tracking in non-CSS talk. word-spacing —adjusts the space between words and not individual characters. You may already be familiar with and have used the latter two properties, letter-spacing ad word-spacing, in your CSS. In fact we usually consider letter-spacing to be the CSS version of kerning, which isn't exactly true. Letter spacing deals with every letter and kerning deals with specific pairs of letters that require adjusting. However while kerning and letter spacing are different things, they're going to do the same thing when you set their values. They're going to move letters further apart (positive value) or closer together (negative value). Here's an example to illustrate. 1 2 3 4 5 6 <svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;"> <text x="80" y="50" font-family="georgia" kerning="-2">Is this kerning or letter spacing?</text> <text x="80" y="80" font-family="georgia" letter-spacing="-2">Is this kerning or letter spacing?</text> <text x="80" y="150" font-family="georgia" kerning="2">Is this kerning or letter spacing?</text> <text x="80" y="180" font-family="georgia" letter-spacing="2">Is this kerning or letter spacing?</text> </svg> In each pair the first line of text uses kerning and the second uses letter-spacing. The lines in the top pair both have values of –2 and the lines in the bottom pair both have a value of 2. You can see both pairs look the same. It's really up to you to use them properly. Kerning should be applied to specific pairs of letters, so you'd want to wrap the letters in a tspan and then apply kerning. Whether to use one or the other is a non-issue in SVG 2.0 as kerning is being removed from the spec so you probably shouldn't use it at all at this point, but I thought I should mention it in case you come across it. The word-spacing property adjusts the spaces between words and not letters themselves. Here's an example. I've used the same line of text inside two different <text> elements. The only difference between them is the word-spacing. It's set to –2 in the first line and 2 in the second. 1 2 3 4 <svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;"> <text x="100" y="100" font-family="georgia" word-spacing="-2">This is a word-spacing of -2</text> <text x="100" y="130" font-family="georgia" word-spacing="2">This is a word-spacing of 2</text> </svg> You can see that the word "This" has the same amount of space between characters and then the space between "This" and "is" varies due to the different word-spacing values. The same is true of the other words and spaces, though it's easiest to see with the first couple of words. White Space One thing SVG text doesn't do is wrap text automatically. Instead SVG text will keep going and going in a straight line. Remember that the viewport we set using the width and height attributes is the size of the window that lets us peer into an infinite SVG canvas. The canvas is still infinite though, and while you may not see the text outside the viewport, it can still render outside the viewport. If you want longer blocks of text to remain inside the viewport, you can use tspans and position them where you want. Other than explicitly positioning bits of text or using the properties I've discussed so far in this post, you have little control over the white space in your text. SVG 2.0 is supporting the CSS white-space property, though at the moment I don't think any browser is supporting it as an SVG attribute. It's meant to replace the SVG 1.1 xml:space property, which while limited in what it can do, does work. Let me briefly explain the idea of the white-space property and then I'll show you an example using xml:space. The white-space property will specify: whether and how white space inside the element is collapsed whether lines may wrap at unforced soft wrap opportunities The property takes any of five values. The spec didn't see fit to offer definitions and instead points you to definitions for six values in the CSS3 Text Module Level 3 spec. Below is an image of the table that summarizes the behavior of each value. Here's a bit more definition from W3Schools. Scroll down to the Property Values section for the definitions. The idea is that some white space is collapsed and some is preserved and sometimes a line of text can wrap and sometimes it can't. That makes me hopeful that SVG text will at some point be able to wrap automatically. The white-space property is replacing xml:space from SVG 1.1, which offers less control as it only takes two values, default and preserve. However, since xml:space does work I'll show you an example. I created two text elements with the text "Having fun with whitespace" and I added tspans so the word "whitespace" could be separated from the rest of the text. I then added some tabs before the whitespace span. 1 2 3 4 <svg width="660" height="220" style="outline: 1px solid red; font-size: 1.5em; overflow: visible;"> <text x="50" y="100" xml:space="default"><tspan>Having fun with</tspan> <tspan>whitespace (default)</tspan></text> <text x="50" y="140" xml:space="preserve"><tspan>Having fun with</tspan> <tspan>whitespace (preserve)</tspan></text> </svg> The first line uses xml:space="default" and you can see the tabs are collapsed into a single space. The second line uses xml:space="preserve" which preserves the extra whitespace. The SVG 2.0 white-space property will essentially do the same thing, but it will also provide a means to preserve new lines instead of whitespace on a single line. Text Decoration I probably should have included this section in last week's post on font properties, but since I didn't, here it is today. You can set the text decoration of SVG text. Since I assume you know how to use text-decoration as a CSS property, I'll simply offer an example using it as an SVG attribute. 1 2 3 4 5 <svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;"> <text x="220" y="60" font-family="georgia" text-decoration="overline">Text Decoration</text> <text x="220" y="120" font-family="georgia" text-decoration="underline">Text Decoration</text> <text x="220" y="190" font-family="georgia" text-decoration="line-through">Text Decoration</text> </svg> From top to bottom values are overline, underline, and line-through. Believe it or not there's also a blink value, but fortunately I couldn't get it to work, which hopefully means it's been deprecated. We don't need a return of blink, except as an episode of Doctor Who, which is worth watching again and again. Closing Thoughts You probably don't use the CSS versions of these properties often. I know I don't change the spacing between letters and words in ordinary text, much, if ever. However, when it comes to display type there are times when it makes sense to adjust the spacing and since you're more likely to use SVG text as display type, it's a good idea to know how to adjust the white space when you want. There's one last topic I want to cover about SVG text and that's how to display your text along a path of your choosing instead of having it always be along a straight line. The next couple of weeks I'll take a look at the <textPath> element and its associated attributes. Download a free sample from my book Design Fundamentals. The post How To Work With The SVG Text Spacing Properties appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design. To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States

How To Use SVG Font Properties - Vanseo Design

---

How To Use SVG Font Properties Posted: 01 Dec 2015 05:30 AM PST I've said throughout this series that SVG text gains the best of both worlds in that it's rendered as a graphic while still being selectable and searchable text. So far, I've been focused in the "rendered as graphic" world. Today I want to talk more about the text side of things. I want to talk about how you can change the font of the text and set its weight and similar. Much of what's in this post will likely be familiar to you in that you've set font-size as a CSS property. We'll look at these properties as attributes on SVG text elements here. You can think of this post as a review of what you can do with text in general and how to manipulate SVG text specifically. SVG Font Selection Properties SVG provides seven different font properties along with shorthand to set five of them. You're probably familiar with the five, though the other two are possibly new to you. They were for me. Here's the list of all the font properties you can use with SVG. You can use any of them as attributes on the <text> or <tspan> elements. You can also set them as CSS properties, though I'll be using them as attributes throughout this post. font-family font-style font-variant font-weight font-size font-size-adjust font-stretch font The font shorthand is only available as a CSS property and can't be used as an attribute on SVG elements. One thing to note when using it with SVG is the line-height has no effect. With SVG it's assumed to the the same as the font-size. I trust you know how to work with the first five properties and have used them before in stylesheets. I'll show you a quick example that uses all five and then we can talk in a little more depth about font-size-adjust and font-stretch. In the following example I repeated the text "SVG" four times, each time using a different font-family. I also adjusted an additional font property on each so you can that they work. 1 2 3 4 5 6 <svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;"> <text x="130" y="100" font-family="Palatino" font-variant="small-caps">svg</text> <text x="230" y="100" font-family="Helvetica" font-style="italic">SVG</text> <text x="330" y="100" font-family="Georgia" font-weight="bold">SVG</text> <text x="430" y="100" font-family="Verdana" font-size="1.5em">SVG</text> </svg> The font-families in order are Palatino (font-variant), Helvetica (font-style), Georgia (font-weight), and Verdana (font-size). In parenthesis is the property I adjusted for each. I set the first in lowercase, because I chose a value of small-caps for the font-variant and it's easier to notice the difference this way. Again, while you could set all these properties in a CSS file, here they're all set as attributes on the <text> element. I'm assuming you don't need any more explanation about this example and may not even have needed me to show it. Let's move on to the properties you may not be familiar with. The font-stretch Property The font-stretch property allows you to adjust how much the glyphs are expanded or condensed. It's done by having the browser choose the appropriate face from a family of fonts. Browser support is currently limited to Internet Explorer, Edge, and Firefox and while you may never have used it, font-stretch is a valid CSS property with the following possible values. normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded inherit You might think the property does exactly what it says and stretches or condenses whatever font you're using, but that's not quite right. The font-stretch property is meant for fonts that come with several faces and it substitutes the best face based on the value set on the property. I think this will make more sense with an example. Here I set three lines of text and for each I used the font Myriad Pro. I chose Myriad Pro, because it included a condensed version. I set the font-stretch property on the second line of text to condensed and the third line to expanded. 1 2 3 4 5 <svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;"> <text x="120" y="80" font-family="myriad pro">This text is Myriad Pro</text> <text x="120" y="120" font-family="myriad pro" font-stretch="condensed">This text is Myriad Pro condensed</text> <text x="120" y="160" font-family="myriad pro" font-stretch="expanded">This text is Myriad Pro expanded</text> </svg> Because this only works in a few browsers and because you may or may not have Myriad Pro installed on your computer, I'm showing a screenshot of the results when I viewed the code in Firefox. Let me explain what's going on. The first line of text doesn't have a font-stretch property set so you see the normal font-face. The second line of text is set as condensed so Firefox substituted the condensed face of the font. The third line is set to expanded. Since I don't have an expanded version of Myriad Pro, Firefox used the normal face. I hope that makes sense. The idea is that supporting browsers choose the best face of the specific font based on the value of font-stretch and the available faces of the specific font. The font-size-adjust Property Hopefully when you set font-families on HTML elements you use a font-stack in case someone viewing the page doesn't have your first choice installed. The downside is that different fonts have different x-heights and if the second choice in the stack is used, it might throw off the font-size and consequently throw off any measurements you've based on that font-size. This happens because all fonts have an "aspect value," which is the difference in size between the lowercase x and uppercase X of that font. The font-size-adjust property allows you to change the aspect value so the different fonts will display at the same size. Again support is limited, this time to Firefox only and as with font-stretch, I think this will make more sense with an example Here I have two lines of SVG text each with two <text> elements. On each line Baskerville is the font on the left and Futura is the font on the right. I placed lowercase x's in the middle so you can better compare the different sizes of the same letter. 1 2 3 4 5 6 <svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;"> <text x="120" y="100" font-family="baskerville">Baskerville xx</text> <text x="300" y="100" font-family="futura">xx Futura</text> <text x="120" y="130" font-family="baskerville">Baskerville xx</text> <text x="300" y="130" font-family="futura" font-size-adjust="0.42">xx Futura</text> </svg> Due to the lack of browser support I'll again show a screenshot instead of the live code. On the first line of text I didn't set the font-size-adjust property. This is the control group. You can see that Futura has a larger x-height than Baskerville. On the second line I set the font-size-adjust of Futura only to 0.42. You can see it now has a smaller x-height. I tried to make the x-heights of both equal, though it's possible I'm off a bit. Even if I am, I hope it's clear what happened. Closing Thoughts I suspect much of this post has been a review. Something tells me you've used most of these font properties before, but as CSS properties and not as attributes on SVG elements. I trust you're now aware they can be used as attributes. The two properties that might have been new to you are font-stretch and font-size-adjust. Neither has much support at the moment so you probably won't be using them right away, but hopefully you'll know how when support is better. My goal with this post was to show you that SVG text is text and the same font properties you often set on regular text will work with SVG text too. Next week I want to continue to look at SVG text as text and talk about the spacing properties SVG provides. We'll look at word-spacing and letter-spacing and a couple of other properties as well. Download a free sample from my book Design Fundamentals. The post How To Use SVG Font Properties appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design. To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States