Black Images - Word by Word
Word by wordTags
Download Links
Black Images - Word by Word Resource
This resource provides Quranic script in Black Images - Word by Word format. The script is rendered as high-quality images for optimal display and printing.
Sample JSON
{
"1:1": {
"verse_key": "1:1",
"text": "[Image URL]",
"script_type": "qa_black_image_url",
"font_family": "qpc-hafs",
"words": [
{
"position": 1,
"text": "[Word Image URL]",
"location": "1:1:1"
}
],
"page_number": 1,
"juz_number": 1,
"hizb_number": 1
}
}
Field Descriptions
| Field | Type | Description |
|---|---|---|
| verse_key | String | Reference in the format surah:ayah (e.g., 1:1) |
| text | String | URL to the image file containing the verse text |
| script_type | String | Type of script rendering (qa_black_image_url) |
| font_family | String | CSS font family for proper rendering (qpc-hafs) |
| words | Array | Array of word objects with individual word text/images |
| words[].position | Integer | Position of the word within the verse |
| words[].text | String | URL to the individual word image |
| words[].location | String | Word location in format surah:ayah:word |
| page_number | Integer | Mushaf page number where this verse appears |
| juz_number | Integer | Juz number (1-30) containing this verse |
| hizb_number | Integer | Hizb number (1-60) containing this verse |
Usage Examples
CSS Integration
/* Include the font family in your CSS */
.quran-text {
font-family: 'qpc-hafs', 'Amiri', serif;
direction: rtl;
text-align: right;
}
JavaScript Usage
// Fetch verse data
fetch('/api/v1/verses/1:1.json')
.then(response => response.json())
.then(data => {
document.getElementById('verse').innerHTML = data.text;
document.getElementById('verse').className = 'qpc-hafs';
});
Features
- High-quality Arabic text rendering
- Proper diacritical marks and Tajweed annotations
- Responsive design for different screen sizes
- Word-by-word display for detailed study
- Optimized image format for printing and display
- Consistent visual quality across all devices