Fluid typography using CSS – calc() and Viewport Width

By kristoffer,

I just thought I’d quickly share how to use CSS to set up fluid typography. By that I mean:

Fluid typography is text which size adapts … erm … fluidly to a device’ screen width.

I was recently inspired by this great post on the subject by Michael Riethmuller. After reading the post I set out to realize it on a WP Theme project that I am currently working on (more on that at some other point). And this is what I aimed to achieve:

  • For devices less than 400px wide, font-size should be 12px
  • For devices more than 1200px wide, font-size should be 16px
  • In between 400 and 1200px, font-size shoudl increase linearly

Like this:


To do this, I use the following CSS

html {
  font-size: 12px; // Default

/* Modern browsers fluid typo */
@media screen and (min-width: 400px) {
  html {
    font-size: 14px; /* Fallback for older browsers */
    font-size: calc( 12px + ( ( 16 - 12 ) * (100vw - 400px) / (1200 - 400) ) );
@media screen and (min-width: 1200px) {
  html {
    font-size: 16px;

Basically, it is the calc() function that does the trick. Calc simply does any calculation that you specify. Also, I make use of the vw-unit where 100vw translates to 100% of the viewports width, in px.

Written out and simplified it states:

12px + ( 4 * (ViewportWidth - 400px) / 800 )

To see how this will pan out, we can look at how different ViewportWidths

  • 600px -> 13px
  • 800px -> 14px
  • 1000px -> 15px

That’s what I call fluid typography! I hope that this will help some of you to also take advantage of this sweet way of scaling text!

  Category: Code
  Comments: Comments Off on Fluid typography using CSS – calc() and Viewport Width

Setting up phpDocumentor on Windows with XAMPP

By kristoffer,

phpDocumentor is a tool to generate documentation directly from your ´php´ files. This short post will tell you how to set it up on your Windows machine using XAMPP and pear.

Step one is to install XAMPP. Fire it up, and hit the button “Shell” in the GUI.

In the shell window, type the following commands

channel-discover pear.phpdoc.org
pear install –nocompress phpdoc/phpDocumentor-2.8.1

You are ready to go! Open up a CMD Window and verify that phpdoc command works.

To use, simply type:


  Category: Random
  Comments: Comments Off on Setting up phpDocumentor on Windows with XAMPP

Get ready for WordPress Plugin unit testing with XAMPP and PHP Unit (Windows)

By kristoffer,

Test Driven Development is one of the best strategies for building solid WordPress plugins that are easy to maintain and that is bootstrapped to live a long life in the WordPress ecosystem. There are many variations as to how to implement the approach, but they all have a common principle: Define tests first, then code.

So the first step before starting WordPress plugin development is to get a test environment up and running. This article will cover how to get ready for Unit testing on a local XAMPP development server using PHP Unit.

First, a short definition of unit test that I’ve paraphrased from the Wikipedia article on the topic

a software testing method by which individual units of source code, i.e. the smallest testable part of an application, are tested to determine whether they are fit for use.

In plugin development this usually would be methods or functions.

This article will cover

  • Installing XAMPP
  • Installing PHPUnit
  • Setting up unit tests in a WordPress plugin directory

Installing XAMPP and PHPUnit

This is the easiest part of this small tutorial. Head on over to Apache Friends and download a copy of the XAMPP installer. PHPUnit ships with XAMPP, so once installed, you have both installed. Follow the installation Wizard to set it up on your computer. The rest of the article assumes that XAMPP has been installed in c:/xampp. Next, add the XAMPP PHP directory to the path variable. The directory would be c./xampp/php. To verify that phpunit is properly installed, open up the command line and type

phpunit –version


The expected result would be

PHPUnit X.Y.Z by Sebastian Bergman

Set up the files needed to run plugin unit test


The rest of this article covers how to get and set up the files needed to run WP unit test.

Final directory setup:

  • phpunit.xml
  • tests
    • wordpress-tests-lib
      •  includes
        • <Files from WP unit test>
      • src
        • <Source of wordpress>
      • wp-tests-config.php
    • bootstap.php
    • test-*.php

Create the directory structure needed

All tests and associated files will be located inside the plugin folder. To start with, create a directory within your plugin called tests, and then a subdirectory called wordpress-tests-lib. Tests will be the main folder where all test cases will be located. WordPress-tests-lib will contain the libraries that we depend on to do WordPress unit tests. Lets start with those.

Get the unit test scripts from the WordPress development repository

The first thing needed is the scripts that are used to do WordPress unit tests. These are located in the development repository in the tests folder. To download the files, use the following subversion command.

svn co https://develop.svn.wordpress.org/tags/4.4.2/tests/phpunit/includes/ tests/wordpress-tests-lib

Also, get the config sample file, and store it in tests/wordpress-tests-lib as wp-tests-config.php. Replace the database info at the bottom with your own. Make sure that the database you provide is empty.

Setup PHPUnit to run tests

The first ting you need is the phpunit XML file that tells PHP unit where your tests and your scripts are. I reccomend getting a copy of the config file used by WP-CLI and store it as phpunit.xml in your plugin directory. The file points to a file called tests/bootstrap.php. This is a link to the file that bootstraps your plugin for testing. This file should look something like this.

require_once 'wordpress-tests-lib/includes/functions.php';
function _manually_load_plugin() {
    require dirname( dirname( __FILE__ ) ) . '/mainpluginfile.php';
tests_add_filter( 'muplugins_loaded', '_manually_load_plugin' );

require_once 'wordpress-tests-lib/includes/bootstrap.php';

Basically, what it does is that it required the WordPress test scripts and plugs the plugin into a hook to make sure it is loaded.

Write a test, and you are ready to go

All tests should be kept in files named test-SOMENAME.php in the tests folder. An example test would look like:


class SampleTest extends WP_UnitTestCase {

 function test_sample_true() {
 // replace this with some actual testing code
 $this->assertTrue( true );

 function test_sample_false() {
 // replace this with some actual testing code
 $this->assertTrue( false );


Run the test by executing running phpunit in your plugin folder.

  Category: Random
  Comments: Comments Off on Get ready for WordPress Plugin unit testing with XAMPP and PHP Unit (Windows)

Inspect the internals of a Google Docs file

By kristoffer,

A few days ago, I released a  web app that I’ve called .gdoc Structure Viewer. The simple app lets you inspect the internals of any Google Docs file. It’s meant to be a tool for developers.

How does it work

The web app is pretty simple it is a tree-viewer of the elements within the Google Docs file. My current project had me converting gdoc to json format, and at some point I got tired of copy-pasting the json data into a tree-viewer. Anyways, I extended the script a bit and wrapped a web-app around it – and out came the .gdoc Structure Viewer. Hope that someone other than me find it useful when working with Docs in Google Apps Script.




  Category: Random
  Comments: Comments Off on Inspect the internals of a Google Docs file

Responsive Vimeo and Youtube embed in WordPress

By kristoffer,

A couple of days ago, i published a post on how to do responsive video embeds in a WordPress loaded with Bootstrap. This post is a continuation of that process. If you read the other post you might remember that getting the aspect ratio of the video is what I didn’t do. So, that is what I’ll do today – and it will lead to the best practice way to properly responsively embed videos in WordPress. The code relies on the CSS from the Bootstrap-component Responsive Embed – if you are not using Bootstrap, simply include that code in your CSS.

Starting with oEmbed

WordPress relies on oEmbed when embedding external video content onto your site.

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

That’s pretty neat. The oEmbed code is contained within the file class-oembed.php. It handles oEmbed recognition, calls, processing and more. And within it is what we need to make the best responsive video embed for WordPress. On line 501 there is a function data2html that turns oEmbed data into html code. And the best part is that it applies a filter hook at the end,  apply_filters( 'oembed_dataparse', $return, $data, $url ). And it passes the oEmbed data to the filter – and that is what we need.

oEmbed data

So, what does this oEmbed data look like? Lets look at a couple of sample results from YouTube and Vimeo (click the links to see what the oEmbed call receives).

From Vimeo:

    "type": "video",
    "version": "1.0",
    "provider_name": "Vimeo",
    "provider_url": "https://vimeo.com/",
    "title": "Michael Jackson - Thriller",
    "author_name": "Michael Jackson",
    "author_url": "http://vimeo.com/user2691078",
    "is_plus": "0",
    "html": "<iframe src=\"\/\/player.vimeo.com\/video\/7806742\" width=\"624\" height=\"448\" frameborder=\"0\" title=\"Michael Jackson - Thriller\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe>",
    "width": 624,
    "height": 448,
    "duration": 822,
    "description": "",
    "thumbnail_url": "http://i.vimeocdn.com/video/34694433_295x166.jpg",
    "thumbnail_width": 295,
    "thumbnail_height": 212,
    "video_id": 7806742,
    "uri": "/videos/7806742"

From YouTube:


    "provider_url": "http://www.youtube.com/",
    "title": "Ylvis - The Fox (What Does The Fox Say?) [Official music video HD]",
    "thumbnail_url": "http://i.ytimg.com/vi/jofNR_WkoCE/hqdefault.jpg",
    "thumbnail_width": 480,
    "author_name": "TVNorge",
    "height": 270,
    "version": "1.0",
    "thumbnail_height": 360,
    "width": 480,
    "author_url": "http://www.youtube.com/user/tvnorge",
    "provider_name": "YouTube",
    "html": "<iframe width=\"480\" height=\"270\" src=\"http://www.youtube.com/embed/jofNR_WkoCE?feature=oembed\" frameborder=\"0\" allowfullscreen><\/iframe>",
    "type": "video"

As seen, the response is pretty much the same. The important parts are the typewidth and height data. We can then calculate the aspect ratios, and they turn out to be 1.78:1 (or better known as 16:9) for the Vimeo video and 1.39:1 (close to either 7:5 ratio or the ISO paper size ratio sqrt(2):1 ) for the Youtube video.

WordPress filter for responsive embed

This is what we are going to do:

  1. Hook onto the oembed_dataparse filter hook.
  2. Verify that there are oEmbed data
  3. Decide on aspect ratio modifier
  4. Add a data attribute for the aspect ratio
  5. Return the code wrapped in the needed divs (as done in the previous post)

Please remember that we are still using the Bootstrap component Responsive Embed. Here goes the code (it belongs in functions.php. Follow the comments to see what happens.

// Hook onto 'oembed_dataparse' and get 2 parameters
add_filter( 'oembed_dataparse','responsive_wrap_oembed_dataparse',10,2);

function responsive_wrap_oembed_dataparse( $html, $data ) {
 // Verify oembed data (as done in the oEmbed data2html code)
 if ( ! is_object( $data ) || empty( $data->type ) )
 return $html;

 // Verify that it is a video
 if ( !($data->type == 'video') )
 return $html;

 // Calculate aspect ratio
 $ar = $data->width / $data->height;

 // Set the aspect ratio modifier
 $ar_mod = ( abs($ar-(4/3)) < abs($ar-(16/9)) ? 'embed-responsive-4by3' : 'embed-responsive-16by9');

 // Strip width and height from html
 $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );

 // Return code
 return '<div class="embed-responsive '.$ar_mod.'" data-aspectratio="'.number_format($ar, 5, '.').'">'.$html.'</div>';

NOTE: Cached embeds

So, turns out that the oEmbed html is cached by WP. This makes sense – we don’t want to ask for and process oEmbed data for every page call. So, for now, you have to update all posts/pages that has oEmbed to cache the new data.

A little jQuery magic

Since I’ve passed the aspect ratio as a data-attribute to the wrapping div, we can use jQuery to set the aspect ratio to match perfectly. Use this little jQuery snippet.

$( function() {
 // Run code for each element
 $('.embed-responsive').each( function (){

 // Get ar
 var ar = $(this).attr('data-aspectratio');

 // Check for existance and set padding-bottom
 if (typeof ar !== typeof undefined && ar !== false ) {
   $(this).css('padding-bottom', (1/ar)*100+'%');



Here is the result from Youtube.

And Vimeo


Pretty neat, huh?

  Category: Code, Wordpress
  Comments: Comments Off on Responsive Vimeo and Youtube embed in WordPress

Writing add-ons for Google Docs

By kristoffer,

I got my first add-on for Google Docs published today. I’ve been working on it for a couple of weeks, and now its finally in the add-on store. Its name is Heading Numbers, and it is a fairly simple piece of software. All it does is add automatic numbering to heading (Hence the name). Check it out in the Add-on store! This is a short post about the process leading up to publishing. I’m sure I’ll write some more technical stuff later.


The idea

I’ve been using Docs for a while for three reasons:

  1. It does instant backup of everything you do and you can trace back changes or recover previous versions.
  2. Working in the cloud makes it easier to switch between computers
  3. It is a great tool for collaborative writing or getting feedback

I’ve just started working on my master thesis and figured I’d try to use Docs for it. But, in my previous work, I’ve been missing a proper way to add heading numbering. Sure, there is a couple of add-ons that can do it, but to be honest, I don’t like them (and heading numbering is also just a side-feature in both of them). You know when you think: I can do this better! We’ll, I did, and decided to give it a go.

Does it qualify as a add-on?

So, my next step was to figure out how and what was required to publish an add-on. Luckily, Google has a page dedicated to this: Publishing an Add-on. Turns out the general requirements are pretty simple:

  • The add-on must be fully functional — it can’t be a “work in progress.”
  • The script has been tested with multiple active users.
  • The design adheres to the UI style guide.

That, and the fact that you need to apply to publish. Of course, there are a bunch of technical requirements, but that’s more details than you need. So then it was all about writing code for a while.

Developing an add-on

Add-ons are basically Google Apps Scripts that are bound to a document. That meas that when you have an open document, navigate to “Tools > Script editor…”, and your set to develop you add on. Here are a couple of resources I found useful in the process:

The publishing process

After a while I started to feel like my add-on was ready for publishing, so I applied. A week or two later, I got my review response, including a bunch of things that needed to be fixed. The reviewer at Google helped improve my add-ons UI/UX by heaps. Three review rounds later, I got white-listed for publishing add-ons. Then it was just to create a few graphical elements for the Add-on Store, and here we are.

My experience

All-in-all I feel that the process has been a great learning experience and that it was worth while. What I feared the most was the review process, but that turned out to be one of the most enjoyable parts of the process (getting professional input on how to improve your product). So, if you have an idea for an add-on in the back of your head, bring it forward and start developing today. I know I have a few ideas ready.


Responsive YouTube or Vimeo embed with Bootstrap or Roots.io in WordPress

By kristoffer,

I thought I’d share a WordPress filter that I just wrote for this site. I was going to embed a Vimeo video for my up-coming Heading Numbers add-on for Google Docs and needed a nice way to embed it responsively. I am currently running my site on the Roots.io WordPress starter theme. Roots is loaded with Bootstrap front end framework. This blog-post will cover how to responsively embed video and other content into your Bootstrap-powered WordPress. If you just want the code for the responsive embed filter, scroll to the bottom of the post. Now I’ll explain how its done, step by step.

How Bootstrap does responsive video embed

Bootstrap is shipped with a component called Responsive Embed. It is not much code that makes up the component. The following code is from the Bootstrap-sass Repo.

// Embeds responsive
// Credit: Nicolas Gallagher and SUIT CSS.

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;

  video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;

  // Modifier class for 16:9 aspect ratio
  &.embed-responsive-16by9 {
    padding-bottom: 56.25%;

  // Modifier class for 4:3 aspect ratio
  &.embed-responsive-4by3 {
    padding-bottom: 75%;

As seen from this code, and the documentation, we need to wrap the embedded item (e.g. iframe in a container that has the class .embed-responsive and add a modifier class based on the aspect ratio. And it turns out that the aspect ratio is just a simple padding to the bottom. So the next thing is to figure out how WordPress handles embeds.

WordPress and embedding video

WordPress is actually pretty awesome when it comes to embedding content. To embed a video, all one has to do is to add the video url in the post/page.


You can check out the embed documentation to find out which sites are included. The WordPress documentation is however pretty limited as to how one can interact with the embed feature. So – we have to head on over to the WordPress source code. And, there we go, on line 165 of class-wp-embed.php we find the filter hook embed_oembed_html. If you are not familiar with WordPress filters, it think this would be a nice place to start. Anyways, here is the documentation for the filter.

* Filter the cached oEmbed HTML.
 * @since 2.9.0
* @see WP_Embed::shortcode()
* @param mixed $cache The cached HTML result, stored in post meta.
* @param string $url The attempted embed URL.
* @param array $attr An array of shortcode attributes.
* @param int $post_ID Post ID.
return apply_filters( 'embed_oembed_html', $cache, $url, $attr, $post_ID );

So, what I want to know now is what the values in $attr is. So, I simply set up a test filter that var_dump‘ed the contents of $atts for a Vimeo and a Youtube video. Here’s the sample code.

function var_dump_embed_oembed_html_attr($html, $url, $attr){
 return $html;
add_filter( 'embed_oembed_html','var_dump_embed_oembed_html_attr',10,3); // Need three input parameters

The output is pretty disappointing. First of all, it only contains a width and a height parameter. to begin with, this would be nice to know (for aspect ratio calculations), but it only contains default values from the pretty annoying function wp_embed_defaults. So, it has no use to us. That means we are left with the html and the url.

The WordPress filter

So this is my plan for the filter:

  1. Remove width and height attributes from the html.
  2. Decide what aspect ratio to use
  3. Wrap the embed html in a div with the proper css classes
  4. Return the html

The problem here is number 2 – how to decide on aspect ratio. I’ll leave that for another post (soon, I promise). And then just stick with one aspect ratio. I’ll choose 16by9 for now. And here goes the code:

function bootstrap_wrap_oembed( $html ){
  $html = preg_replace( '/(width|height)="\d*"\s/', "", $html ); // Strip width and height #1
  return'<div class="embed-responsive embed-responsive-16by9">'.$html.'</div>'; // Wrap in div element and return #3 and #4
add_filter( 'embed_oembed_html','bootstrap_wrap_oembed',10,1);

And voilá, you have yourself a pretty, responsive, video embed. I’ve borrowed the widht/height remover from Css-tricks.

  Category: Code, Wordpress
  Comments: Comments Off on Responsive YouTube or Vimeo embed with Bootstrap or Roots.io in WordPress

There is no turning back now!

By kristoffer,

Hi there!

So, here we go – my site is finally up and running. It has taken some time. The reason why I’m doing this is that I am in the midst of publishing my first Google Docs add-on – Heading Numbering. One of the missing features in Google Docs has been a nice way to number headings. Well, there are add-ons that can do this for you, but I’m not too impressed by them. As soon as the add-on revision process is finished you’ll be able to easily add any custom numbering style to your Google Documents. It’s awesome – I know.

  Category: Random
  Comments: Comments Off on There is no turning back now!