#CSS questions

[ecopportunityx]

Minor Site Update!

I know this is silly to do after the comic is already over, but I've moved the descriptive text above the navigation link for ease of reading!

It looks like this now, if you don't wanna go over to the site to check.

[aeroheaven]

hi, not sure how to format this or if this will get anyone's ear but I really wanna make my own neocities website, except I'm not sure what I should use the site for ? I've seen people use it as a blog or something (kinda like Tumblr) but since I'm new to the old ways of personalized websites I'm a bit awkward with it.

I kinda wanna just talk about games I like/essays or theories about my hyperfixations and although I'm learning to love my cringe (2010-2016 ruined me with all that shit lmao), I still feel weird about it. Like I'm going about this wrong or something-- idk. If anyone could share what they use their site for to soothe my anxieties on it, I'd love that. I also am curious. 👉👈

[citrusinicake]

#workskin .rainbowStroke { -webkit-text-fill-color: black; background-image: -webkit-linear-gradient(-45deg,blue,magenta,red,orange,yellow,green,cyan); -webkit-background-clip: text; -webkit-text-stroke: 2px transparent; padding-left: 5px; margin-left: -5px; padding-right: 5px; margin-right: -5px;

}

edit: added four new lines to prevent bg clipping

spokeishere text (black text with rainbow stroke) if anyone wants it

idk if theres already a workskin that works just like/similar to this but i havent checked lol

breakdown of code for anyone too intimidated to play around with it (not an expert tho this is mainly just me listing down my conclusions after playing around with it, also written in a way thats assuming the reader knows fuckall about coding):

#workskin .rainbowStroke { -webkit-text-fill-color: black; background-image: -webkit-linear-gradient(-45deg,blue,magenta,red,orange,yellow,green,cyan); -webkit-background-clip: text; -webkit-text-stroke: 2px transparent; padding-left: 5px; margin-left: -5px; padding-right: 5px; margin-right: -5px;}

code name

> can be changed

> is what you use to define the code aka attach the properties to the actual text using text

text color

> webkit is what supports the existence of stroke hence why it's there and why you cant just use {color: black;}

> fill is what thickens the text, you can delete it but it makes the text harder to read

stroke colors aka the text outline

> deg is the way the colors are rotated, feel free to change the number and to make it positive or negative

what makes the stroke not just a square

> clipping for those of you unfamiliar with it just means it follows the shape of whats underneath it

stroke properties

> the px means pixels and indicates the size of the stroke

> transparent means it'll actually show whats underneath, it can be deleted but doing so will make the text moremuddy/desaturated

background overflow

> there to prevent the colors from being cut too short since nackground normally is almost the exact size of the text

> can be changed but will affect the colors, also having it too small will cause clipping

anything in black/white is code language properties, you cannot make anything without them

[phaedo]

why is neocities not updating my site to match my edited css.

[burningthegallows]

N.E.W.T Level Fuckery*

lol, it's my HP au. Sorry that jk* exists guys, but don't you want to continue to enjoy her world while giving her zero money?

this is what im working with so far

Buyi’s legs almost tremble as he approaches the sorting hat.

This is the first real test he’ll face, and he’s terrified he’s not up to it.

There are magical objects that can reveal him. There are magical objects that will reveal him. His aunt had framed his face between her palms — her palms have been so cold and clammy ever since she had helped him from under his parents' bed — and said, “You must remember this: You are Ling Buyi. There is nothing you cannot do or accomplish as Ling Buyi.”

“Will you be okay?” He had asked, one hand on her wrist as he met her eyes. She’d been trying to hide it from him, but he’d noticed the way her eyes had started to go glassy sometimes, as she stared into space and seemed to vanish. She’s shaking her head no even as she smiles wanly at him and says yes. Both are true he thinks. Both and neither.

“Ling Buyi,” Professor Shen says clearly, looking over the edge of her half moon reading glasses.

