Of late, I am in that mood where I want to make something for myself. Whilst the tools I need are generally available in various forms, they always seem to miss something which I consider essential, or they are full of things which I don’t want, like adverts and AI.
Today’s project had definitely been on my mind a lot recently. I had heard about Calmly Writer and have previously played around in it as well as some others in the same category of distraction-free writing. However, none of these are perfect for my needs.
In fact, the real reason I wanted to make my own solution was to use LanguageTool via my browser’s plug-in, as well as to avoid having persistent cookies set by someone else’s tool.
Why LanguageTool
For my writing needs, nothing is better than LanguageTool. Nowadays, Grammarly requires a login to use, and many of the other tools do not provide corrections for punctuation in the same way that both LanguageTool and Grammarly do.
I have even attempted to add LanguageTool to LibreOffice, but find that the way it works is inferior to how it operates in the browser.
The quiet writing area
I’ve made a minimal HTML page for use locally, which features one large text box for the writing, along with a word and character counter. As I use Gedit almost exclusively to write, this implementation mimics the blank canvas I so enjoy brilliantly, with the bonus of having my grammar and punctuation checked. So much so that I wrote this entire post in it.
Make your own space
This version works in all browsers and can be run locally from your machine. Make a new empty file and name it quiet.html or your own preferred name, then copy and paste the code below into it.
Enjoy the serenity.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family:'sans-serif';
text-align:center;
background-color:#fff1e5;
}
h1 {
font-size: 1.6rem;
color:#807973;
}
textarea {
font-family: 'sans-serif';
font-size: 1.1rem;
border: 1px solid #aaa;
padding: 8px;
box-sizing: border-box;
background-color:#fff1e5;
}
textarea:focus {
outline: none;
border: 1px solid #aaa;
box-shadow: 0 0 4px rgba(0,0,0,0.05);
}
#countContainer {
margin-top: 10px;
font-size: 0.9rem;
color: #0f8e99;
display: flex;
justify-content: center;
gap: 10px;
}
.clearing a {
font-size: 0.9rem;
color: #0f8e99;
text-decoration: none;
}
</style>
</head>
<body>
<h1>The quiet writing area</h1>
<form>
<textarea id="textbox" name="quiet" rows="30" cols="100"></textarea>
<div id="countContainer">
<div id="wordCount">0 words</div> |
<div id="charCount">0 characters</div>
</div>
<div class="clearing">
<a href="#" id="clearLink">Clear</a>
</div>
</form>
<script>
const textarea = document.getElementById('textbox');
const charCount = document.getElementById('charCount');
const wordCount = document.getElementById('wordCount');
textarea.addEventListener('input', function() {
const text = textarea.value;
const characters = text.length;
const words = text.trim().split(/\s+/).filter(Boolean).length;
charCount.textContent = `${characters} character${characters !== 1 ? 's' : ''}`;
wordCount.textContent = `${words} word${words !== 1 ? 's' : ''}`;
});
document.getElementById('clearLink').addEventListener('click', function(event) {
event.preventDefault();
textarea.value = '';
charCount.textContent = '0 characters';
wordCount.textContent = '0 words';
});
</script>
</body>
</html>