Feed aggregator

Loneliness: The cost of the 'last taboo'

BBC News - 52 min 17 sec ago
Loneliness costs £6,000 per person in ill-health, says a study, with calls to end the "stigma".

Epilepsy drug warnings 'not reaching women', survey shows

BBC News - 53 min 14 sec ago
Sodium valproate risks harming unborn babies during pregnancy, but 70% of women say they were not informed.

Neanderthal brains 'grew more slowly'

BBC News - 56 min 14 sec ago
A new study shows that Neanderthal brains developed more slowly than ours.

Mexico earthquake: Death toll rises as search for survivors goes on

BBC News - 21 September 2017 - 11:59pm
Rescuers believe survivors could still be found beneath buildings toppled by Tuesday's tremor.

The Papers: Front-page focus on May's big Brexit speech

BBC News - 21 September 2017 - 11:58pm
The prime minister's much-anticipated Florence speech dominates Friday's papers.

Hurricane Maria: Puerto Rico faces long road to recovery

BBC News - 21 September 2017 - 11:58pm
A 101-year-old woman, too frail to move from the ruins of her home, is just one of the storm's victims.

Romelu Lukaku: Striker says it is time to 'move on' from controversial chant

BBC News - 21 September 2017 - 11:39pm
Manchester United striker Romelu Lukaku says he wants the club's fans to "move on" from their controversial chant about him.

Migrant crisis: Dozens feared drowned off Libya coast

BBC News - 21 September 2017 - 11:08pm
At least 50 people are feared drowned after a dinghy reportedly ran out of fuel off the Libyan coast.

Brexit: PM bids to break deadlock with two-year deal offer

BBC News - 21 September 2017 - 10:42pm
The PM will say in her Florence speech that both sides have a responsibility to get Brexit right.

'Decapitated man' Halloween display in Tennessee sparks 911 calls

BBC News - 21 September 2017 - 10:42pm
The stuffed puppet display, of a man decapitated by a garage door, spooked Tennessee residents.

Super 8s: Salford Red Devils 4-30 St Helens

BBC News - 21 September 2017 - 10:11pm
St Helens all but seal a place in the play-offs with victory at 12-man Salford in their final Super 8s match.

How to: use the AtF Spark font for creating charts with only text

Online Journalism Blog - 21 September 2017 - 9:54pm

AtF Spark is “a typeface for creating sparklines in text”. In other words, the fonts will convert numbers into something that looks like a chart. It looks pretty cool, and is a neat way to add a little spark (ahem) to your text.

But while the GitHub repo gives some basic instruction on using the fonts, it also assumes quite a bit of prior knowledge, so here’s a tutorial to explain how to use it if you’re not already familiar with web fonts and other technicalities of web design.

Breaking down the elements

To create a webpage with an AtF Spark chart you need the following ingredients:

  1. A HTML page. Specifically, we need to make sure that part of the HTML includes some numbers that the font can work with.
  2. A CSS file (style sheet). The CSS file is what ‘styles’ part of the HTML into the AtF Spark font.
  3. The AtF Spark font. This needs to be downloaded from the Spark GitHub repo’s ‘Output/Webfonts’ folder and stored in the same place as the CSS file.
  4. Links between all three: the HTML file needs to link to the CSS style sheet file, and the CSS style sheet needs to link to the font file.
Creating the HTML page

Let’s make the HTML page first. I’ve created mine using the text editor Atom, and saved it as ‘index.html’.

What HTML you put in the page doesn’t really matter – but you must have a section that is going to be turned into the chart, and a link to a stylesheet.

The chart section needs to include a series of numbers separated by commas, inside curly brackets, like so:

<span class="barchart">4 {4,0,0,0,6,29,70} 70</span>

Note that there should be no spaces after the commas, and all numbers must be between 0 and 100 (for the bar chart font), otherwise it won’t work.

The example above also has a <span> tag with a class attribute. This means we can target, or rather select, the text inside with a style sheet, in the second step.

To do that, we need to make sure that there is a link to that style sheet. Here it is, inside the <head> tags:

<link rel="stylesheet" href="css/style.css">

But where is that stylesheet? We’ll need to create it, in a minute.

The full HTML for a page including the numbers, and a link to the stylesheet we’re about to create, is below:

<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Spark font example</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <p>There were 70 Airprox reports involving drones coming close to aircraft over the UK in 2016 - compared to 29 in 2015 and just 6 in 2014. There were no incidents at all between 2011 and 2013: <span class="barchart">4 {4,0,0,0,6,29,70} 7</span>. There have been 33 incidents up to May 2017. </p> <p>That chart above is created using the font Spark: each bar of the chart is actually a number.</p> <p> The font to turn it into a chart needs to be stored in the same place as the CSS file.</p> </body> </html> Creating the stylesheet

Next we need to create the stylesheet that we’ve just linked to. 