He’s met Shen Shunhua before. She’s worked at Hogwarts since she graduated four years ago, but before that, she was friends with his brother, no, his cousin, Huo Zuling. She and A-Ling had dated when at Hogwarts, Buyi thinks, but he can’t remember.

She ended up marrying the current registrar, a Muggle-born whose parents were in some type of trade, as he recalls. It was not spoken about favorably, but Professor Shen somehow never seemed to fall into ill favor.

His mother, no, aunt, had always said it was because she was too clever to follow the rules.

She’s looking at him now with a small smile, and Buyi wonders if she still thinks of Zuling. If she sees Zuling or his father in Buyi’s face.

The smile widens slightly, but becomes less generic too. “Ling Zisheng,” she says conversationally, almost jarring him with his own name. “It’s been a long time. I saw your mother last week. She’s very excited for you to be here.”

Ling Buyi blinks up at Professor Shen; he hadn’t known that she was a regular visitor of Huo Junhua. She’d also used his courtesy name, something that he found soothing. He glanced past her to where his foster-father sat at the head table, and he found his father smiling excitedly.

His father and mothers gifted him his courtesy name last year. It is a bit of a dated tradition, but he appreciates the gesture. It is one more line of separation between him and the man he is supposed to call father.

His father notices his look and pulls a little pennant flag from thin air and begins to wave it. The flag is red and gold and Buyi can just make out the words, “GO LIONS!”

Wendi’d announced, just last night, that Buyi would have to be a Gryffindor, with how similar he is to Huo Chong. The thought filled Buyi with warmth and dread at the same time.

He tries to smile at Professor Shen as he walks up to the stool, but he barely manages to grit his teeth and not scowl. Why be afraid of a chair? A hat? All of these idiots he’s grown up with?

At the head table, Professor Yue yanks the flag away from the Headmaster and pokes him in the side with it. Professor Xuan is half-heartedly tries to intercede, but she doesn't hide her wide smile as she reprimands them both.

Zisheng can’t help but chortle at their antics.

His cousin’s greatest strength was always how people underestimated him. And despite every awful thing everyone had said about him, Zisheng has never met another more firm and steadfast in their beliefs. Not for the first time, he aches missing his best friend.

A-Li would have been a Gryffindor, Zisheng has no doubts about that. He would have been in Gryffindor, and in a few years, he’d've been old enough to have his lungs repaired and then they could join the quidditch team together. A-Li was going to be a wicked seeker, and Zisheng hadn’t cared what position he played.

If not for his mother, he doubts he’d play at all, but she had been the one to teach him how to fly… She’d given him fearless on a broom.

Everyone in his family had joked about the houses. Until his aunt — his mother — every Huo since the inception of Hogwarts, and there had been Huos there, had been a Gryffindor.

Hell, that was Godric’s wife’s name.

Huo Chong was a Gryffindor. Perhaps, the Gryffindor. He had married Wen Li, Quidditch World Cup winning seeker, former Gryffindor Head Student, and late sister to the current Headmaster. Huo Chong had been a prefect and valedictorian and star chaser on the Gryffindor quidditch team.

Huo Chong’s first four children had all sorted Gryffindor.

Huo Junhua had been the first outlier amongst the Huo. She should have been a Gryffindor but went Slytherin. Ling Yi, her future husband, was also a Slytherin. Ling Buyi has grown into a sharp, cold eleven year old.

Almost everyone assumes he’ll go Slytherin as well.

His aunt, no. Mother. She had clasped his face in her cold and clammy palms and said, “You must tell the hat that you cannot go to Gryffindor. You’ll be safest in Slytherin.”

The hat falls down over his eyes.

“My name is Ling Buyi,” he thinks hard at the hat. “I do not belong in Gryffindor.”

The hat, who Buyi would swear was all ready to make a pronouncement before even settling on his shoulders, seems to take in a startled breath.

Can hats be startled? Can they breathe?

“Hmmmm,” the hat says in his ear, a whisper that immediately makes him want to turn his head towards it and away. It is somehow very obviously amused.

Buyi can’t help the tiniest huff of a laugh.

