Search

Ted Vinke's Blog

Java, Groovy and stuff

Category

Web Development

Table Responsiveness Tip #2: Using shy for soft-hyphens

As a colleague pointed out regarding the optional line-breaks in previous article, a more natural way of breaking up a compound word visually is using a hyphen (-).

More specifically, an optional hyphen, aka the soft hyphen which in HTML can be used as $shy; ­

Apply them where you wish the break to occur:

<thead>
 <tr>
 <th>Voor&shy;naam</th>
 <th>Achter&shy;naam</th>
 <th>Geboorte&shy;datum</th>
 </tr>
</thead>

And the result is now shown with optional hyphens:

According to QuirksMode $shy; is supported now by all the major browsers.

Table Responsiveness Tip: Adding Line-Breaks in Table Headers

You might all know the <br> tag which causes a hard line-break, but did you know you could also use an optional line-break?

It’s called <wbr>

I causes a potentional line-break if you have long words in your HTML which the browser can use to break on. This has been finalized in HTML 5.

Where could you possibly use this? Well, for table headers for instance.

Most of the longest English words are not likely to occur in general text, and headers with multiple, small words – such as Start Date, First Name etc – are pretty common.

When using business- or technical lingo, or non-technical present-day text in other languages, you might not be so fortunate. Take the same labels in Dutch (NL).

<thead>
    <tr>
        <th>Voornaam</th>
        <th>Achternaam</th>
        <th>Geboortedatum</th>
    </tr>
</thead>

The Dutch just tend to use compound words – which are words such as grandmother, footprints, weatherman etc – a lot. Labels can become longer than the associated content in the table cells, which causes the table not to be that responsive anymore on smaller screens because the browser doesn’t know how to break long words anywhere.

Let’s adjust to a smaller screen size:

The browser naturally wraps the English words at the space between the words, so the English First Name and Last Name headers wrap perfectly onto multiple lines. Although the content of the table still fits the screen, the Dutch compound headers do not wrap and horizontal scroll bar appears earlier than needed 🙂

Now this is where <wbr> comes in – you can add these in the compound words where you naturally would want to break it up if space becomes sparse.

Let’s see the new HTML:

<thead>
    <tr>
        <th>Voor<wbr>naam</th>
        <th>Achter<wbr>naam</th>
        <th>Geboorte<wbr>datum</th>
    </tr>
</thead>

And the result is what we want: a non-visible break which kicks in when needed.

Getting a New Colleague Started on Your Scrum Project

Let me share some experiences – which I posted earlier on the First8 blog – when introducing a new colleague to the team and getting him of her quickly integrated.

On my current job we’re expanding rapidly with the amount of Scrum teams. Project leads and architects are shoving all kinds of intakes around and it’s not uncommon to have several new software developers or testers start each week. When I myself settled in with another colleague we found ourselves in a busy period, where none of the existing teams actually had any time to explain which accounts and permissions to request to what system from what department to be able to dour jobs. If you’ve ever started in somewhat Enterprisy environment, it might look familiar. Continue reading “Getting a New Colleague Started on Your Scrum Project”

Quicktip! TestNG’s-like junit-dataprovider Instead of JUnit Parameterized Class

We all know JUnit test-classes can be parameterized, which means that for a given set of test-elements the test class is instantiated a few times, but using constructors for that isn’t always what you want.

I’ve taken the StringSortTest from this blog as an example.

@RunWith(Parameterized.class)
public class StringSortTest {

    @Parameters
    public static Collection<Object[]> data() {
        return Arrays.asList(new Object[][] {
                         { "abc", "abc" },
                         { "cba", "abc" },
         });
    }

    private final String input;
    private final String expected;

    public StringSortTest(final String input, final String expected) {
        this.input = input;
        this.expected = expected;
    }

    @Test
    public void testSort() {
        assertEquals(expected, mySortMethod(input));
    }
}

This is pretty darn obnoxious some times if you have multiple sets of data for various tests, which all go through the constructor which would force you to write multiple test classes. TestNG solves this better by allowing to provide separate data sets to individual test methods using the @DataProvider annotation. Continue reading “Quicktip! TestNG’s-like junit-dataprovider Instead of JUnit Parameterized Class”

Create a free website or blog at WordPress.com.

Up ↑