ٹول بار جمائیں موبائل کی بورڈ کی تلافیطے شدہ فونٹاونچائی

NABI NOTE

ایک آزاد مآخذ WYSIWYG مدیر

NABI NOTE ایک آزاد مآخذ WYSIWYG مدیر ہے، جس میں ہر بڑا کام — سجاوٹ، ہمواری، جدول، چڑھاؤ اور باقی سب — wing نامی الگ ماڈیول کی صورت میں مرکز سے جدا رکھا گیا ہے، تاکہ بنانے والا اسے بغیر کسی حد کے بڑھا سکے۔ یہ خالص Vanilla JS میں لکھا گیا ہے اور فریم ورک پر صفر انحصار کا ارادہ رکھتا ہے، اس لیے React میں، Vue میں یا کہیں بھی جوں کا توں بیٹھ جاتا ہے، اور جن منصوبوں میں تعمیر کا نظام نہیں اُن کے لیے ایک CDN کتب خانہ بھی ساتھ ہے۔ اس کی اپنی JSON صورت NABI TREE ہے، اس لیے HTML اور متن کے درمیان کی تبدیلی وہاں بھی پہلے سے تیار کی جا سکتی ہے جہاں DOM سرے سے نہیں (Node.js، SSR)؛ اور چونکہ یہ دستاویز کو پیوند لگانے کے بجائے اجازت یافتہ الفاظ سے نئے سرے سے جوڑتا ہے، اس لیے کسی الگ صفائی کے کتب خانے کے بغیر XSS اسکرپٹس کو بنیادی سطح پر روکا جاتا ہے۔ سجاوٹ میں CSS Variable کا طریقہ اپنایا گیا ہے، جس سے برانڈ کا رنگ آسانی سے بدلا جا سکتا ہے، اور rem پر مبنی خاکے سے بڑا چھوٹا کرنے پر بھی موبائل کی صورت ہموار رہتی ہے؛ گہرے اور روشن، دونوں سے میل کھاتے رنگ، نمایاں کرنے والے قلم اور کئی زبانوں کے حروف پہلے سے موجود ہیں۔ اس پر مزید قسم پہچان کر جدول کے ستون کی ترتیب، مقامی تاریخ اور وائب کوڈنگ کی سہولت بھی ہے۔

رسم الخط

بغیر پائے (طے شدہ)، پائے دار، یکساں چوڑائی اور ہاتھ کی لکھائی — ہر خاندان میں لکھائی کے نظام کے لحاظ سے حروف رکھے گئے ہیں، اس لیے کوئی سی بھی زبان لکھیے، اسی خاندان کا چہرہ برقرار رہتا ہے؛ جس نظامِ تحریر کے لیے اُس خاندان میں ہاتھ کی لکھائی نہیں، وہ متصفح کے طے شدہ حروف پر لوٹ آتا ہے۔ طے شدہ رسم الخط میزبان طے کرتا ہے۔

نیچے ہر خاندان کئی زبانوں میں دکھایا گیا ہے۔

سانس سیرف · Tanpa serif · بدون سریف · सॅन्स सेरिफ · Không chân · శాన్స్ సెరిఫ్ · Mara seref · Sans serif · Bila serif · சான்ஸ் செரிஃப் · ไร้เชิง · Senza grazie · 산세리프 · ゴシック体 · 无衬线 · Serifenlos · Sans empattement · Sin serifa · Sem serifa · Без засечек · بلا زخارف · सैन्स सेरिफ़ · স্যান্স সেরিফ

سیرف · Berserif · سریف · सेरिफ · Có chân · సెరిఫ్ · Mai seref · Serif · Yenye serif · செரிஃப் · มีเชิง · Con grazie · 세리프 · 明朝体 · 衬线 · Avec empattement · Con serifa · Com serifa · С засечками · بزخارف · सेरिफ़ · সেরিফ

یکساں چوڑائی · Lebar tetap · تک‌فاصله · मोनोस्पेस · Đơn cách · మోనోస్పేస్ · Tazara ɗaya · Eş aralıklı · Nafasi moja · ஒற்றையகலம் · ความกว้างคงที่ · Monospaziato · Monospace · 고정폭 · 等幅 · 等宽 · Dicktengleich · Chasse fixe · Monoespaciada · Monoespaçada · Моноширинный · ثابت العرض · মনোস্পেস

رواں خط · Tulisan tangan · دست‌نویس · हस्ताक्षर · Chữ viết tay · చేతిరాత · Rubutun hannu · El yazısı · Mwandiko · கையெழுத்து · ลายมือ · Corsivo · Cursive · 필기체 · 筆記体 · 手写体 · Schreibschrift · Cursiva · Рукописный · خط اليد · हस्तलिपि · হস্তলিপি

حروف کا حجم

بہت چھوٹا

چھوٹا

بڑا

بہت بڑا

عنوان

خالی سطر میں # لکھ کر خلا دبائیے — وہیں عنوان بن جاتا ہے۔

H1

H2

H3

H4

H5

H6