“That tickles,” he thinks reproachfully.

The hat seems to roar with laughter. “Such a brave little liar,” the hat teases.

“Bravery is worthless,” he thinks. “Gryffindor is not for me.”

The hat laughs mockingly again. “Now, what’s so wrong with Gryffindor, little lion cub? Many of the greatest wizards have come from this house.”

The hat taunts him with a series of images. First, Huo Chong and Wen Li holding the Quidditch cup over their heads. Buyi has seen the photo before; there was once a framed copy near the piano in his mother’s study.

Then Huo Chong, Headmaster Wen, and Wen Li in a dueling room with a group, demonstrating. Then Wen Li in red and gold, snitch in hand above her head. Then an image of Triwizard Champion Wen, sitting on the shoulders of Huo Chong, and… yes, Ling Yi.

Buyi’s gut clenches at the sight. The hat veers off.

Then a scene of his parents dancing in this very room. He wore formal robes in a deep red and she wore a ballgown of amber and gold. It appeared to be a fundraising gala long after their own graduation, because his mother was heavily pregnant, and the hall was bright with the colors of all four houses.

The next image is a man who looked a lot like his father, but who was wearing older-style clothing, being awarded the Order of Merlin, 1st class, standing next to him was Albus Dumbledore, hero of the first and second Voldemort wars.

The images sped up, and Buyi is perfectly aware that each of the Gryffindors he is being shown is related to him.

“Not Gryffindor,” he thinks as loudly as he could.

“Alright, alright little lion cub. I see you.”

The mere thought spills ice down his spine.

“Where do you want to be then, my little lion?”

He immediately thinks of Yuan Shen (Shanjian, now for courtesy). “I’d rather not go to Ravenclaw either.”

There’s another long laugh in his head. “You know, he was pretty adamant to not go into Slytherin because of you. If only he’d known.”

“My father was a Slytherin,” is the only way Buyi can think to reply.

The hat laughs at him again. “No. No, he really wasn’t.”

Buyi glowers and hunches forward. “He was. And so was my mother. She was the first Huo to be sorted into Slytherin in over four hundred years. And my father was a fifth generation Slytherin whose family have—

“Shut up kid, you don’t need to practice your lies out on me.”

Buyi frowns. “I’m not sure I understand what you—“

“Oh my god, someone apologize to Helga for me,” the hat says to him, just before shouting: “HUFFLEPUFF.”

The hat is pulled off and Zisheng finds himself blinking into the light. He was definitely under there longer than his classmates.

The applause for him is quite pronounced, but he thinks that might be a result of the length of his sorting rather than anything else.

He blinks up at Shen Shunhua who is still smiling.

It might have been nice to have been in Ravenclaw, he thinks, then at least she’d have been his head of house.

At the head table, his father doesn’t look disappointed at all; he looks touched. The flag has reappeared and gotten bigger. The words BADGERS DO IT BETTER flash at him across the room.

When Zisheng meets his eye, his father touches his chest just over his heart and smiles.

Zisheng just rolls his eyes in response. He hops down from the chair and thanks Professor Shen before he heads to the Hufflepuff table.

He sits down on the edge of the new first years, next to a third year named Liang Qiuqi, who he has to pretend not to recognize. Liang Qiuqi never met A-Li after all.

Qiuqi introduces himself to Zisheng and tells him to try the dish in front of him. It’s a specialty from the Huo State and Zisheng smiles as he heaps a pile on his plate.

A few moments later, Liang Qiuqi’s younger brother joins them at Hufflepuff, sitting down on Zisheng’s other side and Zisheng finally relaxes. For the first time since he’d found out he was going to Hogwarts and would be sorted, he heaves a long sigh of relief.

Hufflepuff was a surprise. Honestly, he’d been expecting Slytherin or Ravenclaw, but it’s a good surprise. He looks excellent in black.

At the head table, his father, the Headmaster stands.

A hush falls across the room and, for just a moment, Zisheng feels the magic of Hogwarts frozen in the air around them, a perfect fall night, a perfect meal, and a clear, starry sky above them.

