Ink for the Web: Part 3: Working with CSS

Ink for the Web

Learning Ink

 

Ink is a scripting language for creating interactive fiction like choose-you-own-adventures and other vast, branching stories.

Using the Inky editor and Ink’s tagging system, projects can be created for play in a web browser through adding images, using meta instructions, and customizing layout and styles using CSS.


 

Adding CLASS

Like with working with the IMAGE tag, Ink/Inky also supports a tag for defining new CSS rules: CLASS.

Screenshot 2018-08-31 15.51.14

When used at the end of a line, the Inky web-exported version will apply any CSS classes matching that name.

Screenshot 2018-08-31 15.52.34

To add new CSS rules, edit the style.css file generated by the initial web-exporting process.

Adding or changing rules in this file will be reflected when the index.html file is refreshed in the web browser.

Note: When adding a new CLASS tag in a project, it will need to be exported again before those changes will appear. Be sure to use File –> “Export story.js only…” and replace the story before refreshing the index.html file!

Screenshot 2018-08-31 15.55.43

Changing CSS

Screenshot 2018-08-31 15.57.27

The default CSS can also be updated through changing units or writing new rules in the style.css file.

Screenshot 2018-08-31 15.59.07

Changing the rules for the <p> tag, for example, can make the text bigger.

Screenshot 2018-08-31 16.00.01

The same with adding “underline” to the text-decoration rule for hyperlinks. This can better help with showing what text is a link or not.

Any additional rules or changes can be made to the style.css file. However, two things need to be remembered:

  • Making changes in Inky means doing a File –> “Export story.js only…” before refreshing the index.html file to see those changes.
  • Tags work on sections of text. When used after a selection of text on the same line, it will wrap that text in those styles. Otherwise, tags will work on the next section of text.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s