موٹا · ترچھا · خط کشیدہ · کٹا ہوا

موٹا ترچھا خط کشیدہ ~~کٹا ہوا~~ — یہ رہی مثال۔

~~انہیں ایک پر ایک بھی لگایا جا سکتا ہے۔~~

بالائی اور زیریں عدد

رقبہ 3.5 میٹر² ہے، اور حاشیہ یوں لگتا ہے۔¹

پانی H₂O ہے۔

حروف کا رنگ · نمایاں قلم

رنگ ایسے چنے گئے ہیں کہ روشن اور گہرے، دونوں میں پڑھنے میں آسان رہیں۔

حروف کا رنگ سبز · مونگا · بنفشی · کہربائی · نیلا

نمایاں قلم زرد · سبز · آسمانی · گلابی · ارغوانی · نارنجی

کڑی

پتہ ڈالیے اور وہ کڑی بن جاتا ہے۔

پتے میں صرف http:// اور https:// چلتے ہیں؛ javascript: جیسا کچھ نہیں چلے گا۔

مثلاً https://nabi.saro.me لکھ کر خلا یا اینٹر دبائیے — یہ خود ہی بدل جاتا ہے، جیسا یہاں دکھ رہا ہے۔

لنک کھولنا

طے شدہ طور پر ایک ہی مآخذ کی کڑی اسی کھڑکی میں اور دوسری سائٹ نئی کھڑکی میں کھلتی ہے؛ یہ قاعدہ مدیر کے اعلان کے وقت مقرر کیا جا سکتا ہے۔

منسلک کی کڑی

تصویر کے سوا کچھ اور چڑھائیے تو نیچے جیسی فائل نما کڑی رہ جاتی ہے۔

منسلک بس اتنا ہی باقی رہتا ہے۔

ہمواری

بائیں

درمیان

دائیں

عنوان بھی ہموار کیے جا سکتے ہیں۔

فہرستیں

نکاتی فہرست

خالی سطر میں - لکھ کر خلا دبائیے — وہیں نکاتی فہرست بن جاتی ہے۔

یہ ایک نکتہ ہے
- Tab / Shift+Tab سے اندر اور باہر کیا جاتا ہے۔

عددی فہرست

خالی سطر میں 1. لکھ کر خلا دبائیے — عددی فہرست بن جاتی ہے۔

پہلا
دوسرا
تیسرا

جانچ فہرست

خالی سطر میں [ ] یا [x] لکھ کر خلا دبائیے — جانچ فہرست بن جاتی ہے۔

یہ کام ہو چکا ہے۔
یہ ابھی باقی ہے۔

جدول

اوزار پٹی کے جدول سے بنائیے؛ سطریں اور ستون بڑھائے، ہٹائے اور ملائے جا سکتے ہیں۔

ستون کی ترتیب

جھلک دبائیے، پھر ذخیرہ اور قیمت کے سرے یکے بعد دیگرے دبائیے۔

نمونہ	ذخیرہ	قیمت	وزن
NB-7	1,200	349	1.2 kg
NB-9	20,000	99	0.9 kg
NB-12	3,500	1,299	1.4 kg
NB-80	900	8,900	2.1 kg
NB-100	طے ہونا باقی	12,999	2.4 kg

قیمت میں سب عدد ہیں، اس لیے عدد کی طرح ترتیب پاتی ہے۔

ذخیرہ متن کی طرح ترتیب پاتا ہے، کیونکہ آخری خانے میں حروف ہیں۔

جدا کرنے والی لکیر

--- لکھ کر اینٹر دبائیے — جدا کرنے والی لکیر بن جاتی ہے۔

تصویر

چوڑائی 30% سے 100% تک رکھی جا سکتی ہے اور وہ دائیں، درمیان یا بائیں بیٹھتی ہے۔

YouTube

چڑھاؤ

کوئی تصویر یا فائل مدیر پر گھسیٹ کر دیکھیے۔

یہاں کا چڑھاؤ محض دکھاوا ہے؛ ایک ترتیب سے یہ آپ کے سرور سے جڑ جاتا ہے۔

چڑھاؤ ناکام ہو جائے تو وہ تصویر یا فائل مدیر سے نکال دی جاتی ہے۔

اقتباس

خالی سطر میں > لکھ کر خلا دبائیے — اقتباس کا خانہ بن جاتا ہے۔
یہ کئی سطروں تک چل سکتا ہے۔

کوڈ

خالی سطر میں ``` لکھ کر خلا یا اینٹر دبائیے — کوڈ کا خانہ بن جاتا ہے۔

زبان بھی ساتھ لکھیے، جیسے ```java، پھر خلا یا اینٹر — خانے پر وہی زبان لگ جاتی ہے۔

import { createNabiWith, defaultWings } from 'nabi-note'

const { nabi } = createNabiWith(defaultWings)
const html = nabi.getHtml()

تہہ

تہہ عنوان اور اندر کے مواد سے بنتی ہے۔

آپ طے کر سکتے ہیں کہ یہ بند حالت میں محفوظ ہو یا کھلی۔