He thinks about what the hat had shown him, Huo Chong in towering red robes, Wen Smith in her champagne gown, heavily pregnant but still spinning around this very room, laughing in her husband’s arms.

For a moment, Zisheng swears he can hear her laugh, the pealing of little bells, and he closes his eyes.

He’d spent years in the Muggle world, resented the fact he’d have to come here, tried so hard to avoid it, and now, his mother’s laughter is echoing in his ears.

The gratitude is undeniable. He holds onto that feeling as tightly as he can as he reminds himself of what he has to do. The burden eases just the tiniest bit.

Zisheng finally feels like he’s starting down the right path.

[thiefking]

sdpeaking of icons i kind of want to change mine but i have nothing in mind. so joshua shall stay

[removeload-academy]

Top CSS Interview Questions for Freshers

A curated collection of essential CSS interview questions tailored for freshers. Perfect for mastering foundational concepts like selectors, box models, and positioning, with practical examples to boost your confidence for entry-level web development roles.

[quizsquestion]

CSS Questions & Answers – Specificity and Importance

[phantomtrax]

its so dark in here

[rohit-69]

HTML Interview Questions

Are you gearing up for an HTML interview and seeking valuable insights? Look no further! This article provides a concise yet comprehensive overview of essential HTML concepts, offering guidance to help you ace your upcoming interview.

Understanding HTML Basics: The Foundation of Web Development

HTML, or HyperText Markup Language, serves as the cornerstone of web development. It is utilized to craft web pages and applications, forming the backbone of the internet. As you prepare for your interview, familiarize yourself with the fundamental structure of an HTML document, comprising the document head and body. The head holds crucial information such as title, meta tags, and scripts, while the body encapsulates visible content like text and images.

HTML documents consist of elements identified by tags, encompassing opening and closing tags or self-closing tags. Tags, along with attributes, define the appearance and behavior of elements. Nesting elements within one another allows for the creation of intricate structures effortlessly.

Key HTML Concepts: Dive Deeper for Interview Success

Attributes and Usage: Attributes provide additional details about HTML elements, such as size or color. Understanding how to use attributes is crucial, especially in elements like links () where the "href" attribute determines the destination URL.

Comments in HTML: HTML comments offer developers a means to provide insights without displaying information on the webpage. Employing encapsulates comments, aiding in code comprehension and error reduction.

Common Lists in Web Design: Various lists play pivotal roles in web design, including navigation menu lists, header lists, footer lists, form fields lists, article lists, images and media lists, and typical content area lists. Mastery of these ensures organized and user-friendly webpages.

Text Section Separation Tags: HTML tags such as , -, , , , and aid in segmenting text sections. Utilizing attributes like id or class further refines text formatting, while CSS and JavaScript enhance customization.

Alternative Text for Images: Alt-text in HTML provides concise image descriptions, enhancing accessibility for visually impaired users and aiding search engines in proper indexing. It serves as a textual alternative in case images cannot be displayed.

URL Encoding in HTML: Encoding URLs in HTML ensures correct display, prevents cross-site scripting attacks, and aids search engine interpretation. It contributes to improved website visibility and security.

Collapsing White Space: Collapsing white space in HTML streamlines code, fostering concise and efficient development. It eliminates unnecessary spaces, enhances readability, and contributes to faster webpage loading.

Border and Rule Attributes: Both border and rule attributes define borders around HTML elements, with 'border' serving as shorthand for various properties. Understanding their interplay is essential for crafting visually appealing elements.

List Element Organization: Employing CSS styling, HTML tags ( and ), and style classes aids in keeping list elements organized within an HTML file. This ensures a structured and visually pleasing document.

Creating Hyperlinks: Crafting hyperlinks involves utilizing the tag with the "href" attribute to specify the linked page's destination. Optional attributes like "target" can control how the link opens.

Text Field Size Limits: Text field size limits in HTML depend on the programming language and framework. HTML5-compatible browsers typically support a vast character limit, but reasonable constraints are advisable for user-friendly interactions.

HTML5 Form Elements: HTML5 introduces new form elements, including , , , , , range input, color picker control, and date/time inputs. Familiarity with these enhances form functionality and user experience.

CSS Integration in HTML: HTML supports three types of CSS integration: internal, external, and inline. Each method offers distinct advantages, allowing developers to tailor styling to specific needs while maintaining code organization.

JavaScript Application in HTML: Integrating JavaScript into HTML involves using the tag to add scripts, either inline or through external files. JavaScript enhances webpage interactivity, form validation, and dynamic content.

Navigating HTML Challenges: Overcoming Common Hurdles

As you delve into HTML, anticipate challenges like invalid syntax, poor layout, and cross-browser compatibility issues. Validating syntax, ensuring an appealing layout, and testing across browsers are crucial steps in delivering a seamless web experience.

Conclusion: Elevate Your HTML Interview Preparedness

Preparing for an HTML interview requires a multifaceted approach. Delve into coding, design, problem-solving, and industry-specific questions. Recognize the nuances between frontend and backend roles and understand the demands of junior, midlevel, and senior positions. Stay informed about relevant technologies and coding languages, and practice mock interviews to enhance your confidence and response time.

Remember, meticulous research and preparation significantly increase your chances of success in an HTML interview. Engage with experienced individuals, both as interviewees and interviewers, to gain valuable insights. Your commitment to due diligence will establish credibility throughout the interview process. Best of luck!

If you want to know more Scaler Academy Reviews or courses then do visit - analyticsjobs

[eevee-anthrophobia]

besides neocites is there any other free platform that is great for beginner programmers? I know absolutely nothing besides the few basics, but I’m practically in love with how relaxing coding has been for me .

[xerxestexastoast]

I'm about to ask a question that will likely drive the tech nerds nuts, because something tells me that it's either not possible or not feasible, but here goes:

Static websites. Web crawlers. CAPTCHA. Password protection. JavaScript. Client-side decryption.

I want to stop the spiders that gather data for generative AI models from accessing certain pages and files on my static HTML website. This website is hosted on Neocities and is therefore static-only by nature.

If I code my own CAPTCHA in JavaScript, could a scraper still see the data on the page?

Is there a way to prevent the data from loading at all until the CAPTCHA is answered, and is it possible to keep the linked file from being crawled if the script is not in the body of the webpage file?

If, for example, I load an image from a JSON-stored link using a method other than the classic img src="filename link", will an HTML parser or other crawler still be able to see and visit that link once the page has finished loading?

Could I put the kibosh on an image-specific scraper by putting the alt text on a companion dummy image? Or do they scrape alt-less images anyway?

Things that are non-negotiable:

I will not use third-party corporate CAPTCHAs because I do not want to contribute to their training data.

I want my images to be displayed at a decent resolution. Not massive, but possibly up to 1000px on one side.

Is it even worth it? We might get us a proper legal precedent that automatically boots machine-generated images into the public domain, and at that point the whole thing is moot.

[frontendinterviewquestions]

Check latest frontend interview questions and answers here

[apnajobadda]

If you are interested in learning HTML or preparing for an HTML interview, then this article is for you.

It is a great way to get started with HTML and learn the fundamentals of this essential web development language.

[neoskitties]

Welcome to NeoSkitties - your guide to the indie web!

Run by Stahl of Steel-Type and Homura... who doesn't currently have a website or socials (she's shy)

We're here to encourage Trainers to try their hand at HTML and CSS and put together a fun hand-coded website! We're here to help!

Join the tumblr community

//OOC under the cut

this is a parody of Neocities, a web host you can use to host your very own website for FREE! Eventually, I'll have a masterlist of webmastery things and such but we're pretty bare-bones for now. If you have any questions feel free to message me!

Stahl's Rotomblr is @steel-type-stahl

Homura doesn't have any socials or anything yet, maybe with enough pestering you can convince her to make a blog ;)