The link said <link rel="stylesheet" href="css/style.css"> so this file needs to be called ‘style.css’ (again, I created mine using Atom), and it needs to be in the same place as your ‘index.html’ file, inside a folder called ‘css’. (You could put it elsewhere, and/or call it anything else, as long as you change the link accordingly)

Bringing fonts into a stylesheet

To use this font in the webpage we need to add a line at the top of the CSS file:

@font-face { font-family: spark; src: url(spark-bar-medium.woff); }

The @font-face rule, as one explainer puts it: “allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.”

Anything in curly brackets after @font-face specifies the parameters of how that font is loaded. 

First, font-family: names the font for our stylesheet’s purposes. This name can then be used elsewhere to refer to it. In this case we’ve named it spark.

Second, src: specifies where the font should be loaded from. In this case, it also uses url() and then inside those brackets, the location of the file. 

As it happens, this doesn’t look like a URL – but if you imagine this webpage on the web, it simply means it’s going to look for a file with that name in the same location (on the server) as the webpage.

Where is this file? We’ll come on to that in a minute.

First, we need to add another rule which applies this font to the span created earlier. Here it is:

span.barchart { font-family: spark; font-size: 24px; color: orange; }

This span.barchart selector targets, or selects, anything with the HTML tag <span> and the class attribute ="barchart" (the period . here means ‘class’). Remember that the number series we created earlier is in exactly such a tag.

Then we specify three rules about how anything selected in this way should be styled. The first is font-family: spark;. This is where that font – named ‘spark’ earlier – is applied.

The next two lines add a font size and colour, too, but these are not essential. I just like orange bar charts.

The full CSS file, then, looks like this (it includes some extra lines that aren’t essential but add a bit of browser-proofing):

@font-face { font-family: spark; src: url(spark-bar-medium.woff); font-variant-ligatures: contextual; -moz-font-feature-settings: "calt"; -webkit-font-feature-settings: "calt"; font-feature-settings: "calt"; } span.barchart { font-family: spark; font-size: 24px; color: orange; } Finally, download the font file to the same place as the CSS file

The AtF Spark font can be downloaded from the GitHub repo’s ‘Output/Webfonts’ folder. At the moment there are 6 folders in there: 3 bar chart options (medium, narrow and thin), 2 dot charts (medium and small), and 1 dot line (medium).

You can see some examples of the different chart types in action on the Spark page on the After The Flood website.

Click on the folder for the chart/font you want to use, and you should see 5 files in that folder. 

These are 5 different formats. We’ve used the ‘.woff’ format, so click on that version, and you should be taken to a page which doesn’t look like much (GitHub cannot show it in any way, so just shows a grey box instead). Click Download to download this file to your computer.

Once downloaded, move the file to the same folder as the CSS file.

Now that link in the CSS file should work. And the link in the HTML file pointing to the CSS file means that styles in that sheet should now be applied to the HTML. If you load or refresh the HTML page you should now see the effect.

For more examples you can find a webpage and stylesheets in the ‘/docs’ folder of my ‘using-spark’ GitHub repo, which also generates a website at https://paulbradshaw.github.io/using-spark/

Note: At the moment the fonts are “compatible with Microsoft Word (2011 and later), Adobe Creative Cloud applications, Chrome 33+, Safari 6+, Firefox 4+, and Internet Explorer 10+. (See: http://stateofwebtype.com/ for a fuller listing of browser compatibility.)”


Filed under: online journalism Tagged: AtF Spark, CSS, fonts, tutorial

Scottish League Cup: Motherwell 3-0 Aberdeen

BBC News - 21 September 2017 - 9:37pm
Dominant Motherwell see off Aberdeen to reach their first League Cup semi-final since January 2011.

Sir David Attenborough on his hunt for the Kimodo Dragon

BBC News - 21 September 2017 - 9:12pm
Sir David Attenborough spoke to the BBC about Zoo Quest, the environment and the planet's future.

L'Oreal heiress Liliane Bettencourt dies at 94

BBC News - 21 September 2017 - 9:00pm
Liliane Bettencourt was suffering from dementia and died peacefully at home, her family say.

Government to pay £1.1m for Sir Edward Heath inquiry

BBC News - 21 September 2017 - 8:16pm
The former prime minister, who died 12 years ago, has been the subject of a two-year inquiry.

Hurricane Maria 'leaves 15 dead in Dominica'

BBC News - 21 September 2017 - 6:33pm
At least 15 people are dead and 20 are missing on Dominica after Hurricane Maria, the prime minister says.

North Korea: Trump signs new order to widen sanctions

BBC News - 21 September 2017 - 6:33pm
The US measures will target individuals and firms, including banks, that trade with North Korea.

Body found in search for missing teenager

BBC News - 21 September 2017 - 6:31pm
Libbi Toledo, 17, was last seen more than a week ago in Kirkcaldy, Fife.

Parsons Green attack: 21-year-old man released without charge

BBC News - 21 September 2017 - 6:22pm
Five others, aged 17 to 48, remain in custody in connection with Friday's explosion.

Pages

Subscribe to Centre for Journalism at the University of Kent aggregator