مختصر کلیدیں

Shift دو بار تیزی سے دبائیے — اوزار پٹی ہر کام کی مختصر کلید دکھا دیتی ہے۔

خودکار سجاوٹ

مثال	کلید	نتیجہ
#	خلا	عنوان
-	خلا	نکاتی فہرست
1.	خلا	عددی فہرست
[ ] · [x]	خلا	جانچ فہرست
>	خلا	اقتباس
``` · ```ts	خلا · اینٹر	کوڈ کا خانہ
---	اینٹر	جدا کرنے والی لکیر
https://…	خلا · اینٹر	کڑی

اخراج کے فعل

فعل	نتیجہ
getHtml()	HTML
getJson()	JSON

DOM کے بغیر بھی چلتا ہے

JSON سے HTML بنانے کے لیے DOM کی ضرورت نہیں۔

سرور (Node.js) محفوظ نابی درخت کو جوں کا توں پڑھ کر، XSS روکتے ہوئے HTML جوڑ سکتا ہے۔

موبائل کا دوست

موبائل صورت — جواب دینے والا خاکہ موبائل کی صورت سنبھالتا ہے۔
کلید تختے کی تلافی — کلید تختہ کھلے تو اس کی اونچائی کی تلافی ہو جاتی ہے۔
لچکدار حجم — سارے حجم rem میں لکھے گئے ہیں۔
کئی زبانیں — یہ کئی زبانوں کی حمایت کرتا ہے۔

اپنی مرضی کی صورت

اپنا wing — کوئی سہولت درکار ہو تو خود بنا کر لگا لیجیے۔
اپنا CSS — رنگ، کونے اور وقفے سب --nabi-* سے طے ہیں، گہرا ہو یا روشن — آپ کی مرضی۔
آزاد مآخذ — GitHub پر آزاد مآخذ کے طور پر دستیاب۔

دستاویزات دیکھیے → nabi.saro.me

HTMLایڈیٹر لوڈ ہو رہا ہے…

JSONnabi-treeایڈیٹر لوڈ ہو رہا ہے…

تنصیب

npm install nabi-note

کوڈ

import {
  createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
  mountHints, watchSettle, defaultWings, mountUpload, mountUploadView,
  browserFileStore, mountFile, parseNodes, mountViewTools,
  browserHistoryStorage, mountLocalHistory, openHistoryPanel,
} from 'nabi-note'
import { mountDiffWing } from 'nabi-note/diff'

// The box that asks — without it the core answers "no" to everything (plug in your own)
const ask = { message: (t: string) => alert(t), confirm: (t: string) => confirm(t) }

const selected = [
  ...defaultWings,
]
const { nabi, registry } = createNabiWith(selected, { ask })

// Bring your own highlighter (Prism, highlight.js, Shiki, …) — the wing stays as it is
// and only the attach is swapped (`makeCodeAttach` ships from the same door)
// { ...codeWing, attach: makeCodeAttach({ highlight: (source, lang) => [{ text: source }] }) }

const root = document.querySelector('.nabi')!
const content = document.querySelector('.nabi-content')!

const view = mountUploadView({ nabi, surface: content })
const upload = mountUpload({
  nabi, root: content,
  // your upload goes here — report progress with task.onProgress(0–100)
  uploader: async (task) => ({ uri: 'https://cdn.example/uploaded' }),
  extensions: ['png', 'jpg', 'pdf'], maxFileSize: 10 * 1024 * 1024,
  onStart: (tasks) => view.start(tasks),
  onProgress: (id, percent) => view.progress(id, percent),
  onSettle: () => view.settle(),
  onDone: () => view.done(),
})
const file = mountFile({ nabi, registry, store: browserFileStore(document), parse: parseNodes, locale: 'ur', name: () => 'note' })
const history = mountLocalHistory({ nabi, storage: browserHistoryStorage(window) })
const diff = mountDiffWing({ nabi, registry, surface: content, locale: 'ur' })

// The locale also sets the direction — Arabic and Urdu run right to left
mountSurface({ nabi, registry, root: content, locale: 'ur', fileSink: upload.take })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'ur' }
// A tool that needs a panel comes back to the host — without this the button is dead
const toolbar = mountToolbar({
  ...shared, root: document.querySelector('#toolbar')!,
  file,
  onFiles: upload.take,
  onHost: (w) => {
    if (w === 'diff') { diff.open(); return }
    if (w !== 'localHistory') return
    openHistoryPanel({
      history, surface: content, locale: 'ur', sessionId: history.sessionId,
      render: (record) => createNabiWith(selected, { doc: JSON.parse(record.body) }).nabi.getHtml(),
    })
  },
})
const context = mountContextToolbar({ ...shared, root: document.querySelector('#context')! })
mountHints({ toolbar, context, root, surface: content })
// The preview and fullscreen buttons — they stand their own box at the end of the row
mountViewTools({ ...shared, root, container: document.querySelector('#toolbar')! })

// on every change — hook up your own code here
// nabi.onChange(() => user_callback(nabi.getHtml()))