[valeriehalla]

I have gotten a lot of messages saying that they really love the presentation of CURSE/KISS/CUTE. Often the commenter in question can’t say what exactly it is about the formatting that they appreciate, but that it just reads well and looks good. Well!!! Allow me to bare my wealth of secret knowledge for you once and for all:

I sorta just did some research into book typography...?

Here’s something you should know about web development, alright: typography on the web is really, really bad. The tools we have at our disposal—HTML and CSS—are incredibly powerful, but they are set up to fight you every step of the way towards Good Typography. When you know what you’re looking for, you can fix all the common issues quickly and easily. But it’s not easy to know what to look for, because

problematic typography is overwhelmingly the norm on the web, and

good typography is invisible.

Here’s a screenshot from CURSE/KISS/CUTE episode 0:

Now, I don’t want this post to come across as prescriptive. It is not my intention to tell you, “This is what good typography looks like, so follow my lead exactly.” I made a lot of choices with the typography of my web novel: many of those choices would not make sense in other contexts. What I want to convey to you is what those choices are, so that you will know they’re available to be made.

I mentioned that the web “fights you” when it comes to good typography. What do I mean by that? Well, check this out:

This is how that passage of text renders “by default.” In other words, this is how a web browser would render that text without any input from me about what styles to apply. It kind of sucks ass! But it also looks pretty familiar, right? This is not that far off from how a lot of websites—even websites full of prose (looking at you, AO3)—render text.

I think the most illustrative thing to do here would be to walk you through my thought process and show you, step by step, what decisions I made to turn this unstyled text into the styled version you see in the novel.

So, first things first:

1. We have got to shrink that text column.

Computer monitors... are wide. They are wider than they are tall. They are so wide, and they have so many pixels. This means you can fit a lot of characters on them. If you wanted, you could just have a wall of characters from the left side of the screen all the way to the right side. Talk about efficient!!

You should never, ever, ever do this.

This is one choice that I actually will make a prescriptive statement about, because it’s supported by quite a lot of research: fairly narrow text columns are more legible. Specifically, research seems to support the idea that a width in the range of 50 to 70 characters per line is the most comfortable for people to read*. Every font is different, so it takes a little doing to turn that “characters” figure into a pixel measurement; I went with 512 CSS pixels for the maximum width of my text column:

Isn’t that just so much nicer to read already?

*A commenter reminds me that I’d be remiss not to point out that the research on column width legibility isn’t completely conclusive. You do want to limit the width of your text columns, but going over the 70 character-per-line recommendation isn’t necessarily the end of the world, and you might have good reasons to do so. I did not: as mentioned, one of my goals was to mimic book-style typography, and books by nature have fairly restrained column widths, on account of they’re books.

2. Picking a font.

I’m not going to give you the blow-by-blow on how I decided what font to use. The short story is that I asked some designers, and one of the recommendations I got was the free font Crimson Pro, which I took a liking to immediately:

It’s just an all-around attractive serif font, but one thing I really like about it for use in a novel is its highly-visible quotation marks. They’re just kinda jumbo! They’re real big! Easy to see! In a novel, those things aren’t just ornamentation. It makes a great deal of practical sense for them to stand out just a bit. It also has a fairly large x-height, unlike a lot of the more traditional options, which is good for legibility on a computer screen.

3. Adjusting the line-height

Web browsers default to a line-height of about 1.2em, which, as you can probably tell, is quite cramped. If you go and Google “optimal line height for legibility”, you’ll get a number of results right off the bat suggesting 1.5em. Sounds good! Let’s do that:

Well... hmm. That’s definitely an improvement, but between you and me, it actually looks a bit too spacey to my eyes. I wonder why?

I’ll cut to the chase: the 1.5em recommendation makes some assumptions about the font you’re using. In Arial, the letter “A” is about 0.6em tall; in Crimson Pro, it’s about 0.5em. That means that there’s no one-size-fits-all solution to spacing your lines, because different fonts have different amounts of empty space baked in. How annoying!

Let me tell you something about the kind of nerd I am. When I had this realization, I grabbed some books off my shelf and pulled out a literal micrometer. I started measuring the line-heights against various font features to see if there were any patterns I could spot in professional typesetting. Here’s what I found:

Almost every book on my shelf spaces lines such that the distance between one baseline and the next is about three times the x-height. How cool is that? I clapped my hands like a seal when I put this together.

Adjusting the line-height to match what I observed in the wild gives us this:

It’s a subtle difference, but to my eyes it feels just right. It’s almost like magic!

4. Paragraph spacing...

Let’s address the elephant in the room. Probably the most controversial choice I made with CURSE/KISS/CUTE’s typography was to opt for book-style paragraph indentation rather than web-style paragraph spacing—like so:

I did this for a few reasons:

It’s what I’m used to. I’ve read a lot of books, and this is just the way that books are formatted. I think for something aspiring to the title of “novel”, there’s value in making it look the way a reader probably expects a novel to look.

A novel has a lot of paragraph breaks in it. A paragraph in, say, an encyclopedia entry might go on for half a page or more; whereas it is unusual for a paragraph in a modern work of narrative prose to run for more than a handful of sentences, especially in any scene with dialogue. Because paragraph breaks are so common, spacing between paragraphs in a novel results in a lot of wasted space. Also, subjectively speaking, the additional space seems to me to lend an undue amount of weight to paragraph breaks. I’m just starting a new thought; there’s no need for a 21-gun salute, you know?

Having said that, here are some good reasons you might decide not to do paragraph indentation anyway:

Doing it right requires a bit of extra legwork. Notice how the very first paragraph in the image above has no indentation. That’s because it’s the start of a new section, and the first paragraph in a section traditionally goes unindented. This is an easy detail to miss, and it can be difficult to wrangle CSS into doing it for you automatically.

Web users don’t expect it. For the first decade of the web’s existence, there was no good way to do paragraph indentation; by the time CSS rolled around and made it easy, paragraph spacing had already become the norm. And while CURSE/KISS/CUTE may be a novel, it is also, specifically, a web novel!

But it’s my house and I get to make the rules, so I went with indentation. Incidentally, there seems to be a dire lack of research into the question of whether indentation or spacing is more legible for readers—but the data that does exist appears inconclusive at best. So, the choice really does come down to vibes.

5. The tragedy of justification.

You’ll note that one way in which I did not make my web novel look like a paper novel is the text alignment. It’s un-justified: the right margin is ripsaw-ragged.

This is because it is not possible to justify text on the web.

Oh, you can try. Look right here: there’s a CSS property for it and everything. Just turn on “text-align: justify” and...

Nightmare! The interword spacing on that first line is almost as wide as the indentation!

Reader, I’m afraid that your web browser is simply too dumb. That’s not the browser’s fault: robust algorithms for justifying text without creating these distractingly huge gaps between words have existed for many decades, and modern computers are powerful enough to run them in real time with little performance impact. It’s just, uh—nobody has ever bothered to implement them into web browsers. It is the damnedest thing.

I tried, I really did. You can mitigate this problem a bit if you enable automatic hyphenation, but browsers are unfortunately also kind of dumb at hyphenating. Firefox, for example, will refuse to hyphenate any word containing a capital letter, so any sentence with a lot of proper nouns in it is a lost cause. I tried manually inserting soft hyphens with a text preprocessor I wrote myself, but still these overjustified lines plagued me: when the text column narrows, for example on a phone, even hyphens can’t save you. The line-breaking algorithm is simply too naïve to optimize for well-justified text, and that’s not something you can fix as a web developer.

As a result, my heavy-hearted recommendation is to never use text justification. It’s just too distracting.

6. And then some extra stuff just for me

I added drop-caps because it looks neat and I made the ellipses spacier because I think it looks good when it, uh, when they are spacier. I think that looks pretty good that’s just my opinion though.

That’s all! Hope you learned something bye